React Native CheckBox Example

Jul 16, 2020

Hi Guys,

In this blog, I will explain you how to create checkbox in react native. You can easily create checkbox in react native. First i will import namespace CheckBox

, after I will make check box using CheckBox tag in react native.

Here, I will give you full example for simply display checkbox using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init CheckBox 

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { useState } from "react";
import { CheckBox, Text, StyleSheet, View } from "react-native";
const MyApp = () => {
  const [isSelected, setSelection] = useState(false);
  return (
    <View style={styles.container}>
      <View style={styles.checkboxInput}>
        <CheckBox
          value={isSelected}
          onValueChange={setSelection}
          style={styles.checkbox}
        />
        <Text style={styles.label}>Do you play cricket ?</Text>
      </View>
      <Text>CheckBox is {isSelected ? "Checked" : "Unchecked"}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  checkboxInput: {
    flexDirection: "row",
    marginBottom: 20,
  },
  label: {
    margin: 8,
  },
});
export default MyApp;

Output

It will help you...