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: