Issue: react-native-paper CheckBox not displaying on iOS but works on Android

Tiempo de lectura: 2 minutos

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:

Leave a Comment