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 36×36dp, so rows containing it may become 12dp taller. The 20dp radio indicator is unchanged. `RadioButton.Item` rows grow from 52dp to 64dp.
+
+| 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

@@ -5,6 +5,14 @@ import { extendedExamples } from './src/data/extendedExamples.ts';
 import { screenshots } from './src/data/screenshots.ts';
 import { themeColors } from './src/data/themeColors.ts';
 
+// 6.x-only overrides: the v5 iOS radio assets show a control this release
+// removes, but `generate-5x-docs.ts` still renders them from the shared map.
+const screenshotsV6: Record<string, unknown> = {
+  ...screenshots,
+  'RadioButton.Group': 'screenshots/radio-button-group-android.gif',
+};
+delete screenshotsV6['RadioButton.Item'];
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export type Page =
@@ -125,9 +133,7 @@ const pages = {
   ProgressBar: 'ProgressBar',
   RadioButton: {
     RadioButton: 'RadioButton/RadioButton',
-    RadioButtonAndroid: 'RadioButton/RadioButtonAndroid',
     RadioButtonGroup: 'RadioButton/RadioButtonGroup',
-    RadioButtonIOS: 'RadioButton/RadioButtonIOS',
     RadioButtonItem: 'RadioButton/RadioButtonItem',
   },
   Searchbar: 'Searchbar',
@@ -179,7 +185,7 @@ const componentDocsConfig: ComponentDocsConfig = {
     },
     knownIssues: {},
     themeColors,
-    screenshots,
+    screenshots: screenshotsV6,
     extendedExamples,
   },
 };

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>
   );