Currently, I have a screen setup in my react native application where it handles creating new users. The issue I am having is the validation messages or errors messages text I added keeps appearing to the right of the input boxes instead of under the boxes which resulted to input elements getting shifted over. I was looking for something similar to a break element (eg..
) in React Native and didn't seem to find one.
Below is my code so far
const SignUpForm = () => {
return ( <
SafeAreaView style = {
styles.container
} >
<
Formik validationSchema = {
signUpValidationSchema
}
initialValues = {
{
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
}
}
onSubmit = {
values => console.log(values)
} >
{
({
handleChange,
handleBlur,
handleSubmit,
values,
errors,
isValid
}) => ( <
>
<
View >
<
Text style = {
styles.createScrText
} > Create Your < /Text> <
Text style = {
styles.createScrText
} > Jobs @Scale Account < /Text> <
/View> <
View style = {
styles.nameRow
} >
<
TextInput
// component={CustomInput}
name = "firstName"
placeholder = "First Name"
style = {
styles.nameBorderL
}
value = {
values.firstName
}
onChangeText = {
handleChange('firstName')
}
onBlur = {
handleBlur('firstName')
}
/> {
errors.firstName ?
<
Text style = {
styles.errors
} > {
errors.firstName
} < /Text> : <Text></Text >
} <
TextInput
// component={CustomInput}
name = "lastName"
placeholder = "Last Name"
style = {
styles.nameBorderR
}
value = {
values.lastName
}
onChangeText = {
handleChange('lastName')
}
onBlur = {
handleBlur('lastName')
}
/> <
/View> {
errors.lastName ?
<
Text style = {
styles.errors
} > {
errors.lastName
} < /Text> : <Text></Text >
} <
TextInput
// component={CustomInput}
name = "email"
placeholder = "Email Address"
keyboardType = "email-address"
style = {
styles.otherFields
}
value = {
values.email
}
onChangeText = {
handleChange('email')
}
onBlur = {
handleBlur('email')
}
/> {
errors.email ?
<
Text style = {
styles.errors
} > {
errors.email
} < /Text> : <Text></Text >
} <
TextInput
// component={CustomInput}
name = "passowrd"
placeholder = "Password"
secureTextEntry style = {
styles.otherFields
}
value = {
values.password
}
onChangeText = {
handleChange('password')
}
onBlur = {
handleBlur('password')
}
onBlur = {
handleBlur('password')
}
/> {
errors.password ?
<
Text style = {
styles.errors
} > {
errors.password
} < /Text> : <Text></Text >
} <
TextInput
// component={CustomInput}
name = "confirmPassword"
placeholder = "Confirm Password"
secureTextEntry style = {
styles.otherFields
}
value = {
values.confirmPassword
}
onChangeText = {
handleChange('confirmPassword')
}
onBlur = {
handleBlur('confirmPassword')
}
/> {
errors.confirmPassword ?
<
Text style = {
styles.errors
} > {
errors.confirmPassword
} < /Text> : <Text></Text >
}
<
TouchableOpacity onPress = {
handleSubmit
}
disabled = {
!isValid
}
style = {
styles.btn
}
disabled = {
true
} >
<
Text style = {
styles.btnText
} > Sign Up < /Text> <
/TouchableOpacity> <
/>
)
} <
/Formik> <
/SafeAreaView>
)
}
export default SignUpForm```
Please let me know if there is a workaround for this.
Also, expo will not start for some reason, so I might not be able to try suggestions till it's back up. Currently, try setting up for my Android phone though.