diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index c50923c3..8eb0e7a6 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -5,10 +5,12 @@ import {
   View,
   type ViewProps,
 } from 'react-native'
-import Animated, { LinearTransition } from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 
 import { StyleSheet } from 'react-native-unistyles'
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
 export interface RadioButtonProps
   extends AccessibilityProps, Pick<ViewProps, 'testID'> {
   /** Обработчик нажатия на кнопку */
@@ -50,13 +52,8 @@ export const RadioButton = memo<RadioButtonProps>(
 
     return (
       <View>
-        {!disabled && state === 'danger' && (
-          <Animated.View
-            layout={LinearTransition.duration(100)}
-            style={radioStyles.outline}
-          />
-        )}
-        <Pressable
+        <Animated.View pointerEvents='none' style={radioStyles.outline} />
+        <AnimatedPressable
           disabled={disabled}
           style={radioStyles.container}
           testID={testID || 'RadioButton_Pressable'}
@@ -65,50 +62,44 @@ export const RadioButton = memo<RadioButtonProps>(
           onPressOut={onPressOut}
           {...rest}
         >
-          <View style={radioStyles.center} />
-        </Pressable>
+          <Animated.View style={radioStyles.center} />
+        </AnimatedPressable>
       </View>
     )
   }
 )
 
-const radioStyles = StyleSheet.create(({ theme }) => ({
+const radioStyles = StyleSheet.create(({ theme, border }) => ({
   container: {
     width: theme.Form.RadioButton.radiobuttonWidth,
     height: theme.Form.RadioButton.radiobuttonHeight,
-    borderRadius: theme.Form.RadioButton.radiobuttonWidth,
+    borderRadius: border.Radius['rounded-full'],
+    borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    margin: theme.General.focusShadowWidth,
+    transitionProperty: ['borderColor', 'backgroundColor'],
+    transitionDuration: 100,
     variants: {
       checked: {
         true: {
           borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
           backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-          borderWidth: 5,
         },
         false: {
           borderColor: theme.Form.InputText.inputBorderColor,
-          borderWidth: 1,
           backgroundColor: theme.Form.InputText.inputBg,
         },
       },
-      pressed: {
-        true: { borderColor: theme.Form.InputText.inputHoverBorderColor },
-        false: {},
-      },
-      state: {
-        danger: { borderColor: theme.Form.InputText.inputErrorBorderColor },
-      },
+      pressed: { true: {}, false: {} },
       disabled: {
         true: {
           borderColor: theme.Form.InputText.inputBorderColor,
           backgroundColor: theme.Button.Disabled.disabledButtonBg,
           opacity: 0.6,
-          borderWidth: 1,
         },
         false: {},
       },
+      state: { danger: {}, default: {} },
     },
     compoundVariants: [
       {
@@ -116,27 +107,28 @@ const radioStyles = StyleSheet.create(({ theme }) => ({
         pressed: 'true',
         styles: {
           borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
-          backgroundColor:
-            theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
-          borderWidth: 5,
+          backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBg,
         },
       },
       {
-        state: 'danger',
         checked: 'true',
+        disabled: 'true',
         styles: {
-          borderColor: theme.Form.InputText.inputErrorBorderColor,
+          borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
           backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-          borderWidth: 1,
         },
       },
       {
-        checked: 'true',
-        disabled: 'true',
+        state: 'danger',
+        disabled: 'false',
+        checked: 'false',
+        styles: { borderColor: theme.Form.InputText.inputErrorBorderColor },
+      },
+      {
+        checked: 'false',
+        pressed: 'true',
         styles: {
-          borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-          backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-          borderWidth: 5,
+          borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
         },
       },
     ],
@@ -144,31 +136,29 @@ const radioStyles = StyleSheet.create(({ theme }) => ({
   center: {
     width: theme.Form.RadioButton.radiobuttonIconSize,
     height: theme.Form.RadioButton.radiobuttonIconSize,
-    borderRadius: theme.Form.RadioButton.radiobuttonIconSize,
+    borderRadius: border.Radius['rounded-full'],
     backgroundColor: theme.Form.InputText.inputBg,
-    variants: {
-      checked: { true: {}, false: {} },
-      disabled: { true: {}, false: {} },
-    },
-    compoundVariants: [
-      {
-        disabled: 'true',
-        checked: 'false',
-        styles: { backgroundColor: 'transparent' },
-      },
-    ],
+    transitionProperty: ['opacity'],
+    transitionDuration: 100,
+    variants: { checked: { false: { opacity: 0 }, true: { opacity: 1 } } },
   },
   outline: {
     position: 'absolute',
+    top: -theme.General.focusShadowWidth,
+    left: -theme.General.focusShadowWidth,
     width:
       theme.Form.RadioButton.radiobuttonWidth +
       theme.General.focusShadowWidth * 2,
     height:
       theme.Form.RadioButton.radiobuttonHeight +
       theme.General.focusShadowWidth * 2,
-    borderRadius:
-      theme.Form.RadioButton.radiobuttonHeight +
-      theme.General.focusShadowWidth * 2,
+    borderRadius: border.Radius['rounded-full'],
     backgroundColor: theme.General.focusOutlineErrorColor,
+    transitionProperty: 'opacity',
+    transitionDuration: 100,
+    variants: {
+      state: { danger: { opacity: 1 }, default: { opacity: 0 } },
+      disabled: { true: { opacity: 0 } },
+    },
   },
 }))
diff --git a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap
index 86e144d6..cb279583 100644
--- a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap
@@ -17,27 +17,28 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger
     jestInlineStyle={
       {
         "backgroundColor": "#fff0f0",
-        "borderRadius": 28,
+        "borderRadius": 100,
         "height": 28,
+        "left": -3.5,
+        "opacity": 1,
         "position": "absolute",
+        "top": -3.5,
+        "transitionDuration": 100,
+        "transitionProperty": "opacity",
         "width": 28,
       }
     }
-    layout={
-      LinearTransition {
-        "build": [Function],
-        "durationV": 100,
-        "randomizeDelay": false,
-        "reduceMotionV": "system",
-      }
-    }
+    pointerEvents="none"
     style={
       [
         {
           "backgroundColor": "#fff0f0",
-          "borderRadius": 28,
+          "borderRadius": 100,
           "height": 28,
+          "left": -3.5,
+          "opacity": 1,
           "position": "absolute",
+          "top": -3.5,
           "width": 28,
         },
       ]
@@ -64,6 +65,33 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger
     accessible={true}
     collapsable={false}
     focusable={true}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#db3424",
+        "borderRadius": 100,
+        "borderWidth": 1,
+        "height": 21,
+        "justifyContent": "center",
+        "transitionDuration": 100,
+        "transitionProperty": [
+          "borderColor",
+          "backgroundColor",
+        ],
+        "width": 21,
+      }
+    }
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -74,29 +102,57 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderColor": "#db3424",
-        "borderRadius": 21,
-        "borderWidth": 1,
-        "height": 21,
-        "justifyContent": "center",
-        "margin": 3.5,
-        "width": 21,
-      }
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderColor": "#db3424",
+          "borderRadius": 100,
+          "borderWidth": 1,
+          "height": 21,
+          "justifyContent": "center",
+          "width": 21,
+        },
+      ]
     }
     testID="RadioButton_Pressable"
   >
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 10.5,
+          "borderRadius": 100,
           "height": 10.5,
+          "opacity": 0,
+          "transitionDuration": 100,
+          "transitionProperty": [
+            "opacity",
+          ],
           "width": 10.5,
         }
       }
+      style={
+        [
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 100,
+            "height": 10.5,
+            "opacity": 0,
+            "width": 10.5,
+          },
+        ]
+      }
     />
   </View>
 </View>
@@ -104,6 +160,46 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger
 
 exports[`RadioButton snapshots checked = false, disabled = false, state = default 1`] = `
 <View>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "backgroundColor": "#fff0f0",
+        "borderRadius": 100,
+        "height": 28,
+        "left": -3.5,
+        "position": "absolute",
+        "top": -3.5,
+        "transitionDuration": 100,
+        "transitionProperty": "opacity",
+        "width": 28,
+      }
+    }
+    pointerEvents="none"
+    style={
+      [
+        {
+          "backgroundColor": "#fff0f0",
+          "borderRadius": 100,
+          "height": 28,
+          "left": -3.5,
+          "position": "absolute",
+          "top": -3.5,
+          "width": 28,
+        },
+      ]
+    }
+  />
   <View
     accessibilityState={
       {
@@ -125,6 +221,33 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul
     accessible={true}
     collapsable={false}
     focusable={true}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#cecfd2",
+        "borderRadius": 100,
+        "borderWidth": 1,
+        "height": 21,
+        "justifyContent": "center",
+        "transitionDuration": 100,
+        "transitionProperty": [
+          "borderColor",
+          "backgroundColor",
+        ],
+        "width": 21,
+      }
+    }
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -135,29 +258,57 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderColor": "#cecfd2",
-        "borderRadius": 21,
-        "borderWidth": 1,
-        "height": 21,
-        "justifyContent": "center",
-        "margin": 3.5,
-        "width": 21,
-      }
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderColor": "#cecfd2",
+          "borderRadius": 100,
+          "borderWidth": 1,
+          "height": 21,
+          "justifyContent": "center",
+          "width": 21,
+        },
+      ]
     }
     testID="RadioButton_Pressable"
   >
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 10.5,
+          "borderRadius": 100,
           "height": 10.5,
+          "opacity": 0,
+          "transitionDuration": 100,
+          "transitionProperty": [
+            "opacity",
+          ],
           "width": 10.5,
         }
       }
+      style={
+        [
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 100,
+            "height": 10.5,
+            "opacity": 0,
+            "width": 10.5,
+          },
+        ]
+      }
     />
   </View>
 </View>
@@ -165,6 +316,48 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul
 
 exports[`RadioButton snapshots checked = false, disabled = true, state = default 1`] = `
 <View>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "backgroundColor": "#fff0f0",
+        "borderRadius": 100,
+        "height": 28,
+        "left": -3.5,
+        "opacity": 0,
+        "position": "absolute",
+        "top": -3.5,
+        "transitionDuration": 100,
+        "transitionProperty": "opacity",
+        "width": 28,
+      }
+    }
+    pointerEvents="none"
+    style={
+      [
+        {
+          "backgroundColor": "#fff0f0",
+          "borderRadius": 100,
+          "height": 28,
+          "left": -3.5,
+          "opacity": 0,
+          "position": "absolute",
+          "top": -3.5,
+          "width": 28,
+        },
+      ]
+    }
+  />
   <View
     accessibilityState={
       {
@@ -186,40 +379,96 @@ exports[`RadioButton snapshots checked = false, disabled = true, state = default
     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={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
       {
         "alignItems": "center",
         "backgroundColor": "#e2e2e4",
         "borderColor": "#cecfd2",
-        "borderRadius": 21,
+        "borderRadius": 100,
         "borderWidth": 1,
         "height": 21,
         "justifyContent": "center",
-        "margin": 3.5,
         "opacity": 0.6,
+        "transitionDuration": 100,
+        "transitionProperty": [
+          "borderColor",
+          "backgroundColor",
+        ],
         "width": 21,
       }
     }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#e2e2e4",
+          "borderColor": "#cecfd2",
+          "borderRadius": 100,
+          "borderWidth": 1,
+          "height": 21,
+          "justifyContent": "center",
+          "opacity": 0.6,
+          "width": 21,
+        },
+      ]
+    }
     testID="RadioButton_Pressable"
   >
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 10.5,
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 100,
           "height": 10.5,
+          "opacity": 0,
+          "transitionDuration": 100,
+          "transitionProperty": [
+            "opacity",
+          ],
           "width": 10.5,
         }
       }
+      style={
+        [
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 100,
+            "height": 10.5,
+            "opacity": 0,
+            "width": 10.5,
+          },
+        ]
+      }
     />
   </View>
 </View>
@@ -242,27 +491,28 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger
     jestInlineStyle={
       {
         "backgroundColor": "#fff0f0",
-        "borderRadius": 28,
+        "borderRadius": 100,
         "height": 28,
+        "left": -3.5,
+        "opacity": 1,
         "position": "absolute",
+        "top": -3.5,
+        "transitionDuration": 100,
+        "transitionProperty": "opacity",
         "width": 28,
       }
     }
-    layout={
-      LinearTransition {
-        "build": [Function],
-        "durationV": 100,
-        "randomizeDelay": false,
-        "reduceMotionV": "system",
-      }
-    }
+    pointerEvents="none"
     style={
       [
         {
           "backgroundColor": "#fff0f0",
-          "borderRadius": 28,
+          "borderRadius": 100,
           "height": 28,
+          "left": -3.5,
+          "opacity": 1,
           "position": "absolute",
+          "top": -3.5,
           "width": 28,
         },
       ]
@@ -289,6 +539,33 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger
     accessible={true}
     collapsable={false}
     focusable={true}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#2b2e33",
+        "borderColor": "#2b2e33",
+        "borderRadius": 100,
+        "borderWidth": 1,
+        "height": 21,
+        "justifyContent": "center",
+        "transitionDuration": 100,
+        "transitionProperty": [
+          "borderColor",
+          "backgroundColor",
+        ],
+        "width": 21,
+      }
+    }
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -299,29 +576,57 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#2b2e33",
-        "borderColor": "#db3424",
-        "borderRadius": 21,
-        "borderWidth": 1,
-        "height": 21,
-        "justifyContent": "center",
-        "margin": 3.5,
-        "width": 21,
-      }
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#2b2e33",
+          "borderColor": "#2b2e33",
+          "borderRadius": 100,
+          "borderWidth": 1,
+          "height": 21,
+          "justifyContent": "center",
+          "width": 21,
+        },
+      ]
     }
     testID="RadioButton_Pressable"
   >
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 10.5,
+          "borderRadius": 100,
           "height": 10.5,
+          "opacity": 1,
+          "transitionDuration": 100,
+          "transitionProperty": [
+            "opacity",
+          ],
           "width": 10.5,
         }
       }
+      style={
+        [
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 100,
+            "height": 10.5,
+            "opacity": 1,
+            "width": 10.5,
+          },
+        ]
+      }
     />
   </View>
 </View>
@@ -329,6 +634,46 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger
 
 exports[`RadioButton snapshots checked = true, disabled = false, state = default 1`] = `
 <View>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "backgroundColor": "#fff0f0",
+        "borderRadius": 100,
+        "height": 28,
+        "left": -3.5,
+        "position": "absolute",
+        "top": -3.5,
+        "transitionDuration": 100,
+        "transitionProperty": "opacity",
+        "width": 28,
+      }
+    }
+    pointerEvents="none"
+    style={
+      [
+        {
+          "backgroundColor": "#fff0f0",
+          "borderRadius": 100,
+          "height": 28,
+          "left": -3.5,
+          "position": "absolute",
+          "top": -3.5,
+          "width": 28,
+        },
+      ]
+    }
+  />
   <View
     accessibilityState={
       {
@@ -350,6 +695,33 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default
     accessible={true}
     collapsable={false}
     focusable={true}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#2b2e33",
+        "borderColor": "#2b2e33",
+        "borderRadius": 100,
+        "borderWidth": 1,
+        "height": 21,
+        "justifyContent": "center",
+        "transitionDuration": 100,
+        "transitionProperty": [
+          "borderColor",
+          "backgroundColor",
+        ],
+        "width": 21,
+      }
+    }
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -360,29 +732,57 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#2b2e33",
-        "borderColor": "#2b2e33",
-        "borderRadius": 21,
-        "borderWidth": 5,
-        "height": 21,
-        "justifyContent": "center",
-        "margin": 3.5,
-        "width": 21,
-      }
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#2b2e33",
+          "borderColor": "#2b2e33",
+          "borderRadius": 100,
+          "borderWidth": 1,
+          "height": 21,
+          "justifyContent": "center",
+          "width": 21,
+        },
+      ]
     }
     testID="RadioButton_Pressable"
   >
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 10.5,
+          "borderRadius": 100,
           "height": 10.5,
