Reading time: 2 minutes
When implementing a checkbox from the React Native Paper library Checkbox React Native Paper on Android, the element appears correctly, but on iOS, the checkbox box is not displayed:
iOS Display:

Android Display:

If we look at the documentation (Checkbox React Native Paper), it indicates that the boxes appear on Android, but not on iOS:

To fix this and make the checkbox display the same on iOS as it does on Android, you need to do the following:
Starting with this code where it displays correctly on Android:
import React from "react"; import { Checkbox } from 'react-native-paper'; const CBox = (props) => { // Method passed through props to update parent's state const { onPress } = props; const [checked, setChecked] = React.useState(false); return ( <Checkbox status={checked ? 'checked' : 'unchecked'} color="#FF7000" onPress={() => { // Return state to method (set passed through props) onPress(!checked), // Update state setChecked(!checked) }} /> ); }; export default CBox;
With this code, the check doesn’t show the checkbox box:
iOS:
Since we want the checkbox box to be displayed the same way as on Android, we need to modify it as follows:
Simply change the <Checkbox tag to <Checkbox.Android
import React from "react"; import { Checkbox } from 'react-native-paper'; const CBox = (props) => { // Method passed through props to update parent's state const { onPress } = props; const [checked, setChecked] = React.useState(false); return ( <Checkbox.Android status={checked ? 'checked' : 'unchecked'} color="#FF7000" onPress={() => { // Return state to method (set passed through props) onPress(!checked), // Update state setChecked(!checked) }} /> ); }; export default CBox;
Now, we can see that the checkbox box is displayed:

When implementing a checkbox from the React Native Paper Checkbox library in Android, the element appears correctly, but in iOS, the checkbox box is not displayed:
iOS Display:

Android Display:

If we look at the documentation (React Native Paper Checkbox), it indicates that the checkbox boxes appear on Android but not on iOS:

To fix this and make the checkbox boxes appear the same way on iOS as they do on Android, you need to do the following:
Starting with this code where it displays correctly on Android:
import React from "react"; import { Checkbox } from 'react-native-paper'; const CBox = (props) => { // Method passed through props to update parent's state const { onPress } = props; const [checked, setChecked] = React.useState(false); return ( <Checkbox status={checked ? 'checked' : 'unchecked'} color="#FF7000" onPress={() => { // Return state to method (set passed through props) onPress(!checked), // Update state setChecked(!checked) }} /> ); }; export default CBox;
With this code, the checkbox boxes are not displayed on iOS:
To make the checkbox boxes appear the same way on iOS as they do on Android, modify the code as follows:
Simply change the <Checkbox tag to <Checkbox.Android
import React from "react"; import { Checkbox } from 'react-native-paper'; const CBox = (props) => { // Method passed through props to update parent's state const { onPress } = props; const [checked, setChecked] = React.useState(false); return ( <Checkbox.Android status={checked ? 'checked' : 'unchecked'} color="#FF7000" onPress={() => { // Return state to method (set passed through props) onPress(!checked), // Update state setChecked(!checked) }} /> ); }; export default CBox;
Now, the checkbox boxes are displayed as expected on iOS:
I hope you find this helpful. Have a great day! :winking_face:
