Checkbox on iOS is not visible

[rumax]

Current behaviour

Checkbox on iOS is no visible if not checked.

Expected behaviour

Code sample

Use the demo from docs

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

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo
• npm

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• yarn (found: 6.13.4, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[rumax]

Couldn't find version numbers for the following packages in the issue:
react-native-vector-icons

"react-native-vector-icons": "^7.1.0"

expo and NPM is in the issue description

[Selfmade-RuLeZ]

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 ... />

[rumax]

Hi @Selfmade-RuLeZ and thanks for your reply.

As you can see, it's the typical behavior.

can you, please, elaborate a bit more on what is the typical behaviour? If a user cannot see the element, where he should tap? I also tried to wrap the checkbox into the View with a background colour, but result is the same - element is not visible.

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

On iOS? Why?

[Selfmade-RuLeZ]

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

[dfabreguette]

Still, this example is not working for me on my device :
https://snack.expo.io/?name=Checkbox&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Fcheckbox.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20Checkbox%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bchecked%2C%20setChecked%5D%20%3D%20React.useState(false)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CCheckbox%0A%20%20%20%20%20%20status%3D%7Bchecked%20%3F%20%27checked%27%20%3A%20%27unchecked%27%7D%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20setChecked(!checked)%3B%0A%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper

Is it just me ?

[Selfmade-RuLeZ]

As I mentioned one post above, the CheckBox is implemented correctly, as iOS should not show boxes around CheckBoxes. On iOS you should use switches for most things.

[dfabreguette]

@Selfmade-RuLeZ ok so I'll need some specific iOS Code for each boolean form values ?

[Selfmade-RuLeZ]

Depends on the use case. You could life with the missing box, use switches for android too or implement specific code.

[dfabreguette]

alright, thanks for the quick answer, maybe it'd be good to mention it inside documentation

[butterfly-valley]

On iOS? Why?
Because on iOS it sucks.

[JooAndriano]

type mode="android"
the box will appear in ios...

[septe01]

Still, this example is not working for me on my device : https://snack.expo.io/?name=Checkbox&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Fcheckbox.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20Checkbox%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bchecked%2C%20setChecked%5D%20%3D%20React.useState(false)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CCheckbox%0A%20%20%20%20%20%20status%3D%7Bchecked%20%3F%20%27checked%27%20%3A%20%27unchecked%27%7D%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20setChecked(!checked)%3B%0A%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper

Is it just me ?

but when false not show check? on ios

[FaisalKhawaj]

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

[avalonder]

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"
        />

[lasithalakmal]

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

Worked perfectly. Thanks

[ansarikhurshid786]

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"
        />

solved my problem