diff options
Diffstat (limited to 'src/screens/onboarding/Verification.tsx')
-rw-r--r-- | src/screens/onboarding/Verification.tsx | 94 |
1 files changed, 47 insertions, 47 deletions
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; |