Problema, CheckBox de react-native-paper no se muestra en iOS pero sí en Android.

Tiempo de lectura: 2 minutos

Al implementar un checkbox de la librería React Native Paper Checkbox React Native Paper en Android aparece el elemento de forma correcta pero en iOS no se muestra el cuadro del checkbox:

Visualización en iOS:

Visualización en Android:

Si miramos la documentación (Checkbox React Native Paper), indica que en Android aparecen los cuadros pero en iOS no:

Para solucionarlo tendremos que coneguir qué en iOS el diseño sea igual que en Android por lo que hay que hacer lo siguiente:

Partiendo de este código en el que se muestra correctamente en Android:

import React from "react";
import { Checkbox } from 'react-native-paper';

const CBox = (props) => {

  //Método que se pasa por props para actualizar el estado del padre:
  const { onPress } = props;

  const [checked, setChecked] = React.useState(false);

  return (
    <Checkbox
      status={checked ? 'checked' : 'unchecked'}
      color="#FF7000"
      onPress={() => {
        //Retorna estado al método (set que se le pasa por props)
        onPress(!checked),
          //Cambia estado
          setChecked(!checked)
      }}
    />

  );
};

export default CBox;

Por lo que poniendo este código el check no muestra cuadradito:

iOS:

Como queremos que se muestre el cuadradito igual que en android tenemos que ponerlo de la siguiente manera.

Solo cambiamos la etiqueta <Checkbox por <Checkbox.Android

import React from "react";
import { Checkbox } from 'react-native-paper';

const CBox = (props) => {

  //Método que se pasa por props para actualizar el estado del padre:
  const { onPress } = props;

  const [checked, setChecked] = React.useState(false);

  return (
    <Checkbox.Android
      status={checked ? 'checked' : 'unchecked'}
      color="#FF7000"
      onPress={() => {
        //Retorna estado al método (set que se le pasa por props)
        onPress(!checked),
          //Cambia estado
          setChecked(!checked)
      }}
    />

  );
};

export default CBox;

Y vemos que ya se muestra el cuadradito:

Espero que os guste y os sirva.

Feliz dia !!😉