How Do You Build a Checkbox in React Native?
- React Native does not provide a built-in Checkbox component for iOS and Android out of the box.
- To create a custom checkbox, you can use TouchableOpacity, icons, and your own checked/unchecked logic.
- Custom checkboxes let you match your app’s style and handle cross-platform needs.
- Accessibility props and touch feedback are easy to add for a polished user experience.
Example: CheckboxButton Component
CheckboxButton.tsx
import React from 'react';
import { TouchableOpacity, View, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
type Props = {
checked: boolean;
onPress: () => void;
size?: number;
color?: string;
};
// Custom CheckboxButton for React Native
export const CheckboxButton = (props: Props) => {
const { checked, onPress, size = 24, color = '#007AFF' } = props;
return (
<TouchableOpacity
onPress={onPress}
style={styles.container}
accessibilityRole="checkbox"
accessibilityState={{ checked }}>
<View style={[styles.box, { width: size, height: size, borderColor: color }]}
>
{checked && (
<Ionicons name="checkmark" size={size * 0.8} color={color} />
)}
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
padding: 4,
},
box: {
borderWidth: 2,
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
});- This CheckboxButton works in any form, settings screen, or list where you need a boolean value.
- Uses state and a checkmark icon to show checked or unchecked status.
- Touchable, accessible, and themeable via props for size and color.
- You can use this component as a starting point for any custom checkbox design.
Key Takeaways
- You can build a checkbox in React Native using TouchableOpacity and your own checked state.
- Custom checkboxes work consistently on iOS and Android.
- This approach gives you complete control over UI, color, and accessibility.
- A CheckboxButton component like this is perfect for settings, to-do lists, and form inputs.
- You can extend this example to add labels, animations, or custom icons for your app’s needs.