From 7cfaa3788c00a0fc53a5973b275e812e5698b8d6 Mon Sep 17 00:00:00 2001
From: Marek Majchrzak <mw.majch@gmail.com>
Date: Thu, 7 May 2020 16:23:33 +0200
Subject: [PATCH 1/2] feat: radio button item disabled

---
 example/src/Examples/RadioButtonExample.tsx   | 87 ++++++++++---------
 .../RadioButton/RadioButtonItem.tsx           | 21 +++--
 2 files changed, 60 insertions(+), 48 deletions(-)

diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
index d77eb6f3c9..2328e4cd55 100644
--- a/example/src/Examples/RadioButtonExample.tsx
+++ b/example/src/Examples/RadioButtonExample.tsx
@@ -1,14 +1,8 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import {
-  Paragraph,
-  RadioButton,
-  Colors,
-  TouchableRipple,
-  useTheme,
-} from 'react-native-paper';
+import { Paragraph, RadioButton, Colors, useTheme } from 'react-native-paper';
 
-type State = 'normal' | 'normal-ios' | 'custom';
+type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom';
 
 const RadioButtonExample = () => {
   const [checked, setChecked] = React.useState<State>('normal');
@@ -25,40 +19,37 @@ const RadioButtonExample = () => {
         },
       ]}
     >
-      <TouchableRipple onPress={() => setChecked('normal')}>
-        <View style={styles.row}>
-          <Paragraph>Normal - Android</Paragraph>
-          <View pointerEvents="none">
-            <RadioButton.Android
-              value="normal"
-              status={checked === 'normal' ? 'checked' : 'unchecked'}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setChecked('normal-ios')}>
-        <View style={styles.row}>
-          <Paragraph>Normal 2 - IOS</Paragraph>
-          <View pointerEvents="none">
-            <RadioButton.IOS
-              value="normal-ios"
-              status={checked === 'normal-ios' ? 'checked' : 'unchecked'}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setChecked('custom')}>
-        <View style={styles.row}>
-          <Paragraph>Custom</Paragraph>
-          <View pointerEvents="none">
-            <RadioButton
-              value="custom"
-              color={Colors.blue500}
-              status={checked === 'custom' ? 'checked' : 'unchecked'}
-            />
-          </View>
-        </View>
-      </TouchableRipple>
+      <View style={styles.row}>
+        <Paragraph>Normal - Android</Paragraph>
+        <RadioButton.Android
+          value="normal"
+          status={checked === 'normal' ? 'checked' : 'unchecked'}
+          onPress={() => setChecked('normal')}
+        />
+      </View>
+      <View style={styles.row}>
+        <Paragraph>Normal 2 - IOS</Paragraph>
+        <RadioButton.IOS
+          value="normal-ios"
+          status={checked === 'normal-ios' ? 'checked' : 'unchecked'}
+          onPress={() => setChecked('normal-ios')}
+        />
+      </View>
+      <View style={styles.row}>
+        <Paragraph>Custom</Paragraph>
+        <RadioButton
+          value="custom"
+          color={Colors.blue500}
+          onPress={() => setChecked('custom')}
+          status={checked === 'custom' ? 'checked' : 'unchecked'}
+        />
+      </View>
+      <RadioButton.Item
+        label="Normal 3 - Item"
+        value="normal-item"
+        status={checked === 'normal-item' ? 'checked' : 'unchecked'}
+        onPress={() => setChecked('normal-item')}
+      />
       <View style={styles.row}>
         <Paragraph>Checked (Disabled)</Paragraph>
         <RadioButton value="first" status="checked" disabled />
