Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React-Native (0.64.2) Formik handleSubmit onSubmit not firing

$
0
0

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 keystrokes

  • Printing isSubmitting& isValidating, and at no point has isSubmitting = true AND isValidating = false. when I submit isSubmitting == true and isValidating == true. The docs for Formik seem to suggest that I know when my form is submitting when isValidating == 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 the onSubmit nor the handleSubmit 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, my console.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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>