+          "opacity": 1,
+          "transitionDuration": 100,
+          "transitionProperty": [
+            "opacity",
+          ],
           "width": 10.5,
         }
       }
+      style={
+        [
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 100,
+            "height": 10.5,
+            "opacity": 1,
+            "width": 10.5,
+          },
+        ]
+      }
     />
   </View>
 </View>
@@ -390,6 +790,48 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default
 
 exports[`RadioButton snapshots checked = true, disabled = true, state = default 1`] = `
 <View>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "backgroundColor": "#fff0f0",
+        "borderRadius": 100,
+        "height": 28,
+        "left": -3.5,
+        "opacity": 0,
+        "position": "absolute",
+        "top": -3.5,
+        "transitionDuration": 100,
+        "transitionProperty": "opacity",
+        "width": 28,
+      }
+    }
+    pointerEvents="none"
+    style={
+      [
+        {
+          "backgroundColor": "#fff0f0",
+          "borderRadius": 100,
+          "height": 28,
+          "left": -3.5,
+          "opacity": 0,
+          "position": "absolute",
+          "top": -3.5,
+          "width": 28,
+        },
+      ]
+    }
+  />
   <View
     accessibilityState={
       {
@@ -411,6 +853,34 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default
     accessible={true}
     collapsable={false}
     focusable={true}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#2b2e33",
+        "borderColor": "#2b2e33",
+        "borderRadius": 100,
+        "borderWidth": 1,
+        "height": 21,
+        "justifyContent": "center",
+        "opacity": 0.6,
+        "transitionDuration": 100,
+        "transitionProperty": [
+          "borderColor",
+          "backgroundColor",
+        ],
+        "width": 21,
+      }
+    }
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -421,30 +891,58 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#2b2e33",
-        "borderColor": "#2b2e33",
-        "borderRadius": 21,
-        "borderWidth": 5,
-        "height": 21,
-        "justifyContent": "center",
-        "margin": 3.5,
-        "opacity": 0.6,
-        "width": 21,
-      }
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#2b2e33",
+          "borderColor": "#2b2e33",
+          "borderRadius": 100,
+          "borderWidth": 1,
+          "height": 21,
+          "justifyContent": "center",
+          "opacity": 0.6,
+          "width": 21,
+        },
+      ]
     }
     testID="RadioButton_Pressable"
   >
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 10.5,
+          "borderRadius": 100,
           "height": 10.5,
+          "opacity": 1,
+          "transitionDuration": 100,
+          "transitionProperty": [
+            "opacity",
+          ],
           "width": 10.5,
         }
       }
+      style={
+        [
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 100,
+            "height": 10.5,
+            "opacity": 1,
+            "width": 10.5,
+          },
+        ]
+      }
     />
   </View>
 </View>
@@ -452,6 +950,46 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default
 
 exports[`RadioButton snapshots default 1`] = `
 <View>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "backgroundColor": "#fff0f0",
