Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Controlled Component

See original GitHub issue

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

Have a checkbox in your app whose value is controlled via React’s useState
Modify the value through something like an Alert.
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"
	/>
    </>