feat: modernize RadioButton for MD3

docs/6.x/docs/guides/migration.md

@@ -285,6 +285,24 @@ The `overlayAccessibilityLabel` prop was renamed to `dismissAccessibilityLabel`:
 </Menu>
 ```
 
+### RadioButton
+
+`RadioButton` renders one Material 3 circular radio control on every platform. The platform-specific components and their prop types are gone. On iOS checked controls no longer render a checkmark; they use the same ring-and-dot indicator as other platforms. `RadioButton` now also forwards `TouchableRipple` props (`accessible`, `onFocus`, `onBlur`, `borderless`, `rippleColor`, ...).
+
+The control now occupies a 48×48dp layout box instead of 40×40dp, so rows containing it may become 8dp taller. The 20dp radio indicator is unchanged. The minimum touch target is part of the layout on every platform, rather than an invisible area added with `hitSlop`.
+
+| v5                                               | v6                                                                      |
+| ------------------------------------------------ | ----------------------------------------------------------------------- |
+| `RadioButton.Android`, `RadioButton.IOS`         | `RadioButton`                                                           |
+| `RadioButtonAndroidProps`, `RadioButtonIOSProps` | `RadioButtonProps`                                                      |
+| `RadioButton.Item` `mode="android" \| "ios"`     | `mode` removed; `RadioButton.Item` always renders `RadioButton`         |
+| n/a                                              | new `error` (uses `theme.colors.error`) and `style` (touch-target style) |
+
+```diff
+- <RadioButton.IOS value="first" status="checked" onPress={select} />
++ <RadioButton value="first" status="checked" onPress={select} />
+```
+
 ### Searchbar
 
 The misspelled `traileringIcon` props have been renamed:

docs/component-docs.config.ts

@@ -125,9 +125,7 @@ const pages = {
   ProgressBar: 'ProgressBar',
   RadioButton: {
     RadioButton: 'RadioButton/RadioButton',
-    RadioButtonAndroid: 'RadioButton/RadioButtonAndroid',
     RadioButtonGroup: 'RadioButton/RadioButtonGroup',
-    RadioButtonIOS: 'RadioButton/RadioButtonIOS',
     RadioButtonItem: 'RadioButton/RadioButtonItem',
   },
   Searchbar: 'Searchbar',

docs/src/data/screenshots.ts

@@ -107,23 +107,13 @@ export const screenshots = {
   Modal: 'screenshots/modal.gif',
   ProgressBar: 'screenshots/progress-bar.png',
   RadioButton: {
-    'Android (enabled)': 'screenshots/radio-enabled.android.png',
-    'Android (disabled)': 'screenshots/radio-disabled.android.png',
-    'iOS (enabled)': 'screenshots/radio-enabled.ios.png',
-    'iOS (disabled)': 'screenshots/radio-disabled.ios.png',
-  },
-  'RadioButton.Android': {
     enabled: 'screenshots/radio-enabled.android.png',
     disabled: 'screenshots/radio-disabled.android.png',
   },
   'RadioButton.Group': {
     Android: 'screenshots/radio-button-group-android.gif',
     iOS: 'screenshots/radio-button-group-ios.gif',
   },
-  'RadioButton.IOS': {
-    enabled: 'screenshots/radio-enabled.ios.png',
-    disabled: 'screenshots/radio-disabled.ios.png',
-  },
   'RadioButton.Item': 'screenshots/radio-item.ios.png',
   Searchbar: {
     bar: 'screenshots/searchbar.png',

example/src/Examples/RadioButtonExample.tsx

@@ -10,7 +10,7 @@ import {
 
 import ScreenWrapper from '../ScreenWrapper';
 
-type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom';
+type State = 'normal' | 'normal-item' | 'custom';
 
 const RadioButtonExample = () => {
   const [checked, setChecked] = React.useState<State>('normal');
@@ -19,26 +19,15 @@ const RadioButtonExample = () => {
     <ScreenWrapper style={styles.container}>
       <TouchableRipple onPress={() => setChecked('normal')}>
         <View style={styles.row}>
-          <Text>Normal - Material Design</Text>
+          <Text>Normal</Text>
           <View pointerEvents="none">
-            <RadioButton.Android
+            <RadioButton
               value="normal"
               status={checked === 'normal' ? 'checked' : 'unchecked'}
             />
           </View>
         </View>
       </TouchableRipple>
-      <TouchableRipple onPress={() => setChecked('normal-ios')}>
-        <View style={styles.row}>
-          <Text>Normal 2 - IOS</Text>
-          <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}>
           <Text>Custom</Text>
@@ -58,11 +47,31 @@ const RadioButtonExample = () => {
         onPress={() => setChecked('normal-item')}
       />
       <View style={styles.row}>
-        <Text>Checked (Disabled)</Text>
+        <Text>Error (Checked)</Text>
+        <RadioButton value="error" status="checked" error />
+      </View>
+      <View style={styles.row}>
+        <Text>Error (Unchecked)</Text>
+        <RadioButton value="error-unchecked" status="unchecked" error />
+      </View>
+      <RadioButton.Item
+        label="Error - Item (Checked)"
+        value="error-item"
+        status="checked"
+        error
+      />
+      <RadioButton.Item
+        label="Error - Item (Unchecked)"
+        value="error-item-unchecked"
+        status="unchecked"
+        error
+      />
+      <View style={styles.row}>
+        <Text style={styles.disabledLabel}>Checked (Disabled)</Text>
         <RadioButton value="first" status="checked" disabled />
       </View>
       <View style={styles.row}>
-        <Text>Unchecked (Disabled)</Text>
+        <Text style={styles.disabledLabel}>Unchecked (Disabled)</Text>
         <RadioButton value="second" status="unchecked" disabled />
       </View>
       <RadioButton.Item
@@ -94,6 +103,11 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 16,
   },
+  // Standalone RadioButton has no label of its own; dim the demo label to
+  // match the disabled control (RadioButton.Item dims its label for you).
+  disabledLabel: {
+    opacity: 0.38,
+  },
 });
 
 export default RadioButtonExample;

example/src/Examples/RadioButtonGroupExample.tsx

@@ -24,11 +24,11 @@ const RadioButtonGroupExample = () => {
           </View>
           <View style={styles.row}>
             <Text>Second</Text>
-            <RadioButton.Android value="second" />
+            <RadioButton value="second" />
           </View>
           <View style={styles.row}>
             <Text>Third</Text>
-            <RadioButton.IOS value="third" />
+            <RadioButton value="third" />
           </View>
         </RadioButton.Group>
       </List.Section>

example/src/Examples/RadioButtonItemExample.tsx

@@ -7,55 +7,47 @@ import ScreenWrapper from '../ScreenWrapper';
 
 const RadioButtonItemExample = () => {
   const [checkedDefault, setCheckedDefault] = React.useState(true);
-  const [checkedAndroid, setCheckedAndroid] = React.useState(true);
-  const [checkedIOS, setCheckedIOS] = React.useState(true);
   const [checkedLeadingControl, setCheckedLeadingControl] =
     React.useState(true);
   const [checkedDisabled, setCheckedDisabled] = React.useState<boolean>(true);
+  const [checkedError, setCheckedError] = React.useState(true);
   const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true);
 
   return (
     <ScreenWrapper style={styles.container}>
       <RadioButton.Item
-        label="Default (will look like whatever system this is running on)"
+        label="Default (trailing control)"
         status={checkedDefault ? 'checked' : 'unchecked'}
         onPress={() => setCheckedDefault(!checkedDefault)}
         value="default"
       />
       <RadioButton.Item
-        label="Material Design"
-        mode="android"
-        status={checkedAndroid ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedAndroid(!checkedAndroid)}
-        value="android"
-      />
-      <RadioButton.Item
-        label="iOS"
-        mode="ios"
-        status={checkedIOS ? 'checked' : 'unchecked'}
-        onPress={() => setCheckedIOS(!checkedIOS)}
-        value="iOS"
-      />
-      <RadioButton.Item
-        label="Default with leading control"
+        label="Leading control"
         status={checkedLeadingControl ? 'checked' : 'unchecked'}
         onPress={() => setCheckedLeadingControl(!checkedLeadingControl)}
-        value="iOS"
+        value="leading"
         position="leading"
       />
       <RadioButton.Item
-        label="Disabled checkbox"
+        label="Error"
+        status={checkedError ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedError(!checkedError)}
+        value="error"
+        error
+      />
+      <RadioButton.Item
+        label="Disabled"
         status={checkedDisabled ? 'checked' : 'unchecked'}
         onPress={() => setCheckedDisabled(!checkedDisabled)}
-        value="iOS"
+        value="disabled"
         disabled
       />
       <RadioButton.Item
-        label="Default with titleLarge title variant"
+        label="titleLarge label variant"
         labelVariant="titleLarge"
         status={checkedLabelVariant ? 'checked' : 'unchecked'}
         onPress={() => setCheckedLabelVariant(!checkedLabelVariant)}
-        value="default"
+        value="variant"
       />
     </ScreenWrapper>
   );