From c38291fb50e30af0739f17de42f3b8bb51cca73e Mon Sep 17 00:00:00 2001 From: meganhong <34787696+meganhong@users.noreply.github.com> Date: Wed, 15 Jul 2020 13:41:57 -0700 Subject: 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 --- src/routes/Routes.tsx | 7 -- src/screens/onboarding/Camera.tsx | 28 ------- src/screens/onboarding/Profile.tsx | 135 +++++++++++++++++++++++++++----- src/screens/onboarding/Verification.tsx | 5 +- src/screens/onboarding/index.ts | 1 - 5 files changed, 119 insertions(+), 57 deletions(-) delete mode 100644 src/screens/onboarding/Camera.tsx (limited to 'src') 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(); @@ -44,11 +42,6 @@ const Routes: React.FC = ({}) => { component={Profile} options={{headerShown: false}} /> - ); }; 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; -type CameraScreenNavigationProp = StackNavigationProp< - RootStackParamList, - 'Camera' ->; -interface CameraProps { - route: CameraScreenRouteProp; - navigation: CameraScreenNavigationProp; -} - -const Camera: React.FC = ({}) => { - return ( - - - Camera! - - - ); -}; - -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; 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 = ({navigation}) => { +const Profile: React.FC = ({}) => { + 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 = () => ( - - ADD LARGE PROFILE PIC HERE - + onPress={goToGalleryLargePic} + style={styles.largeButtonContainer}> + {showLargeText ? ( + + ADD LARGE PROFILE PIC HERE + + ) : null} + + {largePicture.path !== '' && ( + + )} + ); @@ -43,31 +76,78 @@ const Profile: React.FC = ({navigation}) => { const SmallProfilePic = () => ( - - ADD SMALLER PIC - + onPress={goToGallerySmallPic}> + {showSmallText ? ( + ADD SMALLER PIC + ) : null} + + {smallPicture.path !== '' && ( + + )} + ); /* * 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 ( - - - - + + ); }; @@ -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 = ({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'; -- cgit v1.2.3-70-g09d2