How we can implement multiple checkboxes and get their values on Click?

How to / Third Party Tooling
1

How we can implement multiple checkboxes and get their values on Click?

2

Maybe see this Checkbox.Android · React Native Paper and this Checkbox · React Native Paper. Use the last if you want it to align with platforms. It is open source, so you can also see how its implemented.

One checkbox

import * as React from 'react';
import { Checkbox } from 'react-native-paper';

const MyComponent = () => {
  const [checked, setChecked] = React.useState(false);

  return (
    <Checkbox
      status={checked ? 'checked' : 'unchecked'}
      onPress={() => {
        setChecked(!checked);
      }}
    />
  );
};

Multiple checkboxes pseudo code, havn’t tested it :smiley:

import * as React from 'react';
import { Checkbox } from 'react-native-paper';

const MyComponent = (getValues) => {
  // Instead of 3 React.useState you could like into React.useReducer or make an object with the different states
  const [checked, setChecked] = React.useState(false);
  const [checked1, setChecked1] = React.useState(false);
  const [checked2, setChecked2] = React.useState(false);

  return (
    <Checkbox
      status={checked ? 'checked' : 'unchecked'}
      onPress={() => {
        // Maybe put getValues into the callback of setChecked
        setChecked(!checked);
        getValues(checked, checked1, !checked2)
      }}
    />
    <Checkbox
      status={checked1 ? 'checked' : 'unchecked'}
      onPress={() => {
        setChecked1(!checked1);
        getValues(checked, checked1, !checked2)
      }}
    />
    <Checkbox
      status={checked2? 'checked' : 'unchecked'}
      onPress={() => {
        setChecked2(!checked2);
        getValues(checked, checked1, !checked2)
      }}
    />
  );
};
2 Likes