Version: 0.61

๐Ÿšง CheckBox

Deprecated. Use @react-native-community/checkbox instead.

Renders a boolean input (Android only).

This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

Example

import React, { useState } from "react";
import { CheckBox, Text, StyleSheet, View } from "react-native";
export default App = () => {
const [isSelected, setSelection] = useState(false);
return (
<View style={styles.container}>
<View style={styles.checkboxContainer}>
<CheckBox
value={isSelected}
onValueChange={setSelection}
style={styles.checkbox}
/>
<Text style={styles.label}>Do you like React Native?</Text>
</View>
<Text>Is CheckBox selected: {isSelected ? "๐Ÿ‘" : "๐Ÿ‘Ž"}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
checkboxContainer: {
flexDirection: "row",
marginBottom: 20,
},
checkbox: {
alignSelf: "center",
},
label: {
margin: 8,
},
});

Reference

Props

Inherits View Props.


disabled

If true the user won't be able to toggle the checkbox. Default value is false.

TypeRequired
boolNo

onChange

Used in case the props change removes the component.

TypeRequired
functionNo

onValueChange

Invoked with the new value when the value changes.

TypeRequired
functionNo

testID

Used to locate this view in end-to-end tests.

TypeRequired
stringNo

value

The value of the checkbox. If true the checkbox will be turned on. Default value is false.

TypeRequired
boolNo