TypeError: undefined is not an object (evaluating '(i === 0 ? obj : resVal)[pathArray[i]]')

[arjunlandes]

I'm basically using the demo Gist verbatim:

https://snack.expo.io/@almouro/react-native-formik-gist

When I type a single letter into any text field I get the error:

TypeError: undefined is not an object (evaluating '(i === 0 ? obj : resVal)[pathArray[i]]')

I tried removing validationSchema and I still got the error. Separately, I tried removing withNextInputAutoFocusForm and withNextInputAutoFocusInput, and still got the problem. It feels like a bug in handleTextInput. Maybe I'm doing something stupid in the syntax below.

From package.json:

"formik": "^2.1.4",
"react-native-formik": "^1.7.8",
"react-native-material-textfield": "^0.16.1",
"recompose": "^0.30.0",
"yup": "^0.28.3"

Code:

import React from 'react';
import { Button, ScrollView, View } from 'react-native';
import { compose } from 'recompose';
import { Formik } from 'formik';
import * as Yup from 'yup';
import {
  handleTextInput,
  withNextInputAutoFocusForm,
  withNextInputAutoFocusInput
} from 'react-native-formik';
import { OutlinedTextField } from 'react-native-material-textfield';

const MyInput = compose(
  handleTextInput,
  withNextInputAutoFocusInput
)(OutlinedTextField);
const Form = withNextInputAutoFocusForm(View);

const validationSchema = Yup.object().shape({
  country: Yup.string()
    .required('Required.')
    .length(2, 'Must be 2 letter country code.'),
});

const RegistrationForm = props => (
  <Formik
    onSubmit={values => console.log(values)}
    validationSchema={validationSchema}
  >
    {props => (
      <Form>
        <MyInput label="Country" name="country" type="name"/>
        <MyInput label="Business name" name="name" type="name"/>
        <MyInput label="Business website" name="website" type="email"/>
        <MyInput label="Business phone number" name="phone" type="digits"/>
        <MyInput label="Address line 1" name="addressLine1" type="name"/>
        <MyInput label="Address line 2" name="addressLine2" type="name"/>
        <MyInput label="City" name="city" type="name"/>
        <MyInput label="State" name="state" type="name"/>
        <MyInput label="Zip code" name="zip" type="digits"/>
        <Button onPress={props.handleSubmit} title="SUBMIT" />
      </Form>
    )}
  </Formik>
);

export default class MyScreen extends React.Component {
  render() {
    return (
      <ScrollView style={{ padding: 30 }}>
        <RegistrationForm/>
      </ScrollView>
    );
  }
}

[arjunlandes]

Ping. It actually must be a problem with withNextInputAutoFocusForm or withNextInputAutoFocusInput, since handleTextInput works fine on its own.

[alkalox]

Edit: Was getting the same bug. Seems like this issue is arising because react-native-formik hasn't been updated for Formik v2. react-native-formik currently works well with Formik@1.5.8 and all the other versions before that.

Downgrading Formik to 1.5.8 got it working :)

[Ripplz]

I use this library with Formik v2.1.5 on my React Native app (Expo), and it works just fine.

From the error message, I think this has to do with an upgrade made in Formik v2^, which requires you to provide a value for each of your form elements in an object passed to your Formik component's initialValues prop.

Try this and see if it would work.

Originally posted by @Ripplz in https://github.com/bamlab/react-native-formik/issues/146#issuecomment-712866563

[Ripplz]

Okay, I've successfully reproduced this error in my Formik v2+ app, and I can confirm it's what I mentioned above. You don't need to downgrade your Formik, just include the initalValues prop on your <Formik> component.