bamlab/react-native-formik

withNextInputAutoFocus does not work with arrays of (dynamic) components.

Closed this issue · 1 comments

When attempting to build a form dynamically using an array of Components, withNextInputAutoFocus does not set the keyboard "enter" button to advance to the next field.

For example:

const config = [
  { label: "Email", name: "email", type: "email" },
  { label: "Password", name: "password", type: "password" },
  { label:"First Name", name: "firstName", type: "name" },
  { label: "Last Name", name: "lastName", type: "name" },
]

export default props => (
  <Formik
    onSubmit={values => console.log(values)}
    validationSchema={validationSchema}
    render={props => {
      return (
        <Form>
          {
            config.map( item =>
              <MyInput label={item.label} name={item.name} type={item.type} />
            )
          }  
          <Button onPress={props.handleSubmit} title="SUBMIT" />
        </Form>
      );
    }}
  />
);

The above code will render, but the autofocus feature does not work.

After refactoring code this is no longer an issue. The Expo Snack linked in the PR is a good template.