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>

1 files changed, 115 insertions, 20 deletions

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;