App.tsx

const App = () => {
  const [isDarkMode, setDarkMode] = useState(false);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        {
          isDarkMode && <View style={{ ...StyleSheet.absoluteFillObject, backgroundColor: 'black' }} />
        }
        <View style={{ marginVertical: 40, marginHorizontal: 20 }}>
          <View style={styles.switchWrapper}>
            <Switch value={isDarkMode} onValueChange={() => setDarkMode(!isDarkMode)} />
            {isDarkMode ? <Ionicons name="ios-sunny" size={25} style={{ marginLeft: 20 }} color={'#fff'} /> : <Ionicons name="ios-moon" size={25} style={{ marginLeft: 20 }} color={'teal'} />}
          </View>
          <View style={styles.imageWrapper}>
            <Image source={require('./src/assets/images/woman.jpg')} style={styles.image} />
          </View>
          <Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 25, color: isDarkMode ? '#fff' : 'black' }}>An Image of a Model</Text>
          <View style={styles.iconsWrapper}>
            <View style={styles.icon}>
              <Feather name="github" size={35} color='#fff' />
            </View>
            <View style={styles.icon}>
              <Feather name="twitter" size={35} color='#fff' />
            </View>
            <View style={styles.icon}>
              <Feather name="facebook" size={35} color='#fff' />
            </View>
          </View>
          <Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 25, color: isDarkMode ? '#fff' : 'black' }}>Follow me on my Social media Accounts for the best JPEGS!!</Text>
        </View>
      </SafeAreaView>
    </>
  );
};