Controlled Component

[SConaway]

Bug report

Summary

This seems like it's a controlled component since it takes value and onValueChange as props. But, if value changes outside of the checkbox, it doesn't update. To me, this makes it not a controlled component. Am I missing something here?

Environment info

react-native info output:

info Fetching system and libraries information...
System:
    OS: macOS 11.0
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 189.56 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 14.7.0 - /private/var/folders/5w/5dc75xj91xx_mvq7prvkplx80000gn/T/xfs-46c4d0de/node
    Yarn: 2.0.0-rc.36 - /private/var/folders/5w/5dc75xj91xx_mvq7prvkplx80000gn/T/xfs-46c4d0de/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/lib/ruby/gems/2.7.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 20.0, macOS 11.0, tvOS 14.0, watchOS 7.0
    Android SDK:
      API Levels: 29
      Build Tools: 29.0.2, 30.0.1
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 12.0/12A8179i - /usr/bin/xcodebuild
  Languages:
    Java: 14.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.1 => 16.13.1
    react-native: ^0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 0.4.2

Steps to reproduce

1. Have a checkbox in your app whose value is controlled via React's useState
2. Modify the value through something like an Alert.
3. Now the Checkbox and value are out of sync.

Describe what you expected to happen:

I expect the checkbox to match the value. If I change the value, it should check / uncheck accordingly.

Reproducible sample code

const [toggleCheckBox, setToggleCheckBox] = useState(false)

return 
    <>
	<CheckBox
		disabled={false}
		value={toggleCheckBox}
		onValueChange={(newValue) => setToggleCheckBox(newValue)}
	/>
	<Button
		onPress={() => {
			Alert.alert(
				'Alert Title',
				'My Alert Msg',
				[
					{
						text: 'Ask me later',
						onPress: () => setToggleCheckBox(!toggleCheckBox),
					},
					{
						text: 'No',
						style: 'cancel',
					},
				],
				{cancelable: false},
			);
		}}
		title="toggle"
	/>
    </>

[renanogueira]

I'm having the same issue, some news?

[SConaway]

I'd be willing to work on this, but it's all native code (not a strength of mine)

[BraveEvidence]

I think these should have been resolved by now. It is such a basic and important functionality. I know its very easy for me to say to resolve the bug but due to my lack of native development knowledge I am not able to help you.

[SConaway]

That's my issue. Especially since this uses a library for the iOS part.

[BraveEvidence]

@SConaway I think the Facebook engineers should help as well as the docs recommend this library

[rodgomesc]

@nicholaslee119 any help about this?

[nicholaslee119]

Sorry for the delay, we will figure this out in a few weeks 😢

[BraveEvidence]

@nicholaslee119 No need to be sorry, open source is difficult, thank you for replying

[agreco]

The way I resolved this issue, was to use a TouchableHighlight that initially wraps the Checkbox with a disabled value of true. Then conditionally show the Checkbox if the value is true or the TouchableHighlight e.g.

          {someValue ? (
            <CheckBox
              value={someValue}
              onValueChange={onValueChange}
            />
          ) : (
            <TouchableHighlight
              onPress={onValueChange}
              underlayColor="grey"
            >
              <CheckBox
                disabled={true}
                tintColors={{ false: grey, true: 'grey' }}
              />
            </TouchableHighlight>
          )}

This is a massive hack, but it works as expected for me. Hope this issue can be resolved soon.

[nicholaslee119]

https://github.com/react-native-community/react-native-checkbox/blob/be115e479782704382348544d6ec018daa2aa833/example/App.js#L125-L141

I have tried to reproduce this in our example code, but the value of checkbox has been changed after clicking the toggle button just like above

I did not use the function component with the react hook, but I think it is the same with setState in the class component.

Any detail which I did not notice to reproduce this bug?

[nicholaslee119]

https://github.com/react-native-community/react-native-checkbox/blob/223e604f4fbe1abd57a476d743d294f6de82a38a/example/AppFunction.tsx#L25-L86

I also tried to reproduce this in the function component, but it also works well is iOS and Android

[a-c-sreedhar-reddy]

@nicholaslee119 If you do not do anything in onValueChange then the checkbox should not toggle on clicking it right. But it changes.

  <CheckBox value={value} /> 

Here the value would never change. But onClicking CheckBox it toggles.

[SConaway]

Here was my component: <Checkbox value={getSelectedFact} onValueChange={(newValue) => setSelectedFact(newValue)} />. Then, in some other function, I would toggle getSelectedFact.

I am modifying the example to match and will upload relevant code.