expo-checkbox
provides a basic boolean
input element for all platforms. If you are looking for a more flexible checkbox component, please see the guide to implementing your own checkbox.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-checkbox
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';
Optional • Type: ColorValue
The tint or color of the checkbox. This overrides the disabled opaque style.
Optional • Type: boolean
If the checkbox is disabled, it becomes opaque and uncheckable.
Optional • Type: boolean
Value indicating if the checkbox should be rendered as checked or not. Default value is false
.
Optional • Type: (event: CheckboxEvent) => void
Callback that is invoked when the user presses the checkbox.
Optional • Type: (value: boolean) => void
Callback that is invoked when the user presses the checkbox.
NativeSyntheticEvent<{ target: number, value: boolean }>
displayName
isAvailableAsync