A universal React component that provides basic checkbox functionality.
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 |
---|---|---|---|---|
-
npx 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';
default
Type: React.ReactElement<CheckboxProps>
color
Optional • Type: ColorValue
The tint or color of the checkbox. This overrides the disabled opaque style.
onChange
Optional • Type: (event: CheckboxEvent) => void
Callback that is invoked when the user presses the checkbox.
onValueChange
Optional • Type: (value: boolean) => void
Callback that is invoked when the user presses the checkbox.
value
Optional • Type: boolean
Value indicating if the checkbox should be rendered as checked or not. Default value is false
.
CheckboxComponent
React.FC<CheckboxProps>
extended by:
Name | Type | Description |
---|---|---|
isAvailableAsync | () => Promise<boolean> | - |
CheckboxEvent
NativeSyntheticEvent<{
target: number,
value: boolean
}>