expo-checkbox
provides an component to provide a boolean
input element on Android and Web.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-checkbox
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import Checkbox from 'expo-checkbox'; import React, { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { const [isChecked, setChecked] = useState(false); return ( <View style={styles.container}> <View style={styles.section}> <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} /> <Text style={styles.paragraph}>Normal checkbox</Text> </View> <View style={styles.section}> <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} color={isChecked ? '#4630EB' : undefined} /> <Text style={styles.paragraph}>Custom colored checkbox</Text> </View> <View style={styles.section}> <Checkbox style={styles.checkbox} disabled value={isChecked} onValueChange={setChecked} /> <Text style={styles.paragraph}>Disabled checkbox</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, marginHorizontal: 16, marginVertical: 32, }, section: { flexDirection: 'row', alignItems: 'center', }, paragraph: { fontSize: 15, }, checkbox: { margin: 8, }, });
import Checkbox from 'expo-checkbox';
Boolean
, indicating whether the checkbox is available on this device.{ nativeEvent: { target, value } }
.boolean
indicating the new checked state of the checkbox.