React Native CheckBox Example

React Native

Nicesnippets

280

16-07-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...