Toggling the checkboxes is not working when calling a function within the handelOnPress function!

Hey @WrathChaos ,

I have a Flatlist that has some BouncyCheckbox components.

 const handelWorkToDo = (service, isChecked) => {
    if (isChecked) {
      console.log('add service');
      setWorkToDo([...workToDo, service]);
    } else {
      console.log('remove service');
      const isAvailable = (item) => item.id === service.id;
      R.filter(isAvailable, workToDo);
    }
  };

const Service = ({ id, title, duration }) => (
    <BouncyCheckbox
      fillColor="red"
      iconStyle={{ borderColor: 'red' }}
      key={id}
      onPress={(isChecked) =>
        handelWorkToDo({ id, title, duration }, isChecked)
      }
      style={{ paddingBottom: 10 }}
      text={`${title} -> ${duration}`}
      textStyle={{
        textDecorationLine: 'none',
      }}
    />
  );

const renderItem = ({ item }) => <Service {...item} />;

<FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        style={{ padding: 2 }}
/>

Whats happening is that when when I call the setWorkToDo([...workToDo, service]) or R.filter(isAvailable, workToDo) within the handelWorkToDo function, checkbox state is not being changed.

however if I remove/comment out those functions, the checkboxes are being checked without issues.

I would like to know if there is something missing within my code or If you have a fix for that.

Thank you 😃

[husseinmansour6]

Hey @WrathChaos ,

Thanks for the quick reply!

I had to do some work around for it to work as expected however it would be nice to support that within ur lib.

I took a look into the Manual check state and I saw that you are using one checkbox to toggle on/off with a useState hook. It would be nice to have an example of using multiple checkboxes that can toggle them with useState hook.

Thank you 😃

[husseinmansour6]

So, I was able to run it and just created a PR for my changes. Please take a look here and let me know your thoughts 😃