+        "borderRadius": 100,
+        "height": 28,
+        "left": -3.5,
+        "position": "absolute",
+        "top": -3.5,
+        "transitionDuration": 100,
+        "transitionProperty": "opacity",
+        "width": 28,
+      }
+    }
+    pointerEvents="none"
+    style={
+      [
+        {
+          "backgroundColor": "#fff0f0",
+          "borderRadius": 100,
+          "height": 28,
+          "left": -3.5,
+          "position": "absolute",
+          "top": -3.5,
+          "width": 28,
+        },
+      ]
+    }
+  />
   <View
     accessibilityState={
       {
@@ -473,6 +1011,33 @@ exports[`RadioButton snapshots default 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#cecfd2",
+        "borderRadius": 100,
+        "borderWidth": 1,
+        "height": 21,
+        "justifyContent": "center",
+        "transitionDuration": 100,
+        "transitionProperty": [
+          "borderColor",
+          "backgroundColor",
+        ],
+        "width": 21,
+      }
+    }
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -483,29 +1048,57 @@ exports[`RadioButton snapshots default 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderColor": "#cecfd2",
-        "borderRadius": 21,
-        "borderWidth": 1,
-        "height": 21,
-        "justifyContent": "center",
-        "margin": 3.5,
-        "width": 21,
-      }
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderColor": "#cecfd2",
+          "borderRadius": 100,
+          "borderWidth": 1,
+          "height": 21,
+          "justifyContent": "center",
+          "width": 21,
+        },
+      ]
     }
     testID="RadioButton_Pressable"
   >
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         {
           "backgroundColor": "#ffffff",
-          "borderRadius": 10.5,
+          "borderRadius": 100,
           "height": 10.5,
+          "opacity": 0,
+          "transitionDuration": 100,
+          "transitionProperty": [
+            "opacity",
+          ],
           "width": 10.5,
         }
       }
+      style={
+        [
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 100,
+            "height": 10.5,
+            "opacity": 0,
+            "width": 10.5,
+          },
+        ]
+      }
     />
   </View>
 </View>