CODEWITHSUNDEEP
javascriptreactjsreact-nativeformik
Kishan Bharda
Kishan Bharda

Reputation: 5700

Auto focus not working on react native formik

I am using formik and react-native-formik to create form. I am using my custom component for textinput in formik form.

My custom component code : 

// import statements ...

class FormInput extends Component {

  focus = () => { this.textInputField.focus(); }

  render() {
    const {props} = this;
    return (
      <TextInput
        {...this.props}
        placeholder={props.placeholder}
        ref={(ref) => { this.textInputField = ref }}
        style={{ height: 50, borderWidth: 1, margin: 5 }}
      />  
    )
  }
}

export default FormInput

Then I create Form from below code :

const FormInput2 = compose(
  handleTextInput,
  withNextInputAutoFocusInput
)(FormInput);
const Form = withNextInputAutoFocusForm(View);

Then I have created original form as below : 

<ScrollView
  style={styles.container}
  contentContainerStyle={styles.contentContainer}
  keyboardShouldPersistTaps="handled"
>
  <Formik
    initialValues={{ firstName: '', email: '', password: '' }}
    onSubmit={values => { }}
    validationSchema={signUpValidationSchema}
    render={({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
      <Form>
        <FormInput2
          icon="user"
          placeholder="First Name"
          value={values.firstName}
          onChangeText={handleChange('firstName')}
          onBlur={() => setFieldTouched('firstName')}
        />
        {touched.firstName && errors.firstName && (
          <CText style={{ fontSize: 10, color: 'red' }}>{errors.firstName}</CText>
        )}

        {/* 
          ...
          ...
          Others Fiels 
        */}
        <Button
          title="SIGN UP"
          disabled={!isValid}
          color={Colors.primary}
          onPress={handleSubmit}
        />
      </Form>
    )}
  />
</ScrollView>

But, I am getting done on each and every field keyboard return type. If I press done then form submit method fires.

Can anyone help me how can I implement auto focus ?

I have also tried exporting my custom component as below, but it is also not working : 

export default withFormikControl(FormInput)

Upvotes: 2

Views: 4089

Answers (1)

Kishan Bharda
Kishan Bharda

Reputation: 5700

If anyone is also having the same error then here is the solution...

Custom component should have name property and the order of the component should be the same as initialValues.

Means if initialValues as below : 

initialValues={{ firstName: '', lastName: '', email: '', phone: '', password: '', confirmPassword: '' }}

Then first should be firstName field then lastName, email and so on...

So I added name prop in custom component and worked autofocus.

<FormInput2
  icon="user"
  placeholder="First Name"
  value={values.firstName}
  label="First Name"
  name="firstName" // added this
  type="name"
  onChangeText={handleChange('firstName')}
  onBlur={() => setFieldTouched('firstName')}
/>
{
  touched.firstName && errors.firstName && (
    <CText style={{ fontSize: 10, color: 'red' }}>{errors.firstName}</CText>
  )
}

<FormInput2
  label="Last Name"
  name="lastName" // added this
  type="name"
  icon="user"
  placeholder="Last Name"
  value={values.lastName}
  onChangeText={handleChange('lastName')}
  onBlur={() => setFieldTouched('lastName')}
/>
{
  touched.lastName && errors.lastName && (
    <CText style={{ fontSize: 10, color: 'red' }}>{errors.lastName}</CText>
  )
}

Upvotes: 2

Related Questions