1 files changed, 121 insertions, 0 deletions
diff --git a/src/screens/onboarding/Profile.tsx b/src/screens/onboarding/Profile.tsx
new file mode 100644
index 00000000..5553fe7f
--- /dev/null
+++ b/src/screens/onboarding/Profile.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {View, Text, StatusBar, StyleSheet} from 'react-native';
+import {RootStackParamList} from '../../routes';
+import {Background, CenteredView} from '../../components';
+
+type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
+type ProfileScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'Profile'
+>;
+interface ProfileProps {
+  route: ProfileScreenRouteProp;
+  navigation: ProfileScreenNavigationProp;
+}
+/**
+ * Create Profile screen for onboarding.
+ * @param navigation react-navigation navigation object.
+ */
+
+const Profile: React.FC<ProfileProps> = ({navigation}) => {
+  /**
+   * Profile screen "Add Large Profile Pic Here" button
+   */
+  const LargeProfilePic = () => (
+    <View style={styles.container}>
+      <View style={styles.largeButton}>
+        <Text
+          accessible={true}
+          accessibilityLabel="ADD LARGE PROFILE PIC HERE"
+          style={styles.addLargeProfilePicText}
+          onPress={goToCamera}>
+          ADD LARGE PROFILE PIC HERE
+        </Text>
+      </View>
+    </View>
+  );
+
+  /**
+   * Profile screen "Add Smaller Profile Pic Here" button
+   */
+  const SmallProfilePic = () => (
+    <View style={styles.container}>
+      <View style={styles.smallButton}>
+        <Text
+          accessible={true}
+          accessibilityLabel="ADD SMALLER PIC"
+          style={styles.addSmallProfilePicText}
+          onPress={goToCamera}>
+          ADD SMALLER PIC
+        </Text>
+      </View>
+    </View>
+  );
+
+  /*
+   * Handles tap on add profile picture buttons by navigating to camera access
+   */
+  const goToCamera = () => {
+    navigation.navigate('Camera');
+  };
+
+  return (
+    <Background>
+      <StatusBar barStyle="light-content" />
+      <CenteredView>
+        <LargeProfilePic />
+        <SmallProfilePic />
+      </CenteredView>
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  largeButton: {
+    padding: 5,
+    height: 180,
+    width: 180,
+    borderRadius: 400,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    marginTop: '100%',
+    marginRight: '12%',
+    zIndex: 2,
+  },
+  addLargeProfilePicText: {
+    fontWeight: 'bold',
+    padding: 22,
+    fontSize: 12,
+    color: '#863FF9',
+    textAlign: 'center',
+  },
+  smallButton: {
+    position: 'relative',
+    padding: 5,
+    height: 110,
+    width: 110,
+    borderRadius: 400,
+    backgroundColor: '#E1F0FF',
+    justifyContent: 'center',
+    zIndex: 1,
+    marginTop: '128%',
+    marginLeft: '30%'
+  },
+  addSmallProfilePicText: {
+    fontWeight: 'bold',
+    padding: 10,
+    fontSize: 12,
+    color: '#806DF4',
+    textAlign: 'center',
+  },
+});
+
+export default Profile;