TMA116 - Access Photo Gallery (#21)

* profile picture go to gallery methods added

* fitting images into circles

* styling stuff

* removed debug code

* changed image size to 580x580 for profile pic or else quality is low

* profile picture go to gallery methods added

* fitting images into circles

* styling stuff

* removed debug code

* changed image size to 580x580 for profile pic or else quality is low

* change circle to square cropper

* merging

* remove file from gitignore

* fitting images into circles

* styling stuff

* remove file from gitignore

* changing crop back to circle

Co-authored-by: meganhong <meganhong31@g.ucla.edu>

5 files changed, 119 insertions, 57 deletions

diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index c6365613..93c16fc9 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -6,7 +6,6 @@ import {
   Registration,
   Verification,
   Profile,
-  Camera,
 } from '../screens/onboarding';
 
 export type RootStackParamList = {
@@ -14,7 +13,6 @@ export type RootStackParamList = {
   Registration: undefined;
   Verification: {username: string; email: string} | undefined;
   Profile: undefined;
-  Camera: undefined;
 };
 
 const RootStack = createStackNavigator<RootStackParamList>();
@@ -44,11 +42,6 @@ const Routes: React.FC<RoutesProps> = ({}) => {
         component={Profile}
         options={{headerShown: false}}
       />
-      <RootStack.Screen
-        name="Camera"
-        component={Camera}
-        options={{headerShown: false}}
-      />
     </RootStack.Navigator>
   );
 };
diff --git a/src/screens/onboarding/Camera.tsx b/src/screens/onboarding/Camera.tsx
deleted file mode 100644
index 23776e2d..00000000
--- a/src/screens/onboarding/Camera.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {RootStackParamList} from '../../routes';
-import {Background, CenteredView} from '../../components';
-import {Text} from 'react-native-animatable';
-
-type CameraScreenRouteProp = RouteProp<RootStackParamList, 'Camera'>;
-type CameraScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
-  'Camera'
->;
-interface CameraProps {
-  route: CameraScreenRouteProp;
-  navigation: CameraScreenNavigationProp;
-}
-
-const Camera: React.FC<CameraProps> = ({}) => {
-  return (
-    <Background>
-      <CenteredView>
-        <Text>Camera!</Text>
-      </CenteredView>
-    </Background>
-  );
-};
-
-export default Camera;
diff --git a/src/screens/onboarding/Profile.tsx b/src/screens/onboarding/Profile.tsx
index 9b1dfd31..cb4a2728 100644
--- a/src/screens/onboarding/Profile.tsx
+++ b/src/screens/onboarding/Profile.tsx
@@ -1,9 +1,17 @@
 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 {
+  View,
+  Text,
+  StatusBar,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
 import {RootStackParamList} from '../../routes';
-import {Background, CenteredView} from '../../components';
+import {Background} from '../../components';
+import ImagePicker from 'react-native-image-crop-picker';
 
 type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
 type ProfileScreenNavigationProp = StackNavigationProp<
@@ -14,25 +22,50 @@ interface ProfileProps {
   route: ProfileScreenRouteProp;
   navigation: ProfileScreenNavigationProp;
 }
+
 /**
  * Create Profile screen for onboarding.
  * @param navigation react-navigation navigation object.
  */
 
-const Profile: React.FC<ProfileProps> = ({navigation}) => {
+const Profile: React.FC<ProfileProps> = ({}) => {
+  const [largePicture, setLargePicture] = React.useState({
+    path: '',
+    height: 0,
+    width: 0,
+  });
+  const [smallPicture, setSmallPicture] = React.useState({
+    path: '',
+    height: 0,
+    width: 0,
+  });
+  const [showLargeText, setShowLargeText] = React.useState(true);
+  const [showSmallText, setShowSmallText] = React.useState(true);
+
   /**
    * Profile screen "Add Large Profile Pic Here" button
    */
   const LargeProfilePic = () => (
     <View style={styles.container}>
       <View style={styles.largeButton}>
-        <Text
+        <TouchableOpacity
           accessible={true}
           accessibilityLabel="ADD LARGE PROFILE PIC HERE"
-          style={styles.addLargeProfilePicText}
-          onPress={goToCamera}>
-          ADD LARGE PROFILE PIC HERE
-        </Text>
+          onPress={goToGalleryLargePic}
+          style={styles.largeButtonContainer}>
+          {showLargeText ? (
+            <Text style={styles.addLargeProfilePicText}>
+              ADD LARGE PROFILE PIC HERE
+            </Text>
+          ) : null}
+
+          {largePicture.path !== '' && (
+            <Image
+              source={{uri: largePicture.path}}
+              style={styles.largeProfilePic}
+            />
+          )}
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -43,31 +76,78 @@ const Profile: React.FC<ProfileProps> = ({navigation}) => {
   const SmallProfilePic = () => (
     <View style={styles.container}>
       <View style={styles.smallButton}>
-        <Text
+        <TouchableOpacity
           accessible={true}
           accessibilityLabel="ADD SMALLER PIC"
-          style={styles.addSmallProfilePicText}
-          onPress={goToCamera}>
-          ADD SMALLER PIC
-        </Text>
+          onPress={goToGallerySmallPic}>
+          {showSmallText ? (
+            <Text style={styles.addSmallProfilePicText}>ADD SMALLER PIC</Text>
+          ) : null}
+
+          {smallPicture.path !== '' && (
+            <Image
+              source={{uri: smallPicture.path}}
+              style={styles.smallProfilePic}
+            />
+          )}
+        </TouchableOpacity>
       </View>
     </View>
   );
 
   /*
    * Handles tap on add profile picture buttons by navigating to camera access
+   * and selecting a picture from gallery for large profile picture
+   */
+  const goToGalleryLargePic = () => {
+    ImagePicker.openPicker({
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperCircleOverlay: true,
+    })
+      .then((picture) => {
+        if ('path' in picture) {
+          setLargePicture({
+            path: picture.path,
+            height: picture.height,
+            width: picture.width,
+          });
+          setShowLargeText(false);
+        }
+      })
+      .catch(() => {});
+  };
+
+  /*
+   * Handles tap on add profile picture buttons by navigating to camera access
+   * and selecting a picture from gallery for small profile picture
    */
-  const goToCamera = () => {
-    navigation.navigate('Camera');
+  const goToGallerySmallPic = () => {
+    ImagePicker.openPicker({
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperCircleOverlay: true,
+    })
+      .then((picture) => {
+        if ('path' in picture) {
+          setSmallPicture({
+            path: picture.path,
+            height: picture.height,
+            width: picture.width,
+          });
+          setShowSmallText(false);
+        }
+      })
+      .catch(() => {});
   };
 
   return (
     <Background>
       <StatusBar barStyle="light-content" />
-      <CenteredView>
-        <LargeProfilePic />
-        <SmallProfilePic />
-      </CenteredView>
+      <LargeProfilePic />
+      <SmallProfilePic />
     </Background>
   );
 };
@@ -79,13 +159,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  largeButtonContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
   largeButton: {
     padding: 5,
     height: 180,
     width: 180,
     borderRadius: 400,
     backgroundColor: '#fff',
-    justifyContent: 'center',
+    alignItems: 'center',
     marginTop: '100%',
     marginRight: '12%',
     zIndex: 2,
@@ -97,6 +181,11 @@ const styles = StyleSheet.create({
     color: '#863FF9',
     textAlign: 'center',
   },
+  largeProfilePic: {
+    height: 180,
+    width: 180,
+    borderRadius: 400,
+  },
   smallButton: {
     position: 'relative',
     padding: 5,
@@ -105,6 +194,7 @@ const styles = StyleSheet.create({
     borderRadius: 400,
     backgroundColor: '#E1F0FF',
     justifyContent: 'center',
+    alignItems: 'center',
     zIndex: 1,
     marginTop: '128%',
     marginLeft: '30%',
@@ -116,6 +206,11 @@ const styles = StyleSheet.create({
     color: '#806DF4',
     textAlign: 'center',
   },
+  smallProfilePic: {
+    height: 110,
+    width: 110,
+    borderRadius: 400,
+  },
 });
 
 export default Profile;
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 1c456e01..77a43a6d 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -90,7 +90,10 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
       let sendOtpStatusCode = sendOtpResponse.status;
       if (sendOtpStatusCode === 200) {
         setValue('');
-        Alert.alert('New verification code sent!', 'Check your email for your code.');
+        Alert.alert(
+          'New verification code sent!',
+          'Check your email for your code.',
+        );
       } else {
         Alert.alert('Something went wrong!');
       }
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index a45daa5d..919ad7fd 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -1,5 +1,4 @@
 export {default as Login} from './Login';
 export {default as Registration} from './Registration';
 export {default as Verification} from './Verification';
-export {default as Camera} from './Camera';
 export {default as Profile} from './Profile';