react-native-paper: Checkbox on iOS is not visible

Current behaviour

Checkbox on iOS is no visible if not checked.

Expected behaviour

Code sample

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

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

  return (
    <Checkbox
      status={checked ? 'checked' : 'unchecked'}
      onPress={() => {
        setChecked(!checked);
      }}
    />
  );
};

export default MyComponent;

Screenshots (if applicable)

Unchecked state:

Checked state:

What have you tried

Used official docs https://callstack.github.io/react-native-paper/checkbox.html

Also not style property to checkbox?

Your Environment

software	version
ios or android	iOS or web case with expo
react-native	0.63.3
react-native-paper	4.3.0
node	v12.16.1
npm or yarn	6.13.4
expo sdk	39.0.0

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 16

Most upvoted comments

https://callstack.github.io/react-native-paper/checkbox.html

As you can see, it’s the typical behavior. You have to wrap a box or anything by yourself.

Edit: Or just use <Checkbox.Android ... />

+19

Selfmade-RuLeZ on Nov 2, 2020

You can always use <Checkbox.Android /> to just use the Android properties (ie. outlined unchecked box) on iOS devices.

+15

FaisalKhawaj on Feb 9, 2022

type mode=“android” the box will appear in ios…

+14

JooAndriano on Sep 15, 2021

This was solved for me by implementing <Checkbox.Item> along with mode="android".

Example:

<Checkbox.Item 
         status={checked ? 'checked' : 'unchecked'}
         onPress={() => {
           setChecked(!checked);
         }}
         color="red"
         uncheckedColor="green"
         mode="android"
        />

avalonder on Jul 8, 2023

On iOS? Why? Because on iOS it sucks.

butterfly-valley on Sep 9, 2021

The thing that I was pointing to, is that it’s not a bug, it’s a well formed implementation. On iOS you should not use Checkboxes if you want to strictly fit their guidlines. Here is a example of Material Design Cross Platform Adaption, there you can see the controls guideline

Edit:

Native platform switches should be used as they have matching functionality and presentation as Material switches. Use switches instead of checkboxes and check mark lists instead of radio buttons as these are the graphics expected on iOS.

As mentioned on the material.io website

Selfmade-RuLeZ on Nov 2, 2020