App.tsx

import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  StatusBar,
  Image,
  Switch,
} from 'react-native';

import Ionicons from 'react-native-vector-icons/Ionicons';
import Feather from 'react-native-vector-icons/Feather';

Ionicons.loadFont();
Feather.loadFont();

declare var global: { HermesInternal: null | {} };

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ marginVertical: 40, marginHorizontal: 20 }}>
          <View style={styles.switchWrapper}>
            <Switch />
            <Ionicons name="ios-moon" size={25} style={{ marginLeft: 20 }} />
          </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 }}>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 }}>Follow me on my Social media Accounts for the best JPEGS!!</Text>
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  switchWrapper: {
    flexDirection: 'row',
  },
  image: {
    height: 300,
    width: 300,
  },
  imageWrapper: {
    height: 300,
    width: 300,
    borderRadius: 300 / 2,
    overflow: 'hidden',
    marginVertical: 70,
    alignSelf: 'center',
  },
  iconsWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 30
  },
  icon: {
    backgroundColor: 'teal',
    height: 60,
    width: 60,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30
  }
});

export default App;