Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Checkbox.Item ignores disable prop

See original GitHub issue

Current behaviour

Trying to disable Checkbox.Item only tweaks the checkbox style (not label) and does not prevent item presses.

Expected behaviour

Checkbox and label should appear disabled and be non-interactable.

Code sample

<Checkbox.Item
  disabled
  label="Sample"
  status={value ? "checked" : "unchecked"}
/>

What have you tried

Noticed that the CheckboxItem component does not pass disabled on to the TouchableRipple as would be expected, and patched with patch-package.

diff --git a/node_modules/react-native-paper/src/components/Checkbox/CheckboxItem.tsx b/node_modules/react-native-paper/src/components/Checkbox/CheckboxItem.tsx
index 93d5af4..fc28092 100644
--- a/node_modules/react-native-paper/src/components/Checkbox/CheckboxItem.tsx
+++ b/node_modules/react-native-paper/src/components/Checkbox/CheckboxItem.tsx
@@ -87,6 +87,7 @@ type Props = {
  */
 
 const CheckboxItem = ({
+  disabled,
   style,
   status,
   label,
@@ -98,7 +99,7 @@ const CheckboxItem = ({
   position = 'trailing',
   ...props
 }: Props) => {
-  const checkboxProps = { ...props, status, theme };
+  const checkboxProps = { ...props, disabled, status, theme };
   const isLeading = position === 'leading';
   let checkbox;
 
@@ -111,14 +112,14 @@ const CheckboxItem = ({
   }
 
   return (
-    <TouchableRipple onPress={onPress} testID={testID}>
+    <TouchableRipple disabled={disabled} onPress={onPress} testID={testID}>
       <View style={[styles.container, style]} pointerEvents="none">
         {isLeading && checkbox}
         <Text
           style={[
             styles.label,
             {
-              color: theme.colors.text,
+              color: disabled ? theme.colors.disabled : theme.colors.text,
               textAlign: isLeading ? 'right' : 'left',
             },
             labelStyle,

Your Environment

software	version
ios or android	both
react-native	`0.64.3`
react-native-paper	`4.9.2`
node	`16.6.0`
npm or yarn	`npm 7.20.6`
expo sdk	`43`

Issue Analytics

State:
Created 2 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

github-actions[bot]commented, Dec 17, 2021

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

react-native
react-native-paper
react-native-vector-icons
npm
yarn
expo

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

1reaction

github-actions[bot]commented, Dec 17, 2021

Hey! Thanks for opening the issue. The issue doesn’t seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

Top Results From Across the Web

Disable does not work for checkbox when using this.props

I was expecting this code - {this.props.disableIt ? 'disabled' : ''} - to output a 'disabled' attribute, but it throws 'Unexpected token (102:89)' ......

Testing for whether checkbox is enabled or disabled - MSDN

Solution: You should use "element.disabled" to exclude the disabled checkboxes and before check "disabled" property, you should check if the ...

When a check box is clicked to remove an item ... - CodeProject

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are...

How can I disable a single checkbox in a 'checkboxes' FAPI ...

Keeping in mind that DISABLED checkboxes submit as "false" and if not handled properly will unassign, I split my checkboxes into "process these"...

CheckboxProps - React Inputs Library - KendoReact API

Represents the props of the KendoReact Checkbox component. ... string. Identifies the element(s) which will label the component. ... disabled? boolean.