Relevant Modules:
Formik: "2.1.4"
Yup: "0.28.5"
React-Navigation v5
So i've been struggling with a simple formik problem for a day now, and I'm sure I must be missing something, but I would love some help, because I can't see what I'm doing wrong.
I have two files: Login/index.tsx
& Login/LoginForm.tsx
Login/index.tsx for the most part looks like this:
const handleSubmit = async (values) => { console.log("values submitted == ", values) } return (<View style={Styles.container}><CircleIconButton size={60} backgroundColor={'white'} onPress={goBack}><Icon name={'arrow-left'} type={'FontAwesome5'} style={{ color: Colors.primaryOrange}} /></CircleIconButton><Text style={[Typography.title, {color: 'white', marginTop: '30%'}]}> Login</Text><Text style={[Typography.titleDesc, {color: 'white', marginTop: '3%', marginBottom: '8%'}]}> Securely login to your account</Text><Formik initialValues={formInitialValues} onSubmit={handleSubmit}><LoginForm /></Formik></View> )
Login/LoginForm.tsx for the most part looks like this:
const {handleChange, handleSubmit, values, isSubmitting, isValidating} = useFormikContext();const { navigate } = useNavigation()return (<View style={Styles.container}><IVTextInput onChangeText={handleChange('email')} value={values?.email} editable fieldLabel={"Phone/Email"} /><IVTextInput isPassword editable containerStyle={{ marginTop: '8%', marginBottom: '15%' }} onChangeText={handleChange('password')} value={values?.password} fieldLabel={"Your Password"} /><RoundedButton block onPress={handleSubmit}> Log In</RoundedButton><View style={{...allCenter, marginTop: '7%'}}><Text style={[Typography.titleDesc, Styles.signupTextButton]} onPress={() => navigate('Signup')}> Don’t have an account? Register</Text><Text style={[Typography.titleDesc, {color: 'white', marginTop: '8%'}]}> Forgot Password</Text></View></View> )
LoginForm is wrapped by the <Formik>
tags. I then try to access the formik context in the LoginForm.tsx file.
Things i've tried:
Printing the
values
variables as it changes (from me typing in the textfields), and I can see that the values object is tracking my keystrokesPrinting
isSubmitting
&isValidating
, and at no point hasisSubmitting
= true ANDisValidating
= false. when I submitisSubmitting
== true andisValidating
== true. The docs for Formik seem to suggest that I know when my form is submitting whenisValidating
== false &&isSubmitting
== true but that hasn't happened yet.Creating a Yup schema, but i've also tried removing the yup schema within the
<Formik>
tag inside the Login/index.tsx file, either way, neither theonSubmit
nor thehandleSubmit
funciton do anything when I tap the Login button.Put in a simple
console.log()
statement to test that the action to my<RoundedButton>
onPress
prop is working, and it worked, myconsole.log()
was seen in the console output.Returning an empty object from the validate prop within the
<Formik>
opening tag, because the general consensus I get from looking online is that the form doesn't submit when the validation fails
Interesting Info: When I used a validationSchema, I purposely violated the validation, and when I printed errors the object was empty
The gist is . . . nothing i've tried seems to get the onSubmit orhandleSubmit functions to fire. Please let me know what I could bedoing wrong, any help would be greatly appreciated.
Thank You