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';
Checkbox
Type: React.PureComponent<CheckboxProps>
color
Optional • Type: ColorValue
The tint or color of the checkbox. This overrides the disabled opaque style.
onChange
Optional • Type: (event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, 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
• Default: false
Value indicating if the checkbox should be rendered as checked or not.
Deprecated. Currently,
Checkbox
supports all the platforms, soisAvailableAsync()
method is deprecated and will be removed in future releases.
isAvailableAsync()
Returns
Promise<boolean>
CheckboxEvent
Name | Type | Description |
---|---|---|
target | any | On native platforms, a |
value | boolean | A boolean representing checkbox current value. |