Working with CheckBox in React Native (2021)

Last updated on January 4, 2021 A Goodman Loading... Post a comment

This article shows you how to use checkboxes in React Native applications.

The CheckBox component used to be a part of React Native core but now it has become a separate module named @react-native-community/checkbox. This module is written mainly in Javascript, C ++, Java, and Objective-C.

Installation

You can add @react-native-community/checkbox to your project by running the following command:

@react-native-community/checkbox

One extra step for iOS:

npx pod-install

Now you can import the CheckBox component into your code:

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

Example

A common real-world scenario is that an app requires people to agree to terms of use by checking a checkbox before they can perform certain actions such as registration, submit a form, etc.

Let’s talk about our example app. It simply contains a checkbox and a button. The button is disabled by default and only becomes touchable when the user check the checkbox.

By default, CheckBox has a circle shape on iOS. In this example, we’ll make it square.

Preview (iOS + Android):

The full code:

import React, { useState } from 'react';
import { View, StyleSheet, Text, Button, Platform } from 'react-native';
import CheckBox from '@react-native-community/checkbox';

export default function App() {
  const [agree, setAgree] = useState(false);
  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        {Platform.OS === 'ios' ? (
          <CheckBox
            boxType="square"
            value={agree}
            onChange={() => setAgree(!agree)}
          />
        ) : (
          <CheckBox value={agree} onChange={() => setAgree(!agree)} />
        )}
        <Text style={styles.text}>
          I have read and agreed with the terms and conditions
        </Text>
      </View>
      <Button
        title="Sign Up"
        disabled={!agree}
        onPress={() => {
          /* Do something */
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    padding: 16,
    paddingTop: 100,
  },
  wrapper: {
    display: 'flex',
    flexDirection: 'row',
    alignContent: 'center',
    paddingVertical: 15,
  },
  text: {
    lineHeight: 30,
    marginLeft: 10,
  },
});

API

The table below listed the most common props which work on both iOS and Android:

NameTypeDescription
onChangefunctionInvoked on change with the native event
onValueChangefunctionInvoked with the new boolean value when it changes
valuebooleanThe default value is false
disabledbooleanThe default value is false

Android props:

NameTypeDescription
tintColorsstringAn object with the following shape: { true?: ?ColorValue, false?: ?ColorValue }

iOS common props:

NameTypeDescription
lineWidthnumberDefault to 2. Defines the width of the check mark and box
hideBoxbooleanControl if the box should be hidden or not
boxTypeenum
‘circle’ or ‘square’
Controls the shape of the box
tintColorstringThe color of the box when the checkbox is Off
onCheckColorstringThe color of the check mark when it is On.
onFillColorstringThe color of the box when it is On
onTintColorstringThe color of the line around the box when it is On

Conclusion

Congratulation. At this point, you should have some confidence in working with CheckBox. If you would like to learn more about React Native, take a look at the following articles: How to set a gradient background in React NativeHow to implement tables in React Native Top free React Native UI libraries for this year. You can also check out our React Native topic page for the latest tutorials and examples.

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x