withNextInputAutoFocus doen't work with custom components at all

[DrYurii]

I wasted all day trying to get it to work with a custom input component and all the difference I could make is to either make the form submit by tapping Next button, or to defocus the field. Unlike the other issue here I don't even have any nesting. Unlike TextField and inbuilt native inputs it won't work in any way if I use a custom element that is seemingly compliant with the requirements set in readme. Here's the element wrapper:

export default class StyledInput extends React.Component {

  constructor(props) {
    super(props);
  }

  focus = () => this.setState({ focused: true });

  render() {
    return (
      <TextField {...this.props} />
    );
  }
}

Here's how it used:

const Form = withNextInputAutoFocusForm(View);
const MyInput = withNextInputAutoFocusInput(StyledInput);

export default class Login extends Screen {
...
  render() {
    return (
      <View >
          <Formik
            onSubmit={(values, actions) => this.formSubmit(values, actions)}
            validationSchema={validationSchema}
            initialValues={{
              ...
            }}
            render={formikProps => {
              return (
                <Form>

                  <MyInput
                    label='Blah'
                    autoFocus
                    name='login'
                    type='email'
                  />

                  <MyInput
                    label='Password'
                    name='password'
                    type='password'
                  />

                </Form>
              );
            }}
          />
        </View>
    );
  }
}

Am I doing something wrong or is it really broken?

[Almouro]

Hi @BerekHalfhand,
Thanks for posting an issue and sorry for the waste of time! 🙏

I created a pull request to make the doc a bit clearer: https://github.com/bamlab/react-native-formik/pull/104/files, let me know if that helps!

Basically, your focus function needs to do something.
When clicking on next on the keyboard, the next component focus function is automatically called. But in your case, the function doesn't do anything and the keyboard is incidentally closed.

See example slack

Let me know if you have any further questions! 👍

[DrYurii]

@Almouro Hey, that actually works! Thanks a bunch mate, you made my day!
Now the docs must be updated to prevent this issue from happening to someone else. Will close it after the pull request gets merged.

[DrYurii]

Thank you