aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/routes/Routes.tsx7
-rw-r--r--src/screens/onboarding/Camera.tsx28
-rw-r--r--src/screens/onboarding/Profile.tsx135
-rw-r--r--src/screens/onboarding/Verification.tsx5
-rw-r--r--src/screens/onboarding/index.ts1
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';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:34:19 +0000