How to show an alert with errors found after submitting Formik form in react native

Question

I have a Formik form in react native and a Yup validationSchema. When user submits form I want to create an alert with the error fields if there are fields that are invalid.

Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1",

I have tried using isValid inside the Formik render and create an Alert with errors, but I get an empty errors object. However if I submit again/or click submit twice, the error object contains the invalid fields as expected.

How can I get the errors object on first submit?

Answer 1

What you should do is have a modal or something like that that will show the errors.

When using Formik that component that you render (you can use component, render and also children) will recieve the prop with the errors as you can see in the example from the docs.

<Formik>                              {// getting the errors here }
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

errors will be an object so you check for the keys (or you can also use values) of errors and decide if you will render you error modal or not.

<Formik
    validationSchema={yourValidationSchema}
    onSubmit={whatYouWantTodoWhenEverythingIsGood}
    initialValues={{ email: '' }}
>                                 
    {({ errors, values, handleChange, handleBlur}) => (
        <View>
            <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
            {// checking if you have errors}
            {
                Object.keys(errors).length > 0 && 
                    <Modal errors={errors}/>
            }
        </View>
  )}
</Formik>

Depending where your modal is from, you can use <Modal isActive={Object.keys(errors).length > 0} errors={errors}/> or other things like that.

e.g. using react-native modal

<Modal
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

You should use Object.keys(errors).length > 0 to decide if you should show the modal with errors or not.

Answer 2

This is because the touched object isn't updated when clicking the submit button when you are in RN. Try setting blank values as an initial values to your fields that has a validation schema. Something like this:

initialValues={{ input_1: "", input_2: "" }}

This answer from the formik git repo helped me.