diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | ios/Frontend.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist | 8 | ||||
| -rw-r--r-- | ios/Frontend/Info.plist | 2 | ||||
| -rw-r--r-- | src/components/onboarding/SubmitButton.tsx | 1 | ||||
| -rw-r--r-- | src/routes/Routes.tsx | 9 | ||||
| -rw-r--r-- | src/screens/onboarding/Camera.tsx | 28 | ||||
| -rw-r--r-- | src/screens/onboarding/Login.tsx (renamed from src/screens/Login.tsx) | 18 | ||||
| -rw-r--r-- | src/screens/onboarding/Profile.tsx | 121 | ||||
| -rw-r--r-- | src/screens/onboarding/Registration.tsx (renamed from src/screens/Registration.tsx) | 6 | ||||
| -rw-r--r-- | src/screens/onboarding/Verification.tsx (renamed from src/screens/Verification.tsx) | 8 | ||||
| -rw-r--r-- | src/screens/onboarding/index.ts (renamed from src/screens/index.ts) | 2 |
11 files changed, 189 insertions, 17 deletions
@@ -68,3 +68,6 @@ buck-out/ # CocoaPods /ios/Pods/ + +# xcshareddata 32-bit warning +IDEWorkspaceChecks.plist diff --git a/ios/Frontend.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/ios/Frontend.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist new file mode 100644 index 00000000..18d98100 --- /dev/null +++ b/ios/Frontend.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> +<plist version="1.0"> +<dict> + <key>IDEDidComputeMac32BitWarning</key> + <true/> +</dict> +</plist> diff --git a/ios/Frontend/Info.plist b/ios/Frontend/Info.plist index 75bf913c..357d12ab 100644 --- a/ios/Frontend/Info.plist +++ b/ios/Frontend/Info.plist @@ -39,6 +39,8 @@ </dict> <key>NSLocationWhenInUseUsageDescription</key> <string></string> + <key>NSPhotoLibraryUsageDescription</key> + <string>Tagg would like to access your photos.</string> <key>UILaunchStoryboardName</key> <string>LaunchScreen</string> <key>UIRequiredDeviceCapabilities</key> diff --git a/src/components/onboarding/SubmitButton.tsx b/src/components/onboarding/SubmitButton.tsx index f946d390..d6a0d8d5 100644 --- a/src/components/onboarding/SubmitButton.tsx +++ b/src/components/onboarding/SubmitButton.tsx @@ -21,6 +21,7 @@ const SubmitButton: React.FC<SubmitButtonProps> = ( return ( <View {...props}> <TouchableOpacity + {...props} style={[ styles.button, {backgroundColor: props.color}, diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index c426b033..bf9b9fbd 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -1,12 +1,14 @@ import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; -import {Login, Registration, Verification} from '../screens'; +import {Login, Registration, Verification, Profile, Camera} from '../screens/onboarding'; export type RootStackParamList = { Login: undefined; Registration: undefined; Verification: undefined; + Profile: undefined; + Camera: undefined; }; const RootStack = createStackNavigator<RootStackParamList>(); @@ -31,6 +33,11 @@ const Routes: React.FC<RoutesProps> = ({}) => { component={Verification} options={{headerShown: false}} /> + <RootStack.Screen name="Profile" + component={Profile} + options={{headerShown: false}} + /> + <RootStack.Screen name="Camera" component={Camera} /> </RootStack.Navigator> ); }; diff --git a/src/screens/onboarding/Camera.tsx b/src/screens/onboarding/Camera.tsx new file mode 100644 index 00000000..23776e2d --- /dev/null +++ b/src/screens/onboarding/Camera.tsx @@ -0,0 +1,28 @@ +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/Login.tsx b/src/screens/onboarding/Login.tsx index 1ddf6e0a..c06f6f27 100644 --- a/src/screens/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -13,18 +13,18 @@ import { Platform, } from 'react-native'; -import {RootStackParamList} from '../routes'; -import {Background, TaggInput, SubmitButton} from '../components'; -import {usernameRegex, LOGIN_ENDPOINT} from '../constants'; +import {RootStackParamList} from '../../routes'; +import {Background, TaggInput, SubmitButton} from '../../components'; +import {usernameRegex, LOGIN_ENDPOINT} from '../../constants'; -type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>; -type LoginScreenNavigationProp = StackNavigationProp< +type VerificationScreenRouteProp = RouteProp<RootStackParamList, 'Login'>; +type VerificationScreenNavigationProp = StackNavigationProp< RootStackParamList, 'Login' >; interface LoginProps { - route: LoginScreenRouteProp; - navigation: LoginScreenNavigationProp; + route: VerificationScreenRouteProp; + navigation: VerificationScreenNavigationProp; } /** * Login screen. @@ -150,7 +150,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => { * Handles tap on "Get Started" text by resetting fields & navigating to the registration page. */ const goToRegistration = () => { - navigation.navigate('Registration'); + navigation.navigate('Registration'); setForm({...form, attemptedSubmit: false}); }; @@ -213,7 +213,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => { behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.keyboardAvoidingView}> <Image - source={require('../assets/images/logo.png')} + source={require('../../assets/images/logo.png')} style={styles.logo} /> <TaggInput 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; diff --git a/src/screens/Registration.tsx b/src/screens/onboarding/Registration.tsx index 0471e42e..29a2b3f3 100644 --- a/src/screens/Registration.tsx +++ b/src/screens/onboarding/Registration.tsx @@ -12,20 +12,20 @@ import { KeyboardAvoidingView, } from 'react-native'; -import {RootStackParamList} from '../routes'; +import {RootStackParamList} from '../../routes'; import { ArrowButton, RegistrationWizard, TaggInput, TermsConditions, Background, -} from '../components'; +} from '../../components'; import { emailRegex, passwordRegex, usernameRegex, REGISTER_ENDPOINT, -} from '../constants'; +} from '../../constants'; type RegistrationScreenRouteProp = RouteProp< RootStackParamList, diff --git a/src/screens/Verification.tsx b/src/screens/onboarding/Verification.tsx index 82f01e54..1dd4cf9e 100644 --- a/src/screens/Verification.tsx +++ b/src/screens/onboarding/Verification.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {RootStackParamList} from '../routes'; +import {RootStackParamList} from '../../routes'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import { @@ -8,7 +8,7 @@ import { CenteredView, RegistrationWizard, SubmitButton, -} from '../components'; +} from '../../components'; import {Text} from 'react-native-animatable'; import { CodeField, @@ -23,8 +23,8 @@ type LoginScreenNavigationProp = StackNavigationProp< 'Login' >; interface VerificationProps { - route: LoginScreenRouteProp; - navigation: LoginScreenNavigationProp; + route: VerificationScreenRouteProp; + navigation: VerificationScreenNavigationProp; } const Verification: React.FC<VerificationProps> = ({}) => { diff --git a/src/screens/index.ts b/src/screens/onboarding/index.ts index 8c8e7b26..a45daa5d 100644 --- a/src/screens/index.ts +++ b/src/screens/onboarding/index.ts @@ -1,3 +1,5 @@ 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'; |