controlled input

[aprilmintacpineda]

It's better if we get the checked status from props instead of state.

I have a Checkbox that updates to checked or unchecked when certain conditions (coming from the backend) are met, but I can't do that with this library.

[WrathChaos]

Hello @aprilmintacpineda

I believe that you can make it happen with the new version. Please check it out:

Release 2.1.0 🥳

Documentation

You need to use disableBuiltInState prop and you need to make sure that isChecked prop is your new check state functionality now.

[aprilmintacpineda]

Thanks @WrathChaos but I think the onPress is not working as expected anymore

https://github.com/WrathChaos/react-native-bouncy-checkbox/commit/09e21ca03608e61b787c87bf8a6414cc1182f08e#r49958499

[WrathChaos]

Hello @aprilmintacpineda,

Thank you for reporting. Actually when the dev set disableBuiltInState prop, he/she should control the check state. That's why I did not re-pass the isChecked prop because it is already available with the local state.

[aprilmintacpineda]

Then I guess the docs is now misleading

https://github.com/WrathChaos/react-native-bouncy-checkbox#synthetic-press-functionality-with-manual-check-state

Consider this scenario:

function MyComp () {
  const [isChecked, setIsChecked] = React.useState(false);

  const onPress = React.useCallback(() => {
    setIsChecked(isChecked => !isChecked);
  }, []);

  return (
    <BouncyCheckbox
      isChecked={isChecked}
      text="Synthetic Checkbox"
      disableBuiltInState
      onPress={onPress}
    />
  );
}

But if you pass in !this.props.isChecked to onPress callback:

function MyComp () {
  const [isChecked, setIsChecked] = React.useState(false);

  return (
    <BouncyCheckbox
      isChecked={isChecked}
      text="Synthetic Checkbox"
      disableBuiltInState
      onPress={setIsChecked}
    />
  );
}

But as a work-around, one can create a component on top of this:

function Checkbox ({ isChecked, onPress, ...checkboxProps }) {
  const handlePressed = React.useCallback(() => {
    onPress(!isChecked);
  }, [isChecked, onPress]);

  return (
    <BouncyCheckbox
      {...checkboxProps}
      isChecked={isChecked}
      disableBuiltInState
      onPress={handlePressed}
    />
  );
}

[WrathChaos]

@aprilmintacpineda Awesome explanation! Actually, I really want to put it in the library's onPress passing however there can be some scenarios in which the dev wants to handle it on its own. However, yes doc is misleading I will update it.

Also, If the devs want the control the check state, there should be a specific workaround solution for themselves.

Edit: Updated Doc Do you think is this enough?

[aprilmintacpineda]

Looks good to me, but I think someone looking at this the first time might not fully understand it. https://github.com/WrathChaos/react-native-bouncy-checkbox/pull/40

[WrathChaos]

Thank you so much @aprilmintacpineda, merged :)