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:
Reading time: 2 minutes
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:
