Checkbox.Item ignores disable prop

[kendallroth]

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

[github-actions]

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.

[github-actions]

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.

[kendallroth]

Not sure what above message was about, all versions were included in initial issue (except icons, which isn't mention in template) 🤷

[lukewalczak]

Thanks for reporting the bug. Could you please create a PR with changes + tests covering the case where CheckboxItem's onPress is not triggered when disabled?

[kendallroth]

Will see if I can get around to it this weekend (likely not around); will find/copy approach taken in similar components for the test. One question I did have was about the checkbox item label colour, as "disabled" may actually be a bit light 🤷 (I guess labelStyle prop could modify that for people who think so).

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.