useState()
hook. Our first iteration will render a button that toggles between checked and unchecked states. When the checkbox is checked, we'll render a checkmark icon in the center of the button.You can find more information about using icons in your Expo project in our Icons guide.
import React, { useState } from 'react'; import { Pressable, StyleSheet, Text, View } from 'react-native'; import Ionicons from '@expo/vector-icons'; function MyCheckbox() { const [checked, onChange] = useState(false); function onCheckmarkPress() { onChange(!checked); } return ( <Pressable style={[styles.checkboxBase, checked && styles.checkboxChecked]} onPress={onCheckmarkPress}> {checked && <Ionicons name="checkmark" size={24} color="white" />} </Pressable> ); } export default function App() { return ( <View style={styles.appContainer}> <Text style={styles.appTitle}>Checkbox Example</Text> <View style={styles.checkboxContainer}> <MyCheckbox /> <Text style={styles.checkboxLabel}>{`⬅️ Click!`}</Text> </View> </View> ); } const styles = StyleSheet.create({ checkboxBase: { width: 24, height: 24, justifyContent: 'center', alignItems: 'center', borderRadius: 4, borderWidth: 2, borderColor: 'coral', backgroundColor: 'transparent', }, checkboxChecked: { backgroundColor: 'coral', }, appContainer: { flex: 1, alignItems: 'center', }, appTitle: { marginVertical: 16, fontWeight: 'bold', fontSize: 24, }, checkboxContainer: { flexDirection: 'row', alignItems: 'center', }, checkboxLabel: { marginLeft: 8, fontWeight: 500, fontSize: 18, }, });
checked
value is accessible only from within the component — more often than not you'll want to control the checkbox from outside. This is achievable by defining checked
and onChange
as props that are passed into the checkbox:import React, { useState } from 'react'; import { Pressable, StyleSheet, Text, View } from 'react-native'; import Ionicons from '@expo/vector-icons/Ionicons'; function MyCheckbox({ checked, onChange , }) { function onCheckmarkPress() { onChange(!checked); } return ( <Pressable style={[styles.checkboxBase, checked && styles.checkboxChecked]} onPress={onCheckmarkPress}> {checked && <Ionicons name="checkmark" size={24} color="white" />} </Pressable> ); } function App() { const [checked, onChange] = useState(false); return ( <View style={styles.appContainer}> <Text style={styles.appTitle}>Checkbox Example</Text> <View style={styles.checkboxContainer}> <MyCheckbox checked={checked} onChange={onChange} /> <Text style={styles.checkboxLabel}>{`⬅️ Click!`}</Text> </View> </View> ); } export default App; const styles = StyleSheet.create({ checkboxBase: { width: 24, height: 24, justifyContent: 'center', alignItems: 'center', borderRadius: 4, borderWidth: 2, borderColor: 'coral', backgroundColor: 'transparent', }, checkboxChecked: { backgroundColor: 'coral', }, appContainer: { flex: 1, alignItems: 'center', }, appTitle: { marginVertical: 16, fontWeight: 'bold', fontSize: 24, }, checkboxContainer: { flexDirection: 'row', alignItems: 'center', }, checkboxLabel: { marginLeft: 8, fontWeight: 500, fontSize: 18, }, });
checked
and when it is not. Let's add this to the checkbox's props and make it more reusable:import React, { useState } from 'react'; import { Pressable, StyleSheet, Text, View } from 'react-native'; import Ionicons from '@expo/vector-icons/Ionicons'; function MyCheckbox({ checked, onChange, buttonStyle = {}, activeButtonStyle = {}, inactiveButtonStyle = {}, activeIconProps = {}, inactiveIconProps = {}, }) { function onCheckmarkPress() { onChange(!checked); } const iconProps = checked ? activeIconProps : inactiveIconProps; return ( <Pressable style={[ buttonStyle, checked ? activeButtonStyle : inactiveButtonStyle, ]} onPress={onCheckmarkPress}> {checked && ( <Ionicons name="checkmark" size={24} color="white" {...iconProps} /> )} </Pressable> ); } function App() { const [checked, onChange] = useState(false); return ( <View style={styles.appContainer}> <Text style={styles.appTitle}>Checkbox Example</Text> <View style={styles.checkboxContainer}> <MyCheckbox checked={checked} onChange={onChange} buttonStyle={styles.checkboxBase} activeButtonStyle={styles.checkboxChecked} /> <Text style={styles.checkboxLabel}>{`⬅️ Click!`}</Text> </View> </View> ); } export default App; const styles = StyleSheet.create({ checkboxBase: { width: 24, height: 24, justifyContent: 'center', alignItems: 'center', borderRadius: 4, borderWidth: 2, borderColor: 'coral', backgroundColor: 'transparent', }, checkboxChecked: { backgroundColor: 'coral', }, appContainer: { flex: 1, alignItems: 'center', }, appTitle: { marginVertical: 16, fontWeight: 'bold', fontSize: 24, }, checkboxContainer: { flexDirection: 'row', alignItems: 'center', }, checkboxLabel: { marginLeft: 8, fontWeight: 500, fontSize: 18, }, });
checked
states, can be controlled, and its styles are fully customizable.