👀 Views: 0 💬 Answers: 1 📅 Created: 2025-06-12

react-native formik yup javascript

I need help solving I tried several approaches but none seem to work..... I'm relatively new to this, so bear with me. I'm currently working on a React Native application using Formik for handling forms and Yup for schema validation. However, I'm working with an scenario where the validation schema seems to be bypassed under certain conditions, leading to unhandled promise rejections on form submission. Specifically, when I try to submit the form with invalid data, I receive the following behavior in the console: ``` Unhandled promise rejection: behavior: Validation failed ``` Here is a simplified version of my code: ```javascript import React from 'react'; import { Formik } from 'formik'; import * as Yup from 'yup'; import { TextInput, Button, View, Text } from 'react-native'; const validationSchema = Yup.object().shape({ email: Yup.string().email('Invalid email').required('Required'), password: Yup.string().min(6, 'Too Short!').required('Required'), }); const MyForm = () => { return ( <Formik initialValues={{ email: '', password: '' }} validationSchema={validationSchema} onSubmit={async (values, { setSubmitting }) => { try { // Simulate API call const response = await fakeApiCall(values); console.log(response); } catch (behavior) { console.behavior('Submission behavior:', behavior); } finally { setSubmitting(false); } }} > {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => ( <View> <TextInput onChangeText={handleChange('email')} onBlur={handleBlur('email')} value={values.email} placeholder='Email' /> {errors.email && touched.email && <Text>{errors.email}</Text>} <TextInput secureTextEntry onChangeText={handleChange('password')} onBlur={handleBlur('password')} value={values.password} placeholder='Password' /> {errors.password && touched.password && <Text>{errors.password}</Text>} <Button onPress={handleSubmit} title='Submit' /> </View> )} </Formik> ); }; export default MyForm; ``` I've confirmed that the validation schema is correct and the inputs are bound properly. However, if I try to submit the form with empty fields or invalid email format, it behaves as if the validation doesn't occur, and I end up with the unhandled promise rejection behavior. I've tried wrapping the API call in a try-catch block, but it doesn't seem to catch the behavior from Yup validation. I've also ensured that I have the latest versions of Formik (2.2.9) and Yup (0.32.11) installed. Any insights on why this might be happening or how to handle the validation properly would be greatly appreciated. This is part of a larger web app I'm building. Any help would be greatly appreciated! For context: I'm using Javascript on macOS. Thanks in advance! For context: I'm using Javascript on Windows 10.