feat: add RadioButton.Item to enable pressing the whole row (#1468)

Author: bmigirl

example/src/ExampleList.tsx

@@ -32,6 +32,7 @@ import TextExample from './Examples/TextExample';
 import TextInputExample from './Examples/TextInputExample';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
+import RadioButtonGroupWithItemsExample from './Examples/RadioButtonGroupWithItemsExample';
 
 type Props = {
   theme: Theme;
@@ -61,6 +62,7 @@ export const examples: { [key: string]: any } = {
   progressbar: ProgressBarExample,
   radio: RadioButtonExample,
   radioGroup: RadioButtonGroupExample,
+  radioGroupWithItems: RadioButtonGroupWithItemsExample,
   searchbar: SearchbarExample,
   snackbar: SnackbarExample,
   surface: SurfaceExample,

example/src/Examples/RadioButtonGroupWithItemsExample.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Colors, withTheme, RadioButton, Theme } from 'react-native-paper';
+
+type Props = {
+  theme: Theme;
+};
+
+type State = {
+  value: string;
+};
+
+class RadioButtonGroupWithItemsExample extends React.Component<Props, State> {
+  static title = 'Radio Button Group With Items';
+
+  state = {
+    value: 'first',
+  };
+
+  render() {
+    const {
+      theme: {
+        colors: { background },
+      },
+    } = this.props;
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: background,
+          },
+        ]}
+      >
+        <RadioButton.Group
+          value={this.state.value}
+          onValueChange={(value: string) => this.setState({ value })}
+        >
+          <RadioButton.Item label="First item" value="first" />
+          <RadioButton.Item label="Second item" value="second" />
+        </RadioButton.Group>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.white,
+    padding: 8,
+  },
+});
+
+export default withTheme(RadioButtonGroupWithItemsExample);

src/components/RadioButton.tsx

@@ -8,6 +8,7 @@ import RadioButtonAndroid, {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   RadioButtonAndroid as _RadioButtonAndroid,
 } from './RadioButtonAndroid';
+import RadioButtonItem from './RadioButtonItem';
 import RadioButtonIOS, {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   RadioButtonIOS as _RadioButtonIOS,
@@ -110,6 +111,9 @@ class RadioButton extends React.Component<Props> {
   // @component ./RadioButtonIOS.tsx
   static IOS = RadioButtonIOS;
 
+  // @component = ./RadioButtonItem.tsx
+  static Item = RadioButtonItem;
+
   handlePress = (context: RadioButtonContextType) => {
     const { onPress } = this.props;
     const onValueChange = context ? context.onValueChange : () => {};

src/components/RadioButtonItem.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import TouchableRipple from './TouchableRipple';
+import RadioButton from './RadioButton';
+import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
+
+type Props = {
+  /**
+   * Value of the radio button.
+   */
+  value: string;
+  /**
+   * Label to be displayed on the item.
+   */
+  label: string;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: () => void;
+  /**
+   * Status of radio button.
+   */
+  status?: 'checked' | 'unchecked';
+  /**
+   * Additional styles for container View
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { RadioButton, Text } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
+ *   state = {
+ *     value: 'first',
+ *   };
+ *
+ *   render() {
+ *     return(
+ *       <RadioButton.Group
+ *         onValueChange={value => this.setState({ value })}
+ *         value={this.state.value}
+ *       >
+ *           <RadioButton.Item label="First item" value="first" />
+ *           <RadioButton.Item label="Second item" value="second" />
+ *       </RadioButton.Group>
+ *     )
+ *   }
+ * }
+ *```
+ */
+class RadioButtonItem extends React.Component<Props> {
+  static displayName = 'RadioButton.Item';
+
+  isChecked = (context: RadioButtonContextType) =>
+    context.value === this.props.value ? 'checked' : 'unchecked';
+
+  handlePress = (context: RadioButtonContextType) => () => {
+    const { onPress } = this.props;
+    const onValueChange = context ? context.onValueChange : () => {};
+
+    onPress ? onPress() : onValueChange(this.props.value);
+  };
+
+  render() {
+    const { value, label, style } = this.props;
+
+    return (
+      <RadioButtonContext.Consumer>
+        {context => (
+          <TouchableRipple onPress={this.handlePress(context)}>
+            <View style={[styles.container, style]} pointerEvents="none">
+              <Text>{label}</Text>
+              <RadioButton
+                value={value}
+                status={
+                  this.props.status || (context && this.isChecked(context))
+                }
+              ></RadioButton>
+            </View>
+          </TouchableRipple>
+        )}
+      </RadioButtonContext.Consumer>
+    );
+  }
+}
+
+export default RadioButtonItem;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+});