gem-hunter

React Native component for Checkbox

Android Example	IOS Example	Windows Example

The library supports the React Native New Architecture (Fabric/TurboModules):

• Android and Windows run as native Fabric components.
• iOS runs through the New Architecture interop layer (it is not yet a native Fabric component). It works under the New Architecture, but a full iOS codegen migration is still tracked in #211.

The latest versions are developed and tested against React Native 0.82.

yarn add @react-native-community/checkbox

or

npm install @react-native-community/checkbox --save

On iOS, install cocoapods:

npx pod-install

On react-native >= 0.60 (and react-native-windows >= 0.63), autolinking takes care of linking the module on iOS, Android, and Windows — no extra steps are needed beyond installing the package (and running pod install on iOS).

Only needed for react-native < 0.60 or react-native-windows < 0.63.

include ':react-native-community-checkbox'
project(':react-native-community-checkbox').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/checkbox/android')

dependencies {
   ...
   implementation project(':react-native-community-checkbox')
}

On top, where imports are:

import com.reactnativecommunity.checkbox.ReactCheckBoxPackage;

Add the checkbox class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactCheckBoxPackage()
    );
}

1. Open the solution in Visual Studio.
2. Right-click solution icon in Solution Explorer > Add > Existing Project. Select <pathToYourApp>\node_modules\@react-native-community\checkbox\windows\Checkbox\Checkbox.vcxproj.

Add a reference to Checkbox to your main application project. From Visual Studio:

Right-click main application project > Add > Reference... Check 'Checkbox' from the 'Project > Solution' tab on the left.

Add #include "winrt/Checkbox.h".

Add PackageProviders().Append(winrt::Checkbox::ReactPackageProvider()); before InitializeComponent();.

This module was created when the CheckBox was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change your imports from:

import { CheckBox } from 'react-native';

to:

import CheckBox from '@react-native-community/checkbox';

import CheckBox from '@react-native-community/checkbox';

  const [toggleCheckBox, setToggleCheckBox] = useState(false)

  <CheckBox
    disabled={false}
    value={toggleCheckBox}
    onValueChange={(newValue) => setToggleCheckBox(newValue)}
  />

CheckBox is a controlled component: it renders the value prop and does not keep its own internal state. You must update value (usually from onValueChange) for the checkbox to reflect a tap. If value is not updated, the checkbox stays in the state you passed — this is now consistent across Android, iOS, and Windows.

Check out the example project for more examples.

View props...

Implemented most of iOS and Android props. Defaults for color styling can be referenced here: https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/checkbox-styles-and-templates

This module was extracted from react-native core.

The implementaion of IOS version refered to BEMCheckBox

The library is released under the MIT licence. For more information see LICENSE.