diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/onboarding/SubmitButton.tsx | 8 | ||||
| -rw-r--r-- | src/routes/Routes.tsx | 13 | ||||
| -rw-r--r-- | src/screens/onboarding/Login.tsx | 6 | ||||
| -rw-r--r-- | src/screens/onboarding/Profile.tsx | 4 | ||||
| -rw-r--r-- | src/screens/onboarding/Verification.tsx | 94 |
5 files changed, 64 insertions, 61 deletions
diff --git a/src/components/onboarding/SubmitButton.tsx b/src/components/onboarding/SubmitButton.tsx index d6a0d8d5..4a03bf52 100644 --- a/src/components/onboarding/SubmitButton.tsx +++ b/src/components/onboarding/SubmitButton.tsx @@ -14,7 +14,7 @@ interface SubmitButtonProps extends TouchableOpacityProps { /* * A button component that creates a TouchableOpacity in the style of our onboarding buttons. It takes in props to define the text in the TouchableOpacity as well as the background color. -*/ + */ const SubmitButton: React.FC<SubmitButtonProps> = ( props: SubmitButtonProps, ) => { @@ -22,11 +22,7 @@ const SubmitButton: React.FC<SubmitButtonProps> = ( <View {...props}> <TouchableOpacity {...props} - style={[ - styles.button, - {backgroundColor: props.color}, - ]} - > + style={[styles.button, {backgroundColor: props.color}]}> <Text style={styles.text}>{props.text}</Text> </TouchableOpacity> </View> diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index bf9b9fbd..98aeff8d 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -1,7 +1,13 @@ import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; -import {Login, Registration, Verification, Profile, Camera} from '../screens/onboarding'; +import { + Login, + Registration, + Verification, + Profile, + Camera, +} from '../screens/onboarding'; export type RootStackParamList = { Login: undefined; @@ -33,8 +39,9 @@ const Routes: React.FC<RoutesProps> = ({}) => { component={Verification} options={{headerShown: false}} /> - <RootStack.Screen name="Profile" - component={Profile} + <RootStack.Screen + name="Profile" + component={Profile} options={{headerShown: false}} /> <RootStack.Screen name="Camera" component={Camera} /> diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index c06f6f27..e8500eec 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -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}); }; @@ -310,8 +310,8 @@ const styles = StyleSheet.create({ textDecorationLine: 'underline', }, button: { - marginVertical: '10%' - } + marginVertical: '10%', + }, }); export default Login; diff --git a/src/screens/onboarding/Profile.tsx b/src/screens/onboarding/Profile.tsx index 5553fe7f..9b1dfd31 100644 --- a/src/screens/onboarding/Profile.tsx +++ b/src/screens/onboarding/Profile.tsx @@ -77,7 +77,7 @@ const styles = StyleSheet.create({ flex: 1, flexDirection: 'row', justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', }, largeButton: { padding: 5, @@ -107,7 +107,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', zIndex: 1, marginTop: '128%', - marginLeft: '30%' + marginLeft: '30%', }, addSmallProfilePicText: { fontWeight: 'bold', diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx index 1dd4cf9e..827f65e1 100644 --- a/src/screens/onboarding/Verification.tsx +++ b/src/screens/onboarding/Verification.tsx @@ -3,12 +3,7 @@ import React from 'react'; import {RootStackParamList} from '../../routes'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import { - Background, - CenteredView, - RegistrationWizard, - SubmitButton, -} from '../../components'; +import {Background, RegistrationWizard, SubmitButton} from '../../components'; import {Text} from 'react-native-animatable'; import { CodeField, @@ -16,7 +11,12 @@ import { useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field'; -import {StyleSheet, View, TouchableOpacity, KeyboardAvoidingView} from 'react-native'; +import { + StyleSheet, + View, + TouchableOpacity, + KeyboardAvoidingView, +} from 'react-native'; type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>; type LoginScreenNavigationProp = StackNavigationProp< RootStackParamList, @@ -37,43 +37,43 @@ const Verification: React.FC<VerificationProps> = ({}) => { return ( <Background centered style={styles.container}> - <RegistrationWizard style={styles.wizard} step="one" /> - <KeyboardAvoidingView behavior='padding' style={styles.form}> - <Text style={styles.formHeader}>Enter 6 digit code</Text> - <Text style={styles.description}> - We sent a 6 digit verification code to the email you provided. - </Text> - <CodeField - ref={ref} - {...valueProps} - value={value} - onChangeText={setValue} - cellCount={6} - rootStyle={styles.codeFieldRoot} - keyboardType="number-pad" - textContentType="oneTimeCode" - renderCell={({index, symbol, isFocused}) => ( - <View - onLayout={getCellOnLayoutHandler(index)} - key={index} - style={[styles.cellRoot, isFocused && styles.focusCell]}> - <Text style={styles.cellText}> - {symbol || (isFocused ? <Cursor /> : null)} - </Text> - </View> - )} - /> - <SubmitButton - text="Verify" - color="#fff" - style={styles.button} - accessibilityLabel="Verify" - accessibilityHint="Select this after entering your email verification code" - /> - <TouchableOpacity> - <Text style={styles.resend}>Resend Code</Text> - </TouchableOpacity> - </KeyboardAvoidingView> + <RegistrationWizard style={styles.wizard} step="one" /> + <KeyboardAvoidingView behavior="padding" style={styles.form}> + <Text style={styles.formHeader}>Enter 6 digit code</Text> + <Text style={styles.description}> + We sent a 6 digit verification code to the email you provided. + </Text> + <CodeField + ref={ref} + {...valueProps} + value={value} + onChangeText={setValue} + cellCount={6} + rootStyle={styles.codeFieldRoot} + keyboardType="number-pad" + textContentType="oneTimeCode" + renderCell={({index, symbol, isFocused}) => ( + <View + onLayout={getCellOnLayoutHandler(index)} + key={index} + style={[styles.cellRoot, isFocused && styles.focusCell]}> + <Text style={styles.cellText}> + {symbol || (isFocused ? <Cursor /> : null)} + </Text> + </View> + )} + /> + <SubmitButton + text="Verify" + color="#fff" + style={styles.button} + accessibilityLabel="Verify" + accessibilityHint="Select this after entering your email verification code" + /> + <TouchableOpacity> + <Text style={styles.resend}>Resend Code</Text> + </TouchableOpacity> + </KeyboardAvoidingView> </Background> ); }; @@ -87,7 +87,7 @@ const styles = StyleSheet.create({ wizard: { marginTop: '3.5%', flex: 1, - justifyContent: 'center' + justifyContent: 'center', }, form: { alignItems: 'center', @@ -137,7 +137,7 @@ const styles = StyleSheet.create({ borderBottomWidth: 2, }, button: { - marginVertical: '5%' - } + marginVertical: '5%', + }, }); export default Verification; |