How to integrate react native checkbox with formik

Question

Note: We can not use any other library like react-native-element only 'react-native' and 'formik'.

I am not able to integrate a react-native checkbox with formik. Need to set the value of formik form.

If I use the InputFields with formic it is working with the same code.

Checkbox.js

import React from 'react';
import { CheckBox, Text, StyleSheet, View } from 'react-native';

const Checkbox = ({ children, value, handleChange }) => {
  return (
    <View>
      <View>
        <CheckBox
          type={'checkbox'}
          value={value}
          onValueChange={handleChange}
          checked={value}
        />
        <Text>{children}</Text>
      </View>
    </View>
  );
};

export default Checkbox;

Main.js

  <Formik
      initialValues={{
          financiallyResponsible: true,
      }}
      onSubmit={(values, { resetForm }) => {
        console.log(values);
      }}
    >
      {({
        handleChange,
        handleSubmit,
        values,
       }) => (
        <View>
          <Checkbox
             value={values?.financiallyResponsible}
             handleChange={handleChange('financiallyResponsible')}
          >
            Financially Responsible
          </Checkbox>
          <Button onPress={handleSubmit} title="Submit"></Button>
        </View>
      )}

    </Formik>
  );
}

Bruno Cardoso · Accepted Answer · 2020-09-01 22:58:04Z

6

You can use setFieldValue(fieldName, nextValue) like doc says:

... instead of directly assigning the callbacks to props, because we have to get the fieldName from somewhere and with React Native we can't get it automatically like in web (using input name attribute). You can also use setFieldValue(fieldName, value) and setFieldTouched(fieldName, bool) as an alternative.

Checkbox.js

import React from 'react';
import { CheckBox, Text, StyleSheet, View } from 'react-native';

const Checkbox = ({ children, ...props }) => {
  return (
    <View>
      <View>
        <CheckBox
          type={'checkbox'}
          {...props}
        />
        <Text>{children}</Text>
      </View>
    </View>
  );
};

export default Checkbox;

Main.js

  <Formik
      initialValues={{
          financiallyResponsible: true,
      }}
      onSubmit={(values, { resetForm }) => {
        console.log(values);
      }}
    >
      {({
        handleChange,
        handleSubmit,
        values,
        setFieldValue
       }) => (
        <View>
          <Checkbox
             value={values?.financiallyResponsible}
             onValueChange={nextValue => setFieldValue('financiallyResponsible', nextValue)}
          >
            Financially Responsible
          </Checkbox>
          <Button onPress={handleSubmit} title="Submit"></Button>
        </View>
      )}

    </Formik>
  );
}

edited Sep 1, 2020 at 22:58

answered Aug 31, 2020 at 20:47

Bruno Cardoso

3511 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amy Over a year ago

Hey @BrunoCardoso for some reason this code is still not working.

amy · Accepted Answer · 2020-08-31 21:35:51Z

This helps to get it to work, but thank you @Bruno your suggestion helped me.

checkbox.js

<View>
      <View>
        <CheckBox
          type={'checkbox'}
          value={value}
          onValueChange={handleChange}
          //   checked={value}
          {...props}
        />
        <Text>{children}</Text>
      </View>
    </View>

Main.js

 <Formik
      initialValues={{
          financiallyResponsible: true,
      }}
      onSubmit={(values, { resetForm }) => {
        console.log(values);
      }}
    >
      {({
        handleChange,
        handleSubmit,
        values,
        setFieldValue
       }) => (
        <View>
          <Checkbox
             value={values?.financiallyResponsible}
             handleChange={nextValue => setFieldValue('financiallyResponsible', nextValue)}
          >
            Financially Responsible
          </Checkbox>
          <Button onPress={handleSubmit} title="Submit"></Button>
        </View>
      )}

    </Formik>
  );
}

Collectives™ on Stack Overflow

How to integrate react native checkbox with formik

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related