Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 3x 3x | import React from 'react';
import { Controller, useForm } from 'react-hook-form';
import { Dimensions, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
import 'react-native-get-random-values';
import { Text } from 'react-native-paper';
import { useRegistrationFormState } from '../../../contexts/RegisterContext';
const RegisterCredentials = ({changeStep}) => {
const { dispatch, state: { username, email, step} } = useRegistrationFormState();
const { control, handleSubmit, formState: {errors} } = useForm({
mode: 'all'
});
const next = (formData) => {
dispatch({ type: "USERNAME_CHANGE", payload: formData.username });
dispatch({ type: "EMAIL_CHANGE", payload: formData.email });
changeStep(2, "Next, we'll have you set a password.");
}
return (
<View>
<View style={{margin: 20}}>
<Controller
control={control}
render={({ field: { onChange, value }}) => (
<TextInput
mode="outlined"
style={[styles.textInput, errors.username && styles.errorInput]}
placeholder="Username"
value={value}
onChangeText={value => onChange(value)} />
)}
name="username"
rules={{ required: true, minLength: 5, maxLength: 15}}
/>
{errors.username?.type === "required" && <Text style={styles.errorText}>Username is required.</Text>}
{errors.username?.type === "minLength" && <Text style={styles.errorText}>Username must be at least 5 characters.</Text>}
{errors.username?.type === "maxLength" && <Text style={styles.errorText}>Username must be no more than 15 characters.</Text>}
<Controller
defaultValue={email}
control={control}
render={({ field: { onChange, value }}) => (
<TextInput
mode="outlined"
style={[styles.textInput, errors.username && styles.errorInput]}
placeholder="Email"
value={value}
onChangeText={value => onChange(value)} />
)}
rules={{
required: true,
pattern:
{
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
}}}
name="email"/>
{errors.email?.type === "required" && <Text style={styles.errorText}>Email is required.</Text>}
{errors.email?.type === "pattern" && <Text style={styles.errorText}>Must be a valid email address.</Text>}
</View>
<TouchableOpacity onPress={handleSubmit(next)} style={styles.nextBtn} >
<Text style={{ color: 'white', fontSize: 20 }}>Next</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
flex: 1,
justifyContent: 'flex-start',
resizeMode: 'cover',
},
textContainer: {
marginHorizontal: 20,
marginBottom: 30,
borderRadius: 50,
},
textInput: {
marginVertical: 7,
paddingLeft: 30,
borderRadius: 50,
overflow: 'hidden',
backgroundColor: 'white',
height: 50
},
errorText: {
alignSelf: 'flex-end',
color: 'red',
fontSize: 15
},
errorInput: {
borderWidth: 2,
borderColor: 'red'
},
nextBtn: {
marginHorizontal: 20,
marginBottom: 60,
borderRadius: 50,
justifyContent: 'center',
backgroundColor: '#df3f3f',
margin: 5,
height: 50,
alignItems: 'center'
},
})
export default RegisterCredentials;
|