@@ -67,6 +58,18 @@ const RadioButtonExample = () => {
         <Paragraph>Unchecked (Disabled)</Paragraph>
         <RadioButton value="second" status="unchecked" disabled />
       </View>
+      <RadioButton.Item
+        label="Checked - Item (Disabled)"
+        value="third"
+        status="checked"
+        disabled
+      />
+      <RadioButton.Item
+        label="Unchecked - Item (Disabled)"
+        value="fourth"
+        status="unchecked"
+        disabled
+      />
     </View>
   );
 };
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index 9cffcc3d67..b9cd890dd8 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/src/components/RadioButton/RadioButtonItem.tsx
@@ -23,6 +23,10 @@ export type Props = {
    * Label to be displayed on the item.
    */
   label: string;
+  /**
+   * Whether radio is disabled.
+   */
+  disabled?: boolean;
   /**
    * Function to execute on press.
    */
@@ -98,6 +102,7 @@ class RadioButtonItem extends React.Component<Props> {
       style,
       labelStyle,
       onPress,
+      disabled,
       color,
       uncheckedColor,
       status,
@@ -109,12 +114,15 @@ class RadioButtonItem extends React.Component<Props> {
         {(context?: RadioButtonContextType) => {
           return (
             <TouchableRipple
-              onPress={() =>
-                handlePress({
-                  onPress: onPress,
-                  onValueChange: context?.onValueChange,
-                  value,
-                })
+              onPress={
+                disabled
+                  ? undefined
+                  : () =>
+                      handlePress({
+                        onPress: onPress,
+                        onValueChange: context?.onValueChange,
+                        value,
+                      })
               }
             >
               <View style={[styles.container, style]} pointerEvents="none">
@@ -125,6 +133,7 @@ class RadioButtonItem extends React.Component<Props> {
                 </Text>
                 <RadioButton
                   value={value}
+                  disabled={disabled}
                   status={status}
                   color={color}
                   uncheckedColor={uncheckedColor}

From 7cef03f7b880dcba9f9f8c3102c9bd3dfe7504dd Mon Sep 17 00:00:00 2001
From: Marek Majchrzak <mw.majch@gmail.com>
Date: Thu, 7 May 2020 17:01:37 +0200
Subject: [PATCH 2/2] fix: revert changes for normal items

---
 example/src/Examples/RadioButtonExample.tsx | 67 +++++++++++++--------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
index 2328e4cd55..6ccf8ea542 100644
--- a/example/src/Examples/RadioButtonExample.tsx
+++ b/example/src/Examples/RadioButtonExample.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Paragraph, RadioButton, Colors, useTheme } from 'react-native-paper';
+import {
+  Paragraph,
+  RadioButton,
+  Colors,
+  TouchableRipple,
+  useTheme,
+} from 'react-native-paper';
 
 type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom';
 
@@ -19,31 +25,40 @@ const RadioButtonExample = () => {
         },
       ]}
     >
-      <View style={styles.row}>
-        <Paragraph>Normal - Android</Paragraph>
-        <RadioButton.Android
-          value="normal"
-          status={checked === 'normal' ? 'checked' : 'unchecked'}
-          onPress={() => setChecked('normal')}
-        />
-      </View>
-      <View style={styles.row}>
-        <Paragraph>Normal 2 - IOS</Paragraph>
-        <RadioButton.IOS
-          value="normal-ios"
-          status={checked === 'normal-ios' ? 'checked' : 'unchecked'}
-          onPress={() => setChecked('normal-ios')}
-        />
-      </View>
-      <View style={styles.row}>
-        <Paragraph>Custom</Paragraph>
-        <RadioButton
-          value="custom"
-          color={Colors.blue500}
-          onPress={() => setChecked('custom')}
-          status={checked === 'custom' ? 'checked' : 'unchecked'}
-        />
-      </View>
+      <TouchableRipple onPress={() => setChecked('normal')}>
+        <View style={styles.row}>
+          <Paragraph>Normal - Android</Paragraph>
+          <View pointerEvents="none">
+            <RadioButton.Android
+              value="normal"
+              status={checked === 'normal' ? 'checked' : 'unchecked'}
+            />
+          </View>
+        </View>
+      </TouchableRipple>
+      <TouchableRipple onPress={() => setChecked('normal-ios')}>
+        <View style={styles.row}>
+          <Paragraph>Normal 2 - IOS</Paragraph>
+          <View pointerEvents="none">
+            <RadioButton.IOS
+              value="normal-ios"
+              status={checked === 'normal-ios' ? 'checked' : 'unchecked'}
+            />
+          </View>
+        </View>
+      </TouchableRipple>
+      <TouchableRipple onPress={() => setChecked('custom')}>
+        <View style={styles.row}>
+          <Paragraph>Custom</Paragraph>
+          <View pointerEvents="none">
+            <RadioButton
+              value="custom"
+              color={Colors.blue500}
+              status={checked === 'custom' ? 'checked' : 'unchecked'}
+            />
+          </View>
+        </View>
+      </TouchableRipple>
       <RadioButton.Item
         label="Normal 3 - Item"
         value="normal-item"