How to Implement Select All Functionality

[samdace]

Hello, i would like to know how to render multiple Checkboxes and Toggle Select/Deselect ALL Functionality .

[WrathChaos]

Hello @samdace

Nice question!

You can use synthetic press functionality. First thing first, you should check this example: https://github.com/WrathChaos/react-native-bouncy-checkbox#synthetic-press-functionality-with-manual-check-state

Method 1

You can store all your checkboxes into an array or if you do not have too many checkboxes on the scene, you can use bouncyCheckboxRef?.onPress() for each of the checkbox and make the Select/Deselect ALL for checkboxes

Method 2

Another method is using the isChecked and disableBuiltinState props. You can control the isChecked props with multiple useState for each checkboxes and when you want to select/deselect all, just change the states and it should update the checkboxes

[samdace]

Thanks for the reply i used the second method . i just disabled the built in state , looped through a list and created the checkboxes , i set the checked state to be (selected.include(el.id)) , and in the onpress fuction , i check if the id of the element is inside the selected list or not and update the state accordingly by add or removing the id from the selected list to change the state of the checkboxes , for the select all i just change its state inside a useEffect by checking its length compared to the length of the data . it works fine now .

[WrathChaos]

Awesome!

Loved to hear that it works for you

Also, thank you to come back and explaining how you achieved that I am sure many of the other devs will use the solution 🤟

if you need something else, please feel free to open an issue :)

[Akram11]

Hi Guys @WrathChaos I'm trying to achieve the same thing, however deselecting all boxes on a btn click, I'm using a similar method to the one explained by @samdace, but It's working for me; I'd appreciate some help! here's my code below:

  const [filterOptions, setFilterOptions] = useState<[]>([]);
   const [deselect, setDeselect] = useState(false);

  const handleSetFilterOptions = (checked: boolean, filterOption: number) => {
 setDeselect(false);

    checked
      ? setFilterOptions([...filterOptions, filterOption])
      : setFilterOptions(filterOptions.filter(option => option !== filterOption));
  };

   const handleResetOptions = () => {
    setFilterOptions([]);
    setDeselect(true);
  };
         {NamesArray.map((Type, index) => (
            <BouncyCheckbox
              disableBuiltInState
              isChecked={deselect ? false : filterOptions.includes(index)}
              key={index}
              size={25}
              useNativeDriver={true}
              iconStyle={styles.filterCheckbox}
              innerIconStyle={styles.innerCheckbox}
              onPress={checked => {
                handleSetFilterOptions(checked, index);
              }}
              textComponent={
                <Text >
                 'some text'
                </Text>
              }
            />
          ))}

        <TouchableOpacity
            onPress={() => {
              handleResetOptions();
            }}
            <Text style={filterScreenStyles.resetButtonText}>Reset</Text>
          </TouchableOpacity>

[WrathChaos]

Thank you so much for sharing the code with us @Akram11 :)