From ab89a0293f288d2a4239ba6d8f3760447f24528e Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 11:03:07 +0200
Subject: [PATCH 1/8] refactor(radio-button): merge platform variants into one
 MD3 component

---
 example/src/Examples/RadioButtonExample.tsx   |  17 +-
 .../src/Examples/RadioButtonGroupExample.tsx  |   4 +-
 .../src/Examples/RadioButtonItemExample.tsx   |  18 +-
 src/components/RadioButton/RadioButton.tsx    | 163 ++++++-
 .../RadioButton/RadioButtonAndroid.tsx        | 200 ---------
 src/components/RadioButton/RadioButtonIOS.tsx | 130 ------
 .../RadioButton/RadioButtonItem.tsx           |  18 +-
 src/components/RadioButton/index.ts           |   6 -
 src/components/RadioButton/utils.ts           |  53 ---
 .../RadioButton/RadioButton.test.tsx          |  54 +--
 .../RadioButton/RadioButtonItem.test.tsx      |  31 --
 .../__snapshots__/RadioButton.test.tsx.snap   | 231 +++-------
 .../RadioButtonGroup.test.tsx.snap            |  59 +--
 .../RadioButtonItem.test.tsx.snap             | 402 +-----------------
 .../__tests__/RadioButton/utils.test.tsx      |  72 +++-
 src/index.tsx                                 |   2 -
 16 files changed, 307 insertions(+), 1153 deletions(-)
 delete mode 100644 src/components/RadioButton/RadioButtonAndroid.tsx
 delete mode 100644 src/components/RadioButton/RadioButtonIOS.tsx

diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
index 6ab1869dd9..b6f8a06da8 100644
--- a/example/src/Examples/RadioButtonExample.tsx
+++ b/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>
diff --git a/example/src/Examples/RadioButtonGroupExample.tsx b/example/src/Examples/RadioButtonGroupExample.tsx
index dc7977acb8..46efc44f78 100644
--- a/example/src/Examples/RadioButtonGroupExample.tsx
+++ b/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>
diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx
index e640a1dd0a..5b068eb854 100644
--- a/example/src/Examples/RadioButtonItemExample.tsx
+++ b/example/src/Examples/RadioButtonItemExample.tsx
@@ -7,8 +7,6 @@ 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);
@@ -17,25 +15,11 @@ const RadioButtonItemExample = () => {
   return (
     <ScreenWrapper style={styles.container}>
       <RadioButton.Item
-        label="Default (will look like whatever system this is running on)"
+        label="Default"
         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"
         status={checkedLeadingControl ? 'checked' : 'unchecked'}
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index cb8a621e2d..2fc5003df3 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,12 +1,14 @@
-import { Platform } from 'react-native';
-import type { GestureResponderEvent } from 'react-native';
+import * as React from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
 
-import RadioButtonAndroid from './RadioButtonAndroid';
-import RadioButtonIOS from './RadioButtonIOS';
+import { RadioButtonContext } from './RadioButtonGroup';
+import type { RadioButtonContextType } from './RadioButtonGroup';
+import { getSelectionControlColor, handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { $RemoveChildren, ThemeProp } from '../../types';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
-export type Props = {
+export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Value of the radio button
    */
@@ -22,7 +24,7 @@ export type Props = {
   /**
    * Function to execute on press.
    */
-  onPress?: (e: GestureResponderEvent) => void;
+  onPress?: (param?: any) => void;
   /**
    * Custom color for unchecked radio.
    */
@@ -41,6 +43,8 @@ export type Props = {
   testID?: string;
 };
 
+const BORDER_WIDTH = 2;
+
 /**
  * Radio buttons allow the selection a single option from a set.
  *
@@ -71,16 +75,149 @@ export type Props = {
  *
  * export default MyComponent;
  * ```
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
-const RadioButton = ({ theme: themeOverrides, ...props }: Props) => {
+const RadioButton = ({
+  disabled,
+  onPress,
+  theme: themeOverrides,
+  value,
+  status,
+  testID,
+  ...rest
+}: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const { current: borderAnim } = React.useRef<Animated.Value>(
+    new Animated.Value(BORDER_WIDTH)
+  );
+
+  const { current: radioAnim } = React.useRef<Animated.Value>(
+    new Animated.Value(1)
+  );
+
+  const isFirstRendering = React.useRef<boolean>(true);
+
+  const { scale } = theme.animation;
+
+  React.useEffect(() => {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false;
+      return;
+    }
 
-  const Button = Platform.select({
-    default: RadioButtonAndroid,
-    ios: RadioButtonIOS,
-  });
+    if (status === 'checked') {
+      radioAnim.setValue(1.2);
 
-  return <Button {...props} theme={theme} />;
+      Animated.timing(radioAnim, {
+        toValue: 1,
+        duration: 150 * scale,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      borderAnim.setValue(10);
+
+      Animated.timing(borderAnim, {
+        toValue: BORDER_WIDTH,
+        duration: 150 * scale,
+        useNativeDriver: false,
+      }).start();
+    }
+  }, [status, borderAnim, radioAnim, scale]);
+
+  return (
+    <RadioButtonContext.Consumer>
+      {(context?: RadioButtonContextType) => {
+        const checked =
+          isChecked({
+            contextValue: context?.value,
+            status,
+            value,
+          }) === 'checked';
+
+        const { selectionControlColor } = getSelectionControlColor({
+          theme,
+          disabled,
+          checked,
+          customColor: rest.color,
+          customUncheckedColor: rest.uncheckedColor,
+        });
+
+        return (
+          <TouchableRipple
+            {...rest}
+            borderless
+            onPress={
+              disabled
+                ? undefined
+                : (event) => {
+                    handlePress({
+                      onPress,
+                      onValueChange: context?.onValueChange,
+                      value,
+                      event,
+                    });
+                  }
+            }
+            accessibilityRole="radio"
+            accessibilityState={{ disabled, checked }}
+            accessibilityLiveRegion="polite"
+            style={styles.container}
+            testID={testID}
+            theme={theme}
+          >
+            <Animated.View
+              style={[
+                styles.radio,
+                {
+                  borderColor: selectionControlColor,
+                  borderWidth: borderAnim,
+                },
+              ]}
+            >
+              {checked ? (
+                <View style={[StyleSheet.absoluteFill, styles.radioContainer]}>
+                  <Animated.View
+                    style={[
+                      styles.dot,
+                      {
+                        backgroundColor: selectionControlColor,
+                        transform: [{ scale: radioAnim }],
+                      },
+                    ]}
+                  />
+                </View>
+              ) : null}
+            </Animated.View>
+          </TouchableRipple>
+        );
+      }}
+    </RadioButtonContext.Consumer>
+  );
 };
 
+RadioButton.displayName = 'RadioButton';
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 18,
+  },
+  radioContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radio: {
+    height: 20,
+    width: 20,
+    borderRadius: 10,
+    margin: 8,
+  },
+  dot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+  },
+});
+
 export default RadioButton;
diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx
deleted file mode 100644
index a907b46b09..0000000000
--- a/src/components/RadioButton/RadioButtonAndroid.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-
-import { RadioButtonContext } from './RadioButtonGroup';
-import type { RadioButtonContextType } from './RadioButtonGroup';
-import { getSelectionControlColor, handlePress, isChecked } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Value of the radio button
-   */
-  value: string;
-  /**
-   * Status of radio button.
-   */
-  status?: 'checked' | 'unchecked';
-  /**
-   * Whether radio is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (param?: any) => void;
-  /**
-   * Custom color for unchecked radio.
-   */
-  uncheckedColor?: string;
-  /**
-   * Custom color for radio.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-const BORDER_WIDTH = 2;
-
-/**
- * Radio buttons allow the selection a single option from a set.
- * This component follows platform guidelines for Android, but can be used
- * on any platform.
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const RadioButtonAndroid = ({
-  disabled,
-  onPress,
-  theme: themeOverrides,
-  value,
-  status,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: borderAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(BORDER_WIDTH)
-  );
-
-  const { current: radioAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(1)
-  );
-
-  const isFirstRendering = React.useRef<boolean>(true);
-
-  const { scale } = theme.animation;
-
-  React.useEffect(() => {
-    // Do not run animation on very first rendering
-    if (isFirstRendering.current) {
-      isFirstRendering.current = false;
-      return;
-    }
-
-    if (status === 'checked') {
-      radioAnim.setValue(1.2);
-
-      Animated.timing(radioAnim, {
-        toValue: 1,
-        duration: 150 * scale,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      borderAnim.setValue(10);
-
-      Animated.timing(borderAnim, {
-        toValue: BORDER_WIDTH,
-        duration: 150 * scale,
-        useNativeDriver: false,
-      }).start();
-    }
-  }, [status, borderAnim, radioAnim, scale]);
-
-  return (
-    <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
-        const checked =
-          isChecked({
-            contextValue: context?.value,
-            status,
-            value,
-          }) === 'checked';
-
-        const { selectionControlColor } = getSelectionControlColor({
-          theme,
-          disabled,
-          checked,
-          customColor: rest.color,
-          customUncheckedColor: rest.uncheckedColor,
-        });
-
-        return (
-          <TouchableRipple
-            {...rest}
-            borderless
-            onPress={
-              disabled
-                ? undefined
-                : (event) => {
-                    handlePress({
-                      onPress,
-                      onValueChange: context?.onValueChange,
-                      value,
-                      event,
-                    });
-                  }
-            }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
-            style={styles.container}
-            testID={testID}
-            theme={theme}
-          >
-            <Animated.View
-              style={[
-                styles.radio,
-                {
-                  borderColor: selectionControlColor,
-                  borderWidth: borderAnim,
-                },
-              ]}
-            >
-              {checked ? (
-                <View style={[StyleSheet.absoluteFill, styles.radioContainer]}>
-                  <Animated.View
-                    style={[
-                      styles.dot,
-                      {
-                        backgroundColor: selectionControlColor,
-                        transform: [{ scale: radioAnim }],
-                      },
-                    ]}
-                  />
-                </View>
-              ) : null}
-            </Animated.View>
-          </TouchableRipple>
-        );
-      }}
-    </RadioButtonContext.Consumer>
-  );
-};
-
-RadioButtonAndroid.displayName = 'RadioButton.Android';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-  },
-  radioContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  radio: {
-    height: 20,
-    width: 20,
-    borderRadius: 10,
-    margin: 8,
-  },
-  dot: {
-    height: 10,
-    width: 10,
-    borderRadius: 5,
-  },
-});
-
-export default RadioButtonAndroid;
-
-// @component-docs ignore-next-line
-export { RadioButtonAndroid };
diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx
deleted file mode 100644
index e2e5f06c7c..0000000000
--- a/src/components/RadioButton/RadioButtonIOS.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import type { GestureResponderEvent } from 'react-native';
-
-import { RadioButtonContext } from './RadioButtonGroup';
-import type { RadioButtonContextType } from './RadioButtonGroup';
-import { handlePress, isChecked } from './utils';
-import { getSelectionControlIOSColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Value of the radio button
-   */
-  value: string;
-  /**
-   * Status of radio button.
-   */
-  status?: 'checked' | 'unchecked';
-  /**
-   * Whether radio is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Custom color for radio.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Radio buttons allow the selection a single option from a set.
- * This component follows platform guidelines for iOS, but can be used
- * on any platform.
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const RadioButtonIOS = ({
-  disabled,
-  onPress,
-  theme: themeOverrides,
-  status,
-  value,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  return (
-    <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
-        const checked =
-          isChecked({
-            contextValue: context?.value,
-            status,
-            value,
-          }) === 'checked';
-
-        const { checkedColor } = getSelectionControlIOSColor({
-          theme,
-          disabled,
-          customColor: rest.color,
-        });
-        const opacity = checked ? 1 : 0;
-
-        return (
-          <TouchableRipple
-            {...rest}
-            borderless
-            onPress={
-              disabled
-                ? undefined
-                : (event) => {
-                    handlePress({
-                      onPress,
-                      value,
-                      onValueChange: context?.onValueChange,
-                      event,
-                    });
-                  }
-            }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
-            style={styles.container}
-            testID={testID}
-            theme={theme}
-          >
-            <View style={{ opacity }}>
-              <MaterialCommunityIcon
-                allowFontScaling={false}
-                name="check"
-                size={24}
-                color={checkedColor}
-                direction="ltr"
-              />
-            </View>
-          </TouchableRipple>
-        );
-      }}
-    </RadioButtonContext.Consumer>
-  );
-};
-
-RadioButtonIOS.displayName = 'RadioButton.IOS';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-    padding: 6,
-  },
-});
-
-export default RadioButtonIOS;
-
-// @component-docs ignore-next-line
-export { RadioButtonIOS };
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index 1591760980..bef2cc0d8a 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/src/components/RadioButton/RadioButtonItem.tsx
@@ -8,10 +8,8 @@ import type {
 } from 'react-native';
 
 import RadioButton from './RadioButton';
-import RadioButtonAndroid from './RadioButtonAndroid';
 import { RadioButtonContext } from './RadioButtonGroup';
 import type { RadioButtonContextType } from './RadioButtonGroup';
-import RadioButtonIOS from './RadioButtonIOS';
 import { handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import { getStateLayer } from '../../theme/utils/state';
@@ -99,11 +97,6 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
-  /**
-   * Whether `<RadioButton.Android />` or `<RadioButton.IOS />` should be used.
-   * Left undefined `<RadioButton />` will be used.
-   */
-  mode?: 'android' | 'ios';
   /**
    * Radio button control position.
    */
@@ -151,7 +144,6 @@ const RadioButtonItem = ({
   background,
   accessibilityLabel = label,
   testID,
-  mode,
   position = 'trailing',
   labelVariant = 'bodyLarge',
   labelMaxFontSizeMultiplier,
@@ -167,15 +159,7 @@ const RadioButtonItem = ({
     uncheckedColor,
   };
   const isLeading = position === 'leading';
-  let radioButton: any;
-
-  if (mode === 'android') {
-    radioButton = <RadioButtonAndroid {...radioButtonProps} />;
-  } else if (mode === 'ios') {
-    radioButton = <RadioButtonIOS {...radioButtonProps} />;
-  } else {
-    radioButton = <RadioButton {...radioButtonProps} />;
-  }
+  const radioButton = <RadioButton {...radioButtonProps} />;
 
   const textAlign = isLeading ? 'right' : 'left';
 
diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts
index 6ba5b8b873..7373ad4328 100644
--- a/src/components/RadioButton/index.ts
+++ b/src/components/RadioButton/index.ts
@@ -1,7 +1,5 @@
 import RadioButtonComponent from './RadioButton';
-import RadioButtonAndroid from './RadioButtonAndroid';
 import RadioButtonGroup from './RadioButtonGroup';
-import RadioButtonIOS from './RadioButtonIOS';
 import RadioButtonItem from './RadioButtonItem';
 
 const RadioButton = Object.assign(
@@ -10,10 +8,6 @@ const RadioButton = Object.assign(
   {
     // @component ./RadioButtonGroup.tsx
     Group: RadioButtonGroup,
-    // @component ./RadioButtonAndroid.tsx
-    Android: RadioButtonAndroid,
-    // @component ./RadioButtonIOS.tsx
-    IOS: RadioButtonIOS,
     // @component ./RadioButtonItem.tsx
     Item: RadioButtonItem,
   }
diff --git a/src/components/RadioButton/utils.ts b/src/components/RadioButton/utils.ts
index a4a3904d8a..5e94ce25cd 100644
--- a/src/components/RadioButton/utils.ts
+++ b/src/components/RadioButton/utils.ts
@@ -41,59 +41,6 @@ export const isChecked = ({
   }
 };
 
-const getIOSCheckedColor = ({
-  theme,
-  disabled,
-  customColor,
-  error,
-}: {
-  theme: InternalTheme;
-  customColor?: ColorValue;
-  disabled?: boolean;
-  error?: boolean;
-}) => {
-  if (disabled) {
-    return theme.colors.primary;
-  }
-
-  if (customColor) {
-    return customColor;
-  }
-
-  if (error) {
-    return theme.colors.error;
-  }
-
-  return theme.colors.primary;
-};
-
-export const getSelectionControlIOSColor = ({
-  theme,
-  disabled,
-  customColor,
-  error,
-}: {
-  theme: InternalTheme;
-  disabled?: boolean;
-  customColor?: ColorValue;
-  error?: boolean;
-}) => {
-  const checkedColor = getIOSCheckedColor({
-    theme,
-    disabled,
-    customColor,
-    error,
-  });
-  const checkedColorOpacity = disabled
-    ? stateOpacity.disabled
-    : stateOpacity.enabled;
-
-  return {
-    checkedColor,
-    checkedColorOpacity,
-  };
-};
-
 export const getSelectionControlColor = ({
   theme,
   disabled,
diff --git a/src/components/__tests__/RadioButton/RadioButton.test.tsx b/src/components/__tests__/RadioButton/RadioButton.test.tsx
index 75497ea77e..3cc7112a8b 100644
--- a/src/components/__tests__/RadioButton/RadioButton.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButton.test.tsx
@@ -1,60 +1,14 @@
-import {
-  beforeAll,
-  describe,
-  expect,
-  it,
-  jest as mockJest,
-} from '@jest/globals';
+import { describe, expect, it } from '@jest/globals';
 
 import { render } from '../../../test-utils';
 import RadioButton from '../../RadioButton';
 import { RadioButtonContext } from '../../RadioButton/RadioButtonGroup';
 
 describe('RadioButton', () => {
-  describe('on default platform', () => {
-    beforeAll(() => {
-      mockJest.mock('react-native', () => {
-        const RN =
-          mockJest.requireActual<typeof import('react-native')>('react-native');
+  it('renders properly', () => {
+    const tree = render(<RadioButton value="first" />).toJSON();
 
-        return {
-          ...RN,
-          Platform: {
-            ...RN.Platform,
-            select: (objs: { default: object }) => objs.default,
-          },
-        };
-      });
-    });
-
-    it('renders properly', () => {
-      const tree = render(<RadioButton value="first" />).toJSON();
-
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('on ios platform', () => {
-    beforeAll(() => {
-      mockJest.mock('react-native', () => {
-        const RN =
-          mockJest.requireActual<typeof import('react-native')>('react-native');
-
-        return {
-          ...RN,
-          Platform: {
-            ...RN.Platform,
-            select: (objs: { ios: object }) => objs.ios,
-          },
-        };
-      });
-    });
-
-    it('renders properly', () => {
-      const tree = render(<RadioButton value="first" />).toJSON();
-
-      expect(tree).toMatchSnapshot();
-    });
+    expect(tree).toMatchSnapshot();
   });
 
   describe('when RadioButton is wrapped by RadioButtonContext.Provider', () => {
diff --git a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
index b8714367bb..c4304cd98e 100644
--- a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
@@ -1,5 +1,3 @@
-import { Platform } from 'react-native';
-
 import { expect, it, jest } from '@jest/globals';
 import { act, fireEvent } from '@testing-library/react-native';
 
@@ -18,36 +16,7 @@ it('renders unchecked', () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('can render the iOS radio button on different platforms', () => {
-  Platform.OS = 'android';
-  const tree = render(
-    <RadioButton.Item
-      status="unchecked"
-      label="iOS Radio button"
-      mode="ios"
-      value="ios"
-    />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('can render the Android radio button on different platforms', () => {
-  Platform.OS = 'ios';
-  const tree = render(
-    <RadioButton.Item
-      status="unchecked"
-      label="iOS Checkbox"
-      mode="android"
-      value="android"
-    />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
 it('can render leading radio button control', () => {
-  Platform.OS = 'ios';
   const tree = render(
     <RadioButton.Item
       label="Default with leading control"
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 5560a80f36..1f15aa582d 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -40,54 +40,28 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
       },
       {
         "borderRadius": 18,
-        "padding": 6,
       },
     ]
   }
   testID="custom:testID"
 >
   <View
+    collapsable={false}
     style={
       {
-        "opacity": 0,
+        "borderColor": "rgba(73, 69, 79, 1)",
+        "borderRadius": 10,
+        "borderWidth": 2,
+        "height": 20,
+        "margin": 8,
+        "width": 20,
       }
     }
-  >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
-      style={
-        [
-          {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
-          },
-          [
-            {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
-            },
-            {
-              "backgroundColor": "transparent",
-            },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
-  </View>
+  />
 </View>
 `;
 
-exports[`RadioButton on default platform renders properly 1`] = `
+exports[`RadioButton renders properly 1`] = `
 <View
   accessibilityLiveRegion="polite"
   accessibilityRole="radio"
@@ -127,135 +101,23 @@ exports[`RadioButton on default platform renders properly 1`] = `
       },
       {
         "borderRadius": 18,
-        "padding": 6,
       },
     ]
   }
 >
   <View
+    collapsable={false}
     style={
       {
-        "opacity": 0,
+        "borderColor": "rgba(73, 69, 79, 1)",
+        "borderRadius": 10,
+        "borderWidth": 2,
+        "height": 20,
+        "margin": 8,
+        "width": 20,
       }
     }
-  >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
-      style={
-        [
-          {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
-          },
-          [
-            {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
-            },
-            {
-              "backgroundColor": "transparent",
-            },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`RadioButton on ios platform renders properly 1`] = `
-<View
-  accessibilityLiveRegion="polite"
-  accessibilityRole="radio"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": false,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      {
-        "overflow": "hidden",
-      },
-      {
-        "borderRadius": 18,
-        "padding": 6,
-      },
-    ]
-  }
->
-  <View
-    style={
-      {
-        "opacity": 0,
-      }
-    }
-  >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
-      style={
-        [
-          {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
-          },
-          [
-            {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
-            },
-            {
-              "backgroundColor": "transparent",
-            },
-          ],
-        ]
-      }
-    >
-      check
-    </Text>
-  </View>
+  />
 </View>
 `;
 
@@ -299,48 +161,57 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
       },
       {
         "borderRadius": 18,
-        "padding": 6,
       },
     ]
   }
 >
   <View
+    collapsable={false}
     style={
       {
-        "opacity": 1,
+        "borderColor": "rgba(103, 80, 164, 1)",
+        "borderRadius": 10,
+        "borderWidth": 2,
+        "height": 20,
+        "margin": 8,
+        "width": 20,
       }
     }
   >
-    <Text
-      accessibilityElementsHidden={true}
-      allowFontScaling={false}
-      importantForAccessibility="no-hide-descendants"
-      pointerEvents="none"
-      selectable={false}
+    <View
       style={
         [
           {
-            "color": "rgba(103, 80, 164, 1)",
-            "fontSize": 24,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "alignItems": "center",
+            "justifyContent": "center",
           },
-          [
-            {
-              "lineHeight": 24,
-              "transform": [
-                {
-                  "scaleX": 1,
-                },
-              ],
-            },
-            {
-              "backgroundColor": "transparent",
-            },
-          ],
         ]
       }
     >
-      check
-    </Text>
+      <View
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "borderRadius": 5,
+            "height": 10,
+            "transform": [
+              {
+                "scale": 1,
+              },
+            ],
+            "width": 10,
+          }
+        }
+      />
+    </View>
   </View>
 </View>
 `;
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 5c3513d769..6d71aa6c0a 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -43,48 +43,57 @@ exports[`RadioButtonGroup renders properly 1`] = `
         },
         {
           "borderRadius": 18,
-          "padding": 6,
         },
       ]
     }
   >
     <View
+      collapsable={false}
       style={
         {
-          "opacity": 1,
+          "borderColor": "rgba(103, 80, 164, 1)",
+          "borderRadius": 10,
+          "borderWidth": 2,
+          "height": 20,
+          "margin": 8,
+          "width": 20,
         }
       }
     >
-      <Text
-        accessibilityElementsHidden={true}
-        allowFontScaling={false}
-        importantForAccessibility="no-hide-descendants"
-        pointerEvents="none"
-        selectable={false}
+      <View
         style={
           [
             {
-              "color": "rgba(103, 80, 164, 1)",
-              "fontSize": 24,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "alignItems": "center",
+              "justifyContent": "center",
             },
-            [
-              {
-                "lineHeight": 24,
-                "transform": [
-                  {
-                    "scaleX": 1,
-                  },
-                ],
-              },
-              {
-                "backgroundColor": "transparent",
-              },
-            ],
           ]
         }
       >
-        check
-      </Text>
+        <View
+          collapsable={false}
+          style={
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+              "borderRadius": 5,
+              "height": 10,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 10,
+            }
+          }
+        />
+      </View>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
index 39405cd07a..1db7f496a7 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
@@ -55,220 +55,6 @@ exports[`can render leading radio button control 1`] = `
       ]
     }
   >
-    <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": false,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        [
-          {
-            "overflow": "hidden",
-          },
-          {
-            "borderRadius": 18,
-            "padding": 6,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "opacity": 0,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontSize": 24,
-              },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          check
-        </Text>
-      </View>
-    </View>
-    <Text
-      style={
-        [
-          {
-            "textAlign": "left",
-          },
-          {
-            "color": "rgba(29, 27, 32, 1)",
-            "writingDirection": "ltr",
-          },
-          [
-            {
-              "fontFamily": "System",
-              "fontSize": 16,
-              "fontWeight": "400",
-              "letterSpacing": 0.5,
-              "lineHeight": 24,
-            },
-            [
-              {
-                "flexGrow": 1,
-                "flexShrink": 1,
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "opacity": 1,
-                "textAlign": "right",
-              },
-              undefined,
-            ],
-          ],
-        ]
-      }
-    >
-      Default with leading control
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`can render the Android radio button on different platforms 1`] = `
-<View
-  accessibilityLabel="iOS Checkbox"
-  accessibilityRole="radio"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": false,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      false,
-      undefined,
-    ]
-  }
->
-  <View
-    pointerEvents="none"
-    style={
-      [
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "paddingHorizontal": 16,
-          "paddingVertical": 8,
-        },
-        undefined,
-      ]
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "textAlign": "left",
-          },
-          {
-            "color": "rgba(29, 27, 32, 1)",
-            "writingDirection": "ltr",
-          },
-          [
-            {
-              "fontFamily": "System",
-              "fontSize": 16,
-              "fontWeight": "400",
-              "letterSpacing": 0.5,
-              "lineHeight": 24,
-            },
-            [
-              {
-                "flexGrow": 1,
-                "flexShrink": 1,
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "opacity": 1,
-                "textAlign": "left",
-              },
-              undefined,
-            ],
-          ],
-        ]
-      }
-    >
-      iOS Checkbox
-    </Text>
     <View
       accessibilityLiveRegion="polite"
       accessibilityRole="radio"
@@ -326,65 +112,6 @@ exports[`can render the Android radio button on different platforms 1`] = `
         }
       />
     </View>
-  </View>
-</View>
-`;
-
-exports[`can render the iOS radio button on different platforms 1`] = `
-<View
-  accessibilityLabel="iOS Radio button"
-  accessibilityRole="radio"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": false,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      false,
-      undefined,
-    ]
-  }
->
-  <View
-    pointerEvents="none"
-    style={
-      [
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "paddingHorizontal": 16,
-          "paddingVertical": 8,
-        },
-        undefined,
-      ]
-    }
-  >
     <Text
       style={
         [
@@ -411,7 +138,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
               {
                 "color": "rgba(29, 27, 32, 1)",
                 "opacity": 1,
-                "textAlign": "left",
+                "textAlign": "right",
               },
               undefined,
             ],
@@ -419,91 +146,8 @@ exports[`can render the iOS radio button on different platforms 1`] = `
         ]
       }
     >
-      iOS Radio button
+      Default with leading control
     </Text>
-    <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": false,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        [
-          {
-            "overflow": "hidden",
-          },
-          {
-            "borderRadius": 18,
-            "padding": 6,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "opacity": 0,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontSize": 24,
-              },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          check
-        </Text>
-      </View>
-    </View>
   </View>
 </View>
 `;
@@ -638,49 +282,23 @@ exports[`renders unchecked 1`] = `
           },
           {
             "borderRadius": 18,
-            "padding": 6,
           },
         ]
       }
     >
       <View
+        collapsable={false}
         style={
           {
-            "opacity": 0,
+            "borderColor": "rgba(73, 69, 79, 1)",
+            "borderRadius": 10,
+            "borderWidth": 2,
+            "height": 20,
+            "margin": 8,
+            "width": 20,
           }
         }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "rgba(103, 80, 164, 1)",
-                "fontSize": 24,
-              },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          check
-        </Text>
-      </View>
+      />
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/RadioButton/utils.test.tsx b/src/components/__tests__/RadioButton/utils.test.tsx
index e0a6736bd6..5798b56e69 100644
--- a/src/components/__tests__/RadioButton/utils.test.tsx
+++ b/src/components/__tests__/RadioButton/utils.test.tsx
@@ -2,88 +2,118 @@ import { describe, expect, it } from '@jest/globals';
 
 import { getTheme } from '../../../core/theming';
 import { tokens } from '../../../theme/tokens';
-import { getSelectionControlIOSColor } from '../../RadioButton/utils';
+import { getSelectionControlColor } from '../../RadioButton/utils';
 
 const stateOpacity = tokens.md.sys.state.opacity;
 
-describe('getSelectionControlIOSColor - checked color', () => {
-  it('should return correct disabled color, for theme version 3', () => {
+describe('getSelectionControlColor', () => {
+  it('should return disabled color', () => {
     expect(
-      getSelectionControlIOSColor({
+      getSelectionControlColor({
         theme: getTheme(),
         disabled: true,
+        checked: true,
       })
     ).toMatchObject({
-      checkedColor: getTheme().colors.primary,
-      checkedColorOpacity: stateOpacity.disabled,
+      selectionControlColor: getTheme().colors.onSurface,
+      selectionControlOpacity: stateOpacity.disabled,
     });
   });
 
   it('should return custom color, checked', () => {
     expect(
-      getSelectionControlIOSColor({
+      getSelectionControlColor({
         theme: getTheme(),
+        checked: true,
         customColor: 'purple',
       })
     ).toMatchObject({
-      checkedColor: 'purple',
+      selectionControlColor: 'purple',
     });
   });
 
-  it('should return theme color, for theme version 3, checked', () => {
+  it('should return primary color, checked', () => {
     expect(
-      getSelectionControlIOSColor({
+      getSelectionControlColor({
         theme: getTheme(),
+        checked: true,
       })
     ).toMatchObject({
-      checkedColor: getTheme().colors.primary,
+      selectionControlColor: getTheme().colors.primary,
     });
   });
 
-  it('should return error color when error is true', () => {
+  it('should return onSurfaceVariant color, unchecked', () => {
     expect(
-      getSelectionControlIOSColor({
+      getSelectionControlColor({
         theme: getTheme(),
+        checked: false,
+      })
+    ).toMatchObject({
+      selectionControlColor: getTheme().colors.onSurfaceVariant,
+    });
+  });
+
+  it('should return error color when error is true, checked', () => {
+    expect(
+      getSelectionControlColor({
+        theme: getTheme(),
+        checked: true,
+        error: true,
+      })
+    ).toMatchObject({
+      selectionControlColor: getTheme().colors.error,
+    });
+  });
+
+  it('should return error color when error is true, unchecked', () => {
+    expect(
+      getSelectionControlColor({
+        theme: getTheme(),
+        checked: false,
         error: true,
       })
     ).toMatchObject({
-      checkedColor: getTheme().colors.error,
+      selectionControlColor: getTheme().colors.error,
     });
   });
 
   it('should return error color, dark mode, when error is true', () => {
     expect(
-      getSelectionControlIOSColor({
+      getSelectionControlColor({
         theme: getTheme(true),
+        checked: true,
         error: true,
       })
     ).toMatchObject({
-      checkedColor: getTheme(true).colors.error,
+      selectionControlColor: getTheme(true).colors.error,
     });
   });
 
   it('should return disabled color when both disabled and error are true (disabled wins)', () => {
     expect(
-      getSelectionControlIOSColor({
+      getSelectionControlColor({
         theme: getTheme(),
+        checked: true,
         disabled: true,
         error: true,
       })
     ).toMatchObject({
-      checkedColor: getTheme().colors.primary,
-      checkedColorOpacity: stateOpacity.disabled,
+      selectionControlColor: getTheme().colors.onSurface,
+      selectionControlOpacity: stateOpacity.disabled,
     });
   });
 
   it('should return custom color when both customColor and error are true (customColor wins)', () => {
     expect(
-      getSelectionControlIOSColor({
+      getSelectionControlColor({
         theme: getTheme(),
+        checked: true,
         customColor: 'purple',
         error: true,
       })
     ).toMatchObject({
-      checkedColor: 'purple',
+      selectionControlColor: 'purple',
     });
   });
 });
diff --git a/src/index.tsx b/src/index.tsx
index 8863e2fa20..b04f5c0a2d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -120,9 +120,7 @@ export type { Props as PortalHostProps } from './components/Portal/PortalHost';
 export type { Props as ProgressBarProps } from './components/ProgressBar';
 export type { Props as ProviderProps } from './core/PaperProvider';
 export type { Props as RadioButtonProps } from './components/RadioButton/RadioButton';
-export type { Props as RadioButtonAndroidProps } from './components/RadioButton/RadioButtonAndroid';
 export type { Props as RadioButtonGroupProps } from './components/RadioButton/RadioButtonGroup';
-export type { Props as RadioButtonIOSProps } from './components/RadioButton/RadioButtonIOS';
 export type { Props as RadioButtonItemProps } from './components/RadioButton/RadioButtonItem';
 export type { Props as SearchbarProps } from './components/Searchbar';
 export type { Props as SnackbarProps } from './components/Snackbar';

From b1c7cb01f3ae6659c83f5414378f5308a6a224f4 Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 11:37:17 +0200
Subject: [PATCH 2/8] feat(radio-button): add MD3 tokens, error state, single
 animation path

---
 src/components/RadioButton/RadioButton.tsx    | 46 +++++++-------
 src/components/RadioButton/tokens.ts          | 20 ++++++
 src/components/RadioButton/utils.ts           | 11 ++--
 .../__snapshots__/RadioButton.test.tsx.snap   | 63 +++++++++++--------
 .../RadioButtonGroup.test.tsx.snap            | 21 ++++---
 .../RadioButtonItem.test.tsx.snap             | 42 +++++++------
 6 files changed, 121 insertions(+), 82 deletions(-)
 create mode 100644 src/components/RadioButton/tokens.ts

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 2fc5003df3..81d1087c45 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -3,6 +3,7 @@ import { Animated, StyleSheet, View } from 'react-native';
 
 import { RadioButtonContext } from './RadioButtonGroup';
 import type { RadioButtonContextType } from './RadioButtonGroup';
+import { RadioButtonTokens } from './tokens';
 import { getSelectionControlColor, handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
@@ -33,6 +34,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Custom color for radio.
    */
   color?: string;
+  /**
+   * Whether the radio button is in an error state. When true, the ring
+   * (unchecked) and dot (selected) use `theme.colors.error`. `disabled`
+   * and explicit `color`/`uncheckedColor` overrides take precedence.
+   */
+  error?: boolean;
   /**
    * @optional
    */
@@ -43,7 +50,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   testID?: string;
 };
 
-const BORDER_WIDTH = 2;
+const { ringSize, dotSize, outlineWidth: OUTLINE_WIDTH } = RadioButtonTokens;
 
 /**
  * Radio buttons allow the selection a single option from a set.
@@ -85,13 +92,13 @@ const RadioButton = ({
   value,
   status,
   testID,
+  error,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { current: borderAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(BORDER_WIDTH)
-  );
-
+  // Single selection animation path: the dot scales in (with a slight
+  // overshoot) when the radio becomes checked. The ring outline stays a
+  // constant width.
   const { current: radioAnim } = React.useRef<Animated.Value>(
     new Animated.Value(1)
   );
@@ -115,16 +122,8 @@ const RadioButton = ({
         duration: 150 * scale,
         useNativeDriver: true,
       }).start();
-    } else {
-      borderAnim.setValue(10);
-
-      Animated.timing(borderAnim, {
-        toValue: BORDER_WIDTH,
-        duration: 150 * scale,
-        useNativeDriver: false,
-      }).start();
     }
-  }, [status, borderAnim, radioAnim, scale]);
+  }, [status, radioAnim, scale]);
 
   return (
     <RadioButtonContext.Consumer>
@@ -140,6 +139,7 @@ const RadioButton = ({
           theme,
           disabled,
           checked,
+          error,
           customColor: rest.color,
           customUncheckedColor: rest.uncheckedColor,
         });
@@ -167,12 +167,11 @@ const RadioButton = ({
             testID={testID}
             theme={theme}
           >
-            <Animated.View
+            <View
               style={[
                 styles.radio,
                 {
                   borderColor: selectionControlColor,
-                  borderWidth: borderAnim,
                 },
               ]}
             >
@@ -189,7 +188,7 @@ const RadioButton = ({
                   />
                 </View>
               ) : null}
-            </Animated.View>
+            </View>
           </TouchableRipple>
         );
       }}
@@ -208,15 +207,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   radio: {
-    height: 20,
-    width: 20,
-    borderRadius: 10,
+    height: ringSize,
+    width: ringSize,
+    borderRadius: ringSize / 2,
+    borderWidth: OUTLINE_WIDTH,
     margin: 8,
   },
   dot: {
-    height: 10,
-    width: 10,
-    borderRadius: 5,
+    height: dotSize,
+    width: dotSize,
+    borderRadius: dotSize / 2,
   },
 });
 
diff --git a/src/components/RadioButton/tokens.ts b/src/components/RadioButton/tokens.ts
new file mode 100644
index 0000000000..447c85eae8
--- /dev/null
+++ b/src/components/RadioButton/tokens.ts
@@ -0,0 +1,20 @@
+import type { ColorRole } from '../../theme/types';
+
+/**
+ * MD3 Radio button spec dimensions and color-role tokens.
+ * @see https://m3.material.io/components/radio-button/specs
+ */
+const sizes = {
+  ringSize: 20,
+  dotSize: 10,
+  outlineWidth: 2,
+} as const;
+
+const colors = {
+  checkedColor: 'primary',
+  uncheckedColor: 'onSurfaceVariant',
+  disabledColor: 'onSurface',
+  errorColor: 'error',
+} as const satisfies Record<string, ColorRole>;
+
+export const RadioButtonTokens = { ...sizes, ...colors };
diff --git a/src/components/RadioButton/utils.ts b/src/components/RadioButton/utils.ts
index 5e94ce25cd..7380da403f 100644
--- a/src/components/RadioButton/utils.ts
+++ b/src/components/RadioButton/utils.ts
@@ -1,5 +1,6 @@
 import type { ColorValue, GestureResponderEvent } from 'react-native';
 
+import { RadioButtonTokens } from './tokens';
 import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
@@ -60,15 +61,15 @@ export const getSelectionControlColor = ({
   const checkedColor = customColor
     ? customColor
     : error
-    ? theme.colors.error
-    : theme.colors.primary;
+    ? theme.colors[RadioButtonTokens.errorColor]
+    : theme.colors[RadioButtonTokens.checkedColor];
   const uncheckedColor = customUncheckedColor
     ? customUncheckedColor
     : error
-    ? theme.colors.error
-    : theme.colors.onSurfaceVariant;
+    ? theme.colors[RadioButtonTokens.errorColor]
+    : theme.colors[RadioButtonTokens.uncheckedColor];
   const color = disabled
-    ? theme.colors.onSurface
+    ? theme.colors[RadioButtonTokens.disabledColor]
     : checked
     ? checkedColor
     : uncheckedColor;
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 1f15aa582d..81dc789e7b 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -46,16 +46,19 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
   testID="custom:testID"
 >
   <View
-    collapsable={false}
     style={
-      {
-        "borderColor": "rgba(73, 69, 79, 1)",
-        "borderRadius": 10,
-        "borderWidth": 2,
-        "height": 20,
-        "margin": 8,
-        "width": 20,
-      }
+      [
+        {
+          "borderRadius": 10,
+          "borderWidth": 2,
+          "height": 20,
+          "margin": 8,
+          "width": 20,
+        },
+        {
+          "borderColor": "rgba(73, 69, 79, 1)",
+        },
+      ]
     }
   />
 </View>
@@ -106,16 +109,19 @@ exports[`RadioButton renders properly 1`] = `
   }
 >
   <View
-    collapsable={false}
     style={
-      {
-        "borderColor": "rgba(73, 69, 79, 1)",
-        "borderRadius": 10,
-        "borderWidth": 2,
-        "height": 20,
-        "margin": 8,
-        "width": 20,
-      }
+      [
+        {
+          "borderRadius": 10,
+          "borderWidth": 2,
+          "height": 20,
+          "margin": 8,
+          "width": 20,
+        },
+        {
+          "borderColor": "rgba(73, 69, 79, 1)",
+        },
+      ]
     }
   />
 </View>
@@ -166,16 +172,19 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
   }
 >
   <View
-    collapsable={false}
     style={
-      {
-        "borderColor": "rgba(103, 80, 164, 1)",
-        "borderRadius": 10,
-        "borderWidth": 2,
-        "height": 20,
-        "margin": 8,
-        "width": 20,
-      }
+      [
+        {
+          "borderRadius": 10,
+          "borderWidth": 2,
+          "height": 20,
+          "margin": 8,
+          "width": 20,
+        },
+        {
+          "borderColor": "rgba(103, 80, 164, 1)",
+        },
+      ]
     }
   >
     <View
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 6d71aa6c0a..671448dd21 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -48,16 +48,19 @@ exports[`RadioButtonGroup renders properly 1`] = `
     }
   >
     <View
-      collapsable={false}
       style={
-        {
-          "borderColor": "rgba(103, 80, 164, 1)",
-          "borderRadius": 10,
-          "borderWidth": 2,
-          "height": 20,
-          "margin": 8,
-          "width": 20,
-        }
+        [
+          {
+            "borderRadius": 10,
+            "borderWidth": 2,
+            "height": 20,
+            "margin": 8,
+            "width": 20,
+          },
+          {
+            "borderColor": "rgba(103, 80, 164, 1)",
+          },
+        ]
       }
     >
       <View
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
index 1db7f496a7..0b7c96a08f 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
@@ -99,16 +99,19 @@ exports[`can render leading radio button control 1`] = `
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "borderColor": "rgba(73, 69, 79, 1)",
-            "borderRadius": 10,
-            "borderWidth": 2,
-            "height": 20,
-            "margin": 8,
-            "width": 20,
-          }
+          [
+            {
+              "borderRadius": 10,
+              "borderWidth": 2,
+              "height": 20,
+              "margin": 8,
+              "width": 20,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
         }
       />
     </View>
@@ -287,16 +290,19 @@ exports[`renders unchecked 1`] = `
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "borderColor": "rgba(73, 69, 79, 1)",
-            "borderRadius": 10,
-            "borderWidth": 2,
-            "height": 20,
-            "margin": 8,
-            "width": 20,
-          }
+          [
+            {
+              "borderRadius": 10,
+              "borderWidth": 2,
+              "height": 20,
+              "margin": 8,
+              "width": 20,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
         }
       />
     </View>

From 63d6d156a989e21fcfd4925a0285ee7a5cb274ba Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 12:10:51 +0200
Subject: [PATCH 3/8] perf(radio-button): memoize group context, switch to
 useContext

---
 src/components/RadioButton/RadioButton.tsx    | 118 +++++++++---------
 .../RadioButton/RadioButtonGroup.tsx          |  22 +++-
 .../RadioButton/RadioButtonItem.tsx           |  88 +++++++------
 .../RadioButton/RadioButtonGroup.test.tsx     |  27 ++++
 4 files changed, 142 insertions(+), 113 deletions(-)

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 81d1087c45..45e78b58f7 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
 import { RadioButtonContext } from './RadioButtonGroup';
-import type { RadioButtonContextType } from './RadioButtonGroup';
 import { RadioButtonTokens } from './tokens';
 import { getSelectionControlColor, handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
@@ -96,6 +95,7 @@ const RadioButton = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const context = React.useContext(RadioButtonContext);
   // Single selection animation path: the dot scales in (with a slight
   // overshoot) when the radio becomes checked. The ring outline stays a
   // constant width.
@@ -125,74 +125,68 @@ const RadioButton = ({
     }
   }, [status, radioAnim, scale]);
 
-  return (
-    <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
-        const checked =
-          isChecked({
-            contextValue: context?.value,
-            status,
-            value,
-          }) === 'checked';
+  const checked =
+    isChecked({
+      contextValue: context?.value,
+      status,
+      value,
+    }) === 'checked';
 
-        const { selectionControlColor } = getSelectionControlColor({
-          theme,
-          disabled,
-          checked,
-          error,
-          customColor: rest.color,
-          customUncheckedColor: rest.uncheckedColor,
-        });
+  const { selectionControlColor } = getSelectionControlColor({
+    theme,
+    disabled,
+    checked,
+    error,
+    customColor: rest.color,
+    customUncheckedColor: rest.uncheckedColor,
+  });
 
-        return (
-          <TouchableRipple
-            {...rest}
-            borderless
-            onPress={
-              disabled
-                ? undefined
-                : (event) => {
-                    handlePress({
-                      onPress,
-                      onValueChange: context?.onValueChange,
-                      value,
-                      event,
-                    });
-                  }
+  return (
+    <TouchableRipple
+      {...rest}
+      borderless
+      onPress={
+        disabled
+          ? undefined
+          : (event) => {
+              handlePress({
+                onPress,
+                onValueChange: context?.onValueChange,
+                value,
+                event,
+              });
             }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
-            style={styles.container}
-            testID={testID}
-            theme={theme}
-          >
-            <View
+      }
+      accessibilityRole="radio"
+      accessibilityState={{ disabled, checked }}
+      accessibilityLiveRegion="polite"
+      style={styles.container}
+      testID={testID}
+      theme={theme}
+    >
+      <View
+        style={[
+          styles.radio,
+          {
+            borderColor: selectionControlColor,
+          },
+        ]}
+      >
+        {checked ? (
+          <View style={[StyleSheet.absoluteFill, styles.radioContainer]}>
+            <Animated.View
               style={[
-                styles.radio,
+                styles.dot,
                 {
-                  borderColor: selectionControlColor,
+                  backgroundColor: selectionControlColor,
+                  transform: [{ scale: radioAnim }],
                 },
               ]}
-            >
-              {checked ? (
-                <View style={[StyleSheet.absoluteFill, styles.radioContainer]}>
-                  <Animated.View
-                    style={[
-                      styles.dot,
-                      {
-                        backgroundColor: selectionControlColor,
-                        transform: [{ scale: radioAnim }],
-                      },
-                    ]}
-                  />
-                </View>
-              ) : null}
-            </View>
-          </TouchableRipple>
-        );
-      }}
-    </RadioButtonContext.Consumer>
+            />
+          </View>
+        ) : null}
+      </View>
+    </TouchableRipple>
   );
 };
 
diff --git a/src/components/RadioButton/RadioButtonGroup.tsx b/src/components/RadioButton/RadioButtonGroup.tsx
index 2bdd596561..5305e5bdeb 100644
--- a/src/components/RadioButton/RadioButtonGroup.tsx
+++ b/src/components/RadioButton/RadioButtonGroup.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
+import useLatestCallback from 'use-latest-callback';
+
 export type Props = {
   /**
    * Function to execute on selection change.
@@ -54,11 +56,21 @@ export const RadioButtonContext = React.createContext<RadioButtonContextType>(
  * export default MyComponent;
  *```
  */
-const RadioButtonGroup = ({ value, onValueChange, children }: Props) => (
-  <RadioButtonContext.Provider value={{ value, onValueChange }}>
-    <View accessibilityRole="radiogroup">{children}</View>
-  </RadioButtonContext.Provider>
-);
+const RadioButtonGroup = ({ value, onValueChange, children }: Props) => {
+  // Stabilize the callback so the memoized context value only changes when
+  // `value` changes — not on every parent render.
+  const stableOnValueChange = useLatestCallback(onValueChange);
+  const context = React.useMemo(
+    () => ({ value, onValueChange: stableOnValueChange }),
+    [value, stableOnValueChange]
+  );
+
+  return (
+    <RadioButtonContext.Provider value={context}>
+      <View accessibilityRole="radiogroup">{children}</View>
+    </RadioButtonContext.Provider>
+  );
+};
 
 RadioButtonGroup.displayName = 'RadioButton.Group';
 export default RadioButtonGroup;
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index bef2cc0d8a..4f8d785ba9 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/src/components/RadioButton/RadioButtonItem.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type {
   GestureResponderEvent,
@@ -9,7 +10,6 @@ import type {
 
 import RadioButton from './RadioButton';
 import { RadioButtonContext } from './RadioButtonGroup';
-import type { RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import { getStateLayer } from '../../theme/utils/state';
@@ -150,6 +150,7 @@ const RadioButtonItem = ({
   hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const context = React.useContext(RadioButtonContext);
   const radioButtonProps = {
     value,
     disabled,
@@ -168,53 +169,48 @@ const RadioButtonItem = ({
     textAlign,
   } as TextStyle;
 
+  const checked =
+    isChecked({
+      contextValue: context?.value,
+      status,
+      value,
+    }) === 'checked';
+
   return (
-    <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
-        const checked =
-          isChecked({
-            contextValue: context?.value,
-            status,
-            value,
-          }) === 'checked';
-        return (
-          <TouchableRipple
-            onPress={(event) =>
-              handlePress({
-                onPress: onPress,
-                onValueChange: context?.onValueChange,
-                value,
-                event,
-              })
-            }
-            onLongPress={onLongPress}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="radio"
-            accessibilityState={{
-              checked,
-              disabled,
-            }}
-            testID={testID}
-            disabled={disabled}
-            background={background}
-            theme={theme}
-            hitSlop={hitSlop}
-          >
-            <View style={[styles.container, style]} pointerEvents="none">
-              {isLeading && radioButton}
-              <Text
-                variant={labelVariant}
-                style={[styles.label, computedStyle, labelStyle]}
-                maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-              >
-                {label}
-              </Text>
-              {!isLeading && radioButton}
-            </View>
-          </TouchableRipple>
-        );
+    <TouchableRipple
+      onPress={(event) =>
+        handlePress({
+          onPress: onPress,
+          onValueChange: context?.onValueChange,
+          value,
+          event,
+        })
+      }
+      onLongPress={onLongPress}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked,
+        disabled,
       }}
-    </RadioButtonContext.Consumer>
+      testID={testID}
+      disabled={disabled}
+      background={background}
+      theme={theme}
+      hitSlop={hitSlop}
+    >
+      <View style={[styles.container, style]} pointerEvents="none">
+        {isLeading && radioButton}
+        <Text
+          variant={labelVariant}
+          style={[styles.label, computedStyle, labelStyle]}
+          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+        >
+          {label}
+        </Text>
+        {!isLeading && radioButton}
+      </View>
+    </TouchableRipple>
   );
 };
 
diff --git a/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx b/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
index b4fe69463e..7437984f39 100644
--- a/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButtonGroup.test.tsx
@@ -1,7 +1,11 @@
+import * as React from 'react';
+
 import { describe, expect, it } from '@jest/globals';
 
 import { render } from '../../../test-utils';
 import RadioButton from '../../RadioButton';
+import { RadioButtonContext } from '../../RadioButton/RadioButtonGroup';
+import type { RadioButtonContextType } from '../../RadioButton/RadioButtonGroup';
 
 describe('RadioButtonGroup', () => {
   it('renders properly', () => {
@@ -13,4 +17,27 @@ describe('RadioButtonGroup', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('keeps a stable context value when an unrelated parent prop changes', () => {
+    const contexts: RadioButtonContextType[] = [];
+
+    const Capture = ({ extra }: { extra: number }) => {
+      contexts.push(React.useContext(RadioButtonContext));
+      return <RadioButton value={`v${extra}`} />;
+    };
+
+    // New inline `onValueChange` on every render — `use-latest-callback` +
+    // `useMemo` should keep the provided context object identical.
+    const Parent = ({ extra }: { extra: number }) => (
+      <RadioButton.Group value="first" onValueChange={() => {}}>
+        <Capture extra={extra} />
+      </RadioButton.Group>
+    );
+
+    const { rerender } = render(<Parent extra={1} />);
+    rerender(<Parent extra={2} />);
+
+    expect(contexts.length).toBe(2);
+    expect(contexts[0]).toBe(contexts[1]);
+  });
 });

From 2ae19bb3b78f85f020799adb0d1ac8e6ca77fb9a Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 12:50:13 +0200
Subject: [PATCH 4/8] fix(radio-button): single a11y node per item, error +
 parity cleanup

---
 src/components/RadioButton/RadioButton.tsx    | 16 +++++++++++---
 .../RadioButton/RadioButtonItem.tsx           | 21 ++++++++++++++++---
 .../RadioButton/RadioButtonItem.test.tsx      |  9 ++++++++
 .../__snapshots__/RadioButton.test.tsx.snap   |  3 ---
 .../RadioButtonGroup.test.tsx.snap            |  1 -
 .../RadioButtonItem.test.tsx.snap             | 18 +++++++++-------
 6 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 45e78b58f7..40e39a79bb 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -141,6 +141,18 @@ const RadioButton = ({
     customUncheckedColor: rest.uncheckedColor,
   });
 
+  // When `accessible={false}` is passed (typically by `RadioButton.Item`,
+  // which owns the a11y tree for the wrapped row), suppress our own role and
+  // state so the same logical control doesn't expose two `checked` states to
+  // assistive tech.
+  const accessibilityProps =
+    rest.accessible === false
+      ? {}
+      : {
+          accessibilityRole: 'radio' as const,
+          accessibilityState: { disabled: !!disabled, checked },
+        };
+
   return (
     <TouchableRipple
       {...rest}
@@ -157,9 +169,7 @@ const RadioButton = ({
               });
             }
       }
-      accessibilityRole="radio"
-      accessibilityState={{ disabled, checked }}
-      accessibilityLiveRegion="polite"
+      {...accessibilityProps}
       style={styles.container}
       testID={testID}
       theme={theme}
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
index 4f8d785ba9..1ab6c05f03 100644
--- a/src/components/RadioButton/RadioButtonItem.tsx
+++ b/src/components/RadioButton/RadioButtonItem.tsx
@@ -60,6 +60,11 @@ export type Props = {
    * Status of radio button.
    */
   status?: 'checked' | 'unchecked';
+  /**
+   * Whether the radio button is in an error state. When true, the control
+   * uses `theme.colors.error`.
+   */
+  error?: boolean;
   /**
    * Additional styles for container View.
    */
@@ -140,13 +145,14 @@ const RadioButtonItem = ({
   color,
   uncheckedColor,
   status,
+  error,
   theme: themeOverrides,
   background,
   accessibilityLabel = label,
   testID,
   position = 'trailing',
   labelVariant = 'bodyLarge',
-  labelMaxFontSizeMultiplier,
+  labelMaxFontSizeMultiplier = 1.5,
   hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -158,9 +164,13 @@ const RadioButtonItem = ({
     color,
     theme,
     uncheckedColor,
+    error,
   };
   const isLeading = position === 'leading';
-  const radioButton = <RadioButton {...radioButtonProps} />;
+  // The outer TouchableRipple is the interactable element + a11y radio; the
+  // inner control is purely visual, so exclude it from the a11y tree to
+  // avoid duplicate `checked` states.
+  const radioButton = <RadioButton {...radioButtonProps} accessible={false} />;
 
   const textAlign = isLeading ? 'right' : 'left';
 
@@ -199,10 +209,15 @@ const RadioButtonItem = ({
       theme={theme}
       hitSlop={hitSlop}
     >
-      <View style={[styles.container, style]} pointerEvents="none">
+      <View
+        style={[styles.container, style]}
+        pointerEvents="none"
+        importantForAccessibility="no-hide-descendants"
+      >
         {isLeading && radioButton}
         <Text
           variant={labelVariant}
+          testID={`${testID}-text`}
           style={[styles.label, computedStyle, labelStyle]}
           maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         >
diff --git a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
index c4304cd98e..3cf5958d9b 100644
--- a/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
+++ b/src/components/__tests__/RadioButton/RadioButtonItem.test.tsx
@@ -29,6 +29,15 @@ it('can render leading radio button control', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('exposes a single radio a11y node per item', () => {
+  const { queryAllByRole } = render(
+    <RadioButton.Item label="Item" value="first" status="checked" />
+  );
+
+  // The inner control is `accessible={false}`, so only the row is a radio.
+  expect(queryAllByRole('radio')).toHaveLength(1);
+});
+
 it('should execute onLongPress', () => {
   const onLongPress = jest.fn();
 
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 81dc789e7b..fe1ffd59aa 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
 <View
-  accessibilityLiveRegion="polite"
   accessibilityRole="radio"
   accessibilityState={
     {
@@ -66,7 +65,6 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
 
 exports[`RadioButton renders properly 1`] = `
 <View
-  accessibilityLiveRegion="polite"
   accessibilityRole="radio"
   accessibilityState={
     {
@@ -129,7 +127,6 @@ exports[`RadioButton renders properly 1`] = `
 
 exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider renders properly 1`] = `
 <View
-  accessibilityLiveRegion="polite"
   accessibilityRole="radio"
   accessibilityState={
     {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 671448dd21..50526cb7f9 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`RadioButtonGroup renders properly 1`] = `
   accessibilityRole="radiogroup"
 >
   <View
-    accessibilityLiveRegion="polite"
     accessibilityRole="radio"
     accessibilityState={
       {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
index 0b7c96a08f..05ab0cede7 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
@@ -41,6 +41,7 @@ exports[`can render leading radio button control 1`] = `
   }
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
     style={
       [
@@ -56,12 +57,10 @@ exports[`can render leading radio button control 1`] = `
     }
   >
     <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
-          "checked": false,
+          "checked": undefined,
           "disabled": false,
           "expanded": undefined,
           "selected": undefined,
@@ -75,7 +74,7 @@ exports[`can render leading radio button control 1`] = `
           "text": undefined,
         }
       }
-      accessible={true}
+      accessible={false}
       collapsable={false}
       focusable={true}
       onBlur={[Function]}
@@ -116,6 +115,7 @@ exports[`can render leading radio button control 1`] = `
       />
     </View>
     <Text
+      maxFontSizeMultiplier={1.5}
       style={
         [
           {
@@ -148,6 +148,7 @@ exports[`can render leading radio button control 1`] = `
           ],
         ]
       }
+      testID="undefined-text"
     >
       Default with leading control
     </Text>
@@ -196,6 +197,7 @@ exports[`renders unchecked 1`] = `
   }
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
     style={
       [
@@ -211,6 +213,7 @@ exports[`renders unchecked 1`] = `
     }
   >
     <Text
+      maxFontSizeMultiplier={1.5}
       style={
         [
           {
@@ -243,16 +246,15 @@ exports[`renders unchecked 1`] = `
           ],
         ]
       }
+      testID="undefined-text"
     >
       Unchecked Button
     </Text>
     <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="radio"
       accessibilityState={
         {
           "busy": undefined,
-          "checked": false,
+          "checked": undefined,
           "disabled": false,
           "expanded": undefined,
           "selected": undefined,
@@ -266,7 +268,7 @@ exports[`renders unchecked 1`] = `
           "text": undefined,
         }
       }
-      accessible={true}
+      accessible={false}
       collapsable={false}
       focusable={true}
       onBlur={[Function]}

From 91c71564d1f753b4e86d1ee8acdaad495e8eba32 Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 13:31:13 +0200
Subject: [PATCH 5/8] docs(radio-button): update example + drop platform
 variant docs

---
 docs/docusaurus.config.js                     |  2 -
 .../RadioButton/RadioButtonAndroid.mdx        | 99 -------------------
 .../components/RadioButton/RadioButtonIOS.mdx | 91 -----------------
 .../RadioButton/RadioButtonItem.mdx           |  8 --
 example/src/Examples/RadioButtonExample.tsx   | 10 ++
 .../src/Examples/RadioButtonItemExample.tsx   | 22 +++--
 6 files changed, 25 insertions(+), 207 deletions(-)
 delete mode 100644 docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonAndroid.mdx
 delete mode 100644 docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonIOS.mdx

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index ee54135042..6ec539ecd4 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -155,9 +155,7 @@ const config = {
           ProgressBar: 'ProgressBar',
           RadioButton: {
             RadioButton: 'RadioButton/RadioButton',
-            RadioButtonAndroid: 'RadioButton/RadioButtonAndroid',
             RadioButtonGroup: 'RadioButton/RadioButtonGroup',
-            RadioButtonIOS: 'RadioButton/RadioButtonIOS',
             RadioButtonItem: 'RadioButton/RadioButtonItem',
           },
           Searchbar: 'Searchbar',
diff --git a/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonAndroid.mdx b/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonAndroid.mdx
deleted file mode 100644
index 2faf286f16..0000000000
--- a/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonAndroid.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: RadioButton.Android
----
-
-import PropTable from '@site/src/components/PropTable.tsx';
-import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
-
-
-
-
-  <ScreenshotTabs screenshotData={{"enabled":"screenshots/radio-enabled.android.png","disabled":"screenshots/radio-disabled.android.png"}} baseUrl="/"/>
-  
-
-Radio buttons allow the selection a single option from a set.
-This component follows platform guidelines for Android, but can be used
-on any platform.
-
-
-
-
-  ## Props
-  ### TouchableRipple props
-  <ExtendsLink name="TouchableRipple props" link="https://callstack.github.io/react-native-paper/docs/components/TouchableRipple" />
-
-  
-<div>
-
-### value (required) 
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="value" />
-  
-<div>
-
-### status  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="status" />
-  
-<div>
-
-### disabled  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="disabled" />
-  
-<div>
-
-### onPress  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="onPress" />
-  
-<div>
-
-### uncheckedColor  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="uncheckedColor" />
-  
-<div>
-
-### color  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="color" />
-  
-<div>
-
-### theme  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="theme" />
-  
-<div>
-
-### testID  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonAndroid" prop="testID" />
-  
-  
-
-<span />
-
-<span />
-
-<span />
diff --git a/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonIOS.mdx b/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonIOS.mdx
deleted file mode 100644
index 83db4152cc..0000000000
--- a/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonIOS.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: RadioButton.IOS
----
-
-import PropTable from '@site/src/components/PropTable.tsx';
-import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
-import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
-import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
-import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
-
-
-
-
-  <ScreenshotTabs screenshotData={{"enabled":"screenshots/radio-enabled.ios.png","disabled":"screenshots/radio-disabled.ios.png"}} baseUrl="/"/>
-  
-
-Radio buttons allow the selection a single option from a set.
-This component follows platform guidelines for iOS, but can be used
-on any platform.
-
-
-
-
-  ## Props
-  ### TouchableRipple props
-  <ExtendsLink name="TouchableRipple props" link="https://callstack.github.io/react-native-paper/docs/components/TouchableRipple" />
-
-  
-<div>
-
-### value (required) 
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonIOS" prop="value" />
-  
-<div>
-
-### status  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonIOS" prop="status" />
-  
-<div>
-
-### disabled  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonIOS" prop="disabled" />
-  
-<div>
-
-### onPress  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonIOS" prop="onPress" />
-  
-<div>
-
-### color  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonIOS" prop="color" />
-  
-<div>
-
-### theme  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonIOS" prop="theme" />
-  
-<div>
-
-### testID  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonIOS" prop="testID" />
-  
-  
-
-<span />
-
-<span />
-
-<span />
diff --git a/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonItem.mdx b/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonItem.mdx
index c5f863d44b..34aaf28c73 100644
--- a/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonItem.mdx
+++ b/docs/versioned_docs/version-6.x/components/RadioButton/RadioButtonItem.mdx
@@ -171,14 +171,6 @@ export default MyComponent;
   
 <div>
 
-### mode  
-
-</div>
-  
-  <PropTable componentLink="RadioButton/RadioButtonItem" prop="mode" />
-  
-<div>
-
 ### position  
 
 </div>
diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
index b6f8a06da8..ef5bfd2fae 100644
--- a/example/src/Examples/RadioButtonExample.tsx
+++ b/example/src/Examples/RadioButtonExample.tsx
@@ -46,6 +46,16 @@ const RadioButtonExample = () => {
         status={checked === 'normal-item' ? 'checked' : 'unchecked'}
         onPress={() => setChecked('normal-item')}
       />
+      <View style={styles.row}>
+        <Text>Error</Text>
+        <RadioButton value="error" status="checked" error />
+      </View>
+      <RadioButton.Item
+        label="Error - Item"
+        value="error-item"
+        status="checked"
+        error
+      />
       <View style={styles.row}>
         <Text>Checked (Disabled)</Text>
         <RadioButton value="first" status="checked" disabled />
diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx
index 5b068eb854..efd4eee32a 100644
--- a/example/src/Examples/RadioButtonItemExample.tsx
+++ b/example/src/Examples/RadioButtonItemExample.tsx
@@ -10,36 +10,44 @@ const RadioButtonItemExample = () => {
   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"
+        label="Default (trailing control)"
         status={checkedDefault ? 'checked' : 'unchecked'}
         onPress={() => setCheckedDefault(!checkedDefault)}
         value="default"
       />
       <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>
   );

From e0b88a59c64cb7f1dc4f3bd19f8857a2e1208b9b Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 13:41:17 +0200
Subject: [PATCH 6/8] fix(radio-button): apply disabled opacity, animate group
 selection

---
 src/components/RadioButton/RadioButton.tsx    | 63 ++++++++++---------
 .../__snapshots__/RadioButton.test.tsx.snap   |  3 +
 .../RadioButtonGroup.test.tsx.snap            |  1 +
 .../RadioButtonItem.test.tsx.snap             |  2 +
 4 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 40e39a79bb..25628ca5f8 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -96,9 +96,18 @@ const RadioButton = ({
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const context = React.useContext(RadioButtonContext);
+
+  const checked =
+    isChecked({
+      contextValue: context?.value,
+      status,
+      value,
+    }) === 'checked';
+
   // Single selection animation path: the dot scales in (with a slight
   // overshoot) when the radio becomes checked. The ring outline stays a
-  // constant width.
+  // constant width. Keyed on `checked` (not `status`) so radios driven by a
+  // `RadioButton.Group` animate too.
   const { current: radioAnim } = React.useRef<Animated.Value>(
     new Animated.Value(1)
   );
@@ -114,7 +123,7 @@ const RadioButton = ({
       return;
     }
 
-    if (status === 'checked') {
+    if (checked) {
       radioAnim.setValue(1.2);
 
       Animated.timing(radioAnim, {
@@ -123,23 +132,17 @@ const RadioButton = ({
         useNativeDriver: true,
       }).start();
     }
-  }, [status, radioAnim, scale]);
-
-  const checked =
-    isChecked({
-      contextValue: context?.value,
-      status,
-      value,
-    }) === 'checked';
-
-  const { selectionControlColor } = getSelectionControlColor({
-    theme,
-    disabled,
-    checked,
-    error,
-    customColor: rest.color,
-    customUncheckedColor: rest.uncheckedColor,
-  });
+  }, [checked, radioAnim, scale]);
+
+  const { selectionControlColor, selectionControlOpacity } =
+    getSelectionControlColor({
+      theme,
+      disabled,
+      checked,
+      error,
+      customColor: rest.color,
+      customUncheckedColor: rest.uncheckedColor,
+    });
 
   // When `accessible={false}` is passed (typically by `RadioButton.Item`,
   // which owns the a11y tree for the wrapped row), suppress our own role and
@@ -157,18 +160,15 @@ const RadioButton = ({
     <TouchableRipple
       {...rest}
       borderless
-      onPress={
-        disabled
-          ? undefined
-          : (event) => {
-              handlePress({
-                onPress,
-                onValueChange: context?.onValueChange,
-                value,
-                event,
-              });
-            }
-      }
+      onPress={(event) => {
+        handlePress({
+          onPress,
+          onValueChange: context?.onValueChange,
+          value,
+          event,
+        });
+      }}
+      disabled={disabled}
       {...accessibilityProps}
       style={styles.container}
       testID={testID}
@@ -179,6 +179,7 @@ const RadioButton = ({
           styles.radio,
           {
             borderColor: selectionControlColor,
+            opacity: selectionControlOpacity,
           },
         ]}
       >
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index fe1ffd59aa..f3f922fd7c 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -56,6 +56,7 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
         },
         {
           "borderColor": "rgba(73, 69, 79, 1)",
+          "opacity": 1,
         },
       ]
     }
@@ -118,6 +119,7 @@ exports[`RadioButton renders properly 1`] = `
         },
         {
           "borderColor": "rgba(73, 69, 79, 1)",
+          "opacity": 1,
         },
       ]
     }
@@ -180,6 +182,7 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
         },
         {
           "borderColor": "rgba(103, 80, 164, 1)",
+          "opacity": 1,
         },
       ]
     }
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 50526cb7f9..865968feaf 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -58,6 +58,7 @@ exports[`RadioButtonGroup renders properly 1`] = `
           },
           {
             "borderColor": "rgba(103, 80, 164, 1)",
+            "opacity": 1,
           },
         ]
       }
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
index 05ab0cede7..a907f9f739 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap
@@ -109,6 +109,7 @@ exports[`can render leading radio button control 1`] = `
             },
             {
               "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 1,
             },
           ]
         }
@@ -303,6 +304,7 @@ exports[`renders unchecked 1`] = `
             },
             {
               "borderColor": "rgba(73, 69, 79, 1)",
+              "opacity": 1,
             },
           ]
         }

From 78acf9a5aee6ac872c4a17cff6dd94981a06bd95 Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 14:02:49 +0200
Subject: [PATCH 7/8] docs(radio-button): dim disabled labels, add unchecked
 error examples

---
 example/src/Examples/RadioButtonExample.tsx | 23 +++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
index ef5bfd2fae..c30e49e00f 100644
--- a/example/src/Examples/RadioButtonExample.tsx
+++ b/example/src/Examples/RadioButtonExample.tsx
@@ -47,21 +47,31 @@ const RadioButtonExample = () => {
         onPress={() => setChecked('normal-item')}
       />
       <View style={styles.row}>
-        <Text>Error</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"
+        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>Checked (Disabled)</Text>
+        <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
@@ -93,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;

From cb74fc85705c7e12aa4caf46659225e56e0fe8db Mon Sep 17 00:00:00 2001
From: Bartek Dybowski <b.dybowski@gmail.com>
Date: Fri, 19 Jun 2026 14:13:57 +0200
Subject: [PATCH 8/8] refactor(radio-button): migrate dot animation to
 reanimated

---
 src/components/RadioButton/RadioButton.tsx    | 56 +++++++++++++------
 .../__snapshots__/RadioButton.test.tsx.snap   | 29 ++++++----
 .../RadioButtonGroup.test.tsx.snap            | 29 ++++++----
 3 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 25628ca5f8..384f734d3d 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,10 +1,19 @@
 import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
 import { RadioButtonContext } from './RadioButtonGroup';
 import { RadioButtonTokens } from './tokens';
 import { getSelectionControlColor, handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
 import type { $RemoveChildren, ThemeProp } from '../../types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
@@ -104,17 +113,30 @@ const RadioButton = ({
       value,
     }) === 'checked';
 
+  const reduceMotion = useReduceMotion();
+  const reanimatedReduceMotion = reduceMotion
+    ? ReduceMotion.Always
+    : ReduceMotion.Never;
+
   // Single selection animation path: the dot scales in (with a slight
   // overshoot) when the radio becomes checked. The ring outline stays a
   // constant width. Keyed on `checked` (not `status`) so radios driven by a
   // `RadioButton.Group` animate too.
-  const { current: radioAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(1)
-  );
-
+  const dotScale = useSharedValue(1);
   const isFirstRendering = React.useRef<boolean>(true);
 
-  const { scale } = theme.animation;
+  const dotTimingConfig = React.useMemo(
+    () => ({
+      duration: theme.motion.duration.short3,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      reduceMotion: reanimatedReduceMotion,
+    }),
+    [
+      theme.motion.duration.short3,
+      theme.motion.easing.standard,
+      reanimatedReduceMotion,
+    ]
+  );
 
   React.useEffect(() => {
     // Do not run animation on very first rendering
@@ -124,15 +146,15 @@ const RadioButton = ({
     }
 
     if (checked) {
-      radioAnim.setValue(1.2);
-
-      Animated.timing(radioAnim, {
-        toValue: 1,
-        duration: 150 * scale,
-        useNativeDriver: true,
-      }).start();
+      // Jump to the overshoot value, then settle back to 1.
+      dotScale.value = 1.2;
+      dotScale.value = withTiming(1, dotTimingConfig);
     }
-  }, [checked, radioAnim, scale]);
+  }, [checked, dotScale, dotTimingConfig]);
+
+  const dotAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: dotScale.value }],
+  }));
 
   const { selectionControlColor, selectionControlOpacity } =
     getSelectionControlColor({
@@ -188,10 +210,8 @@ const RadioButton = ({
             <Animated.View
               style={[
                 styles.dot,
-                {
-                  backgroundColor: selectionControlColor,
-                  transform: [{ scale: radioAnim }],
-                },
+                { backgroundColor: selectionControlColor },
+                dotAnimatedStyle,
               ]}
             />
           </View>
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index f3f922fd7c..f6b7f805ca 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -205,19 +205,24 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "backgroundColor": "rgba(103, 80, 164, 1)",
-            "borderRadius": 5,
-            "height": 10,
-            "transform": [
-              {
-                "scale": 1,
-              },
-            ],
-            "width": 10,
-          }
+          [
+            {
+              "borderRadius": 5,
+              "height": 10,
+              "width": 10,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+            },
+            {
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+            },
+          ]
         }
       />
     </View>
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 865968feaf..542e61d049 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -81,19 +81,24 @@ exports[`RadioButtonGroup renders properly 1`] = `
         }
       >
         <View
-          collapsable={false}
           style={
-            {
-              "backgroundColor": "rgba(103, 80, 164, 1)",
-              "borderRadius": 5,
-              "height": 10,
-              "transform": [
-                {
-                  "scale": 1,
-                },
-              ],
-              "width": 10,
-            }
+            [
+              {
+                "borderRadius": 5,
+                "height": 10,
+                "width": 10,
+              },
+              {
+                "backgroundColor": "rgba(103, 80, 164, 1)",
+              },
+              {
+                "transform": [
+                  {
+                    "scale": 1,
+                  },
+                ],
+              },
+            ]
           }
         />
       </View>