diff --git a/docs/6.x/docs/components/Card/Card.mdx b/docs/6.x/docs/components/Card/Card.mdx
index 0248a53318..de2e1b19cb 100644
--- a/docs/6.x/docs/components/Card/Card.mdx
+++ b/docs/6.x/docs/components/Card/Card.mdx
@@ -159,6 +159,14 @@ export default MyComponent;
 
   <PropTable componentLink="Card/Card" prop="accessible" />
 
+<div>
+
+### ref
+
+</div>
+
+  <PropTable componentLink="Card/Card" prop="ref" />
+
 
 
 <span />
diff --git a/docs/6.x/docs/components/Chip/Chip.mdx b/docs/6.x/docs/components/Chip/Chip.mdx
index f712768036..f1a72dc03d 100644
--- a/docs/6.x/docs/components/Chip/Chip.mdx
+++ b/docs/6.x/docs/components/Chip/Chip.mdx
@@ -268,6 +268,14 @@ export default MyComponent;
 
 <div>
 
+### ref
+
+</div>
+
+  <PropTable componentLink="Chip/Chip" prop="ref" />
+
+<div>
+
 ### role
 
 </div>
diff --git a/docs/6.x/docs/components/Modal.mdx b/docs/6.x/docs/components/Modal.mdx
index 72691042b1..f94e758cad 100644
--- a/docs/6.x/docs/components/Modal.mdx
+++ b/docs/6.x/docs/components/Modal.mdx
@@ -28,12 +28,18 @@ const MyComponent = () => {
 
   const showModal = () => setVisible(true);
   const hideModal = () => setVisible(false);
-  const containerStyle = { backgroundColor: 'white', padding: 20 };
+
+  const containerStyle = { padding: 20 };
 
   return (
     <PaperProvider>
       <Portal>
-        <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
+        <Modal
+          visible={visible}
+          onDismiss={hideModal}
+          contentBackgroundColor="white"
+          contentContainerStyle={containerStyle}
+        >
           <Text>Example Modal.  Click outside this area to dismiss.</Text>
         </Modal>
       </Portal>
@@ -111,6 +117,30 @@ export default MyComponent;
 
 <div>
 
+### contentBackgroundColor
+
+</div>
+
+  <PropTable componentLink="Modal" prop="contentBackgroundColor" />
+
+<div>
+
+### contentBorderRadius
+
+</div>
+
+  <PropTable componentLink="Modal" prop="contentBorderRadius" />
+
+<div>
+
+### contentElevation
+
+</div>
+
+  <PropTable componentLink="Modal" prop="contentElevation" />
+
+<div>
+
 ### style
 
 </div>
diff --git a/docs/6.x/docs/components/Surface.mdx b/docs/6.x/docs/components/Surface.mdx
index 841a74e3e4..4add0da5c0 100644
--- a/docs/6.x/docs/components/Surface.mdx
+++ b/docs/6.x/docs/components/Surface.mdx
@@ -9,9 +9,9 @@ import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
 import ExtendedExample from '@docs/components/ExtendedExample.tsx';
 
 Surface is a basic container that can give depth to an element with elevation shadow.
-On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
-See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
-Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+
+On Android, Surface uses the native `elevation` style,
+and falls back to shadows that approximate the elevation on other platforms.
 
 
 
@@ -26,7 +26,7 @@ import { Surface, Text } from 'react-native-paper';
 import { StyleSheet } from 'react-native';
 
 const MyComponent = () => (
-  <Surface style={styles.surface} elevation={4}>
+  <Surface style={styles.surface} elevation={4} borderRadius={8}>
      <Text>Surface</Text>
   </Surface>
 );
@@ -35,9 +35,9 @@ export default MyComponent;
 
 const styles = StyleSheet.create({
   surface: {
-    padding: 8,
     height: 80,
     width: 80,
+    padding: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -52,11 +52,131 @@ const styles = StyleSheet.create({
 
 <div>
 
-### children (required)
+### backgroundColor
 
 </div>
 
-  <PropTable componentLink="Surface" prop="children" />
+  <PropTable componentLink="Surface" prop="backgroundColor" />
+
+<div>
+
+### borderRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderRadius" />
+
+<div>
+
+### borderBottomEndRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderBottomEndRadius" />
+
+<div>
+
+### borderBottomLeftRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderBottomLeftRadius" />
+
+<div>
+
+### borderBottomRightRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderBottomRightRadius" />
+
+<div>
+
+### borderBottomStartRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderBottomStartRadius" />
+
+<div>
+
+### borderEndEndRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderEndEndRadius" />
+
+<div>
+
+### borderEndStartRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderEndStartRadius" />
+
+<div>
+
+### borderStartEndRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderStartEndRadius" />
+
+<div>
+
+### borderStartStartRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderStartStartRadius" />
+
+<div>
+
+### borderTopEndRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderTopEndRadius" />
+
+<div>
+
+### borderTopLeftRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderTopLeftRadius" />
+
+<div>
+
+### borderTopRightRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderTopRightRadius" />
+
+<div>
+
+### borderTopStartRadius
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderTopStartRadius" />
+
+<div>
+
+### borderCurve
+
+</div>
+
+  <PropTable componentLink="Surface" prop="borderCurve" />
+
+<div>
+
+### transitionDuration
+
+</div>
+
+  <PropTable componentLink="Surface" prop="transitionDuration" />
 
 <div>
 
@@ -92,6 +212,14 @@ const styles = StyleSheet.create({
 
 <div>
 
+### children (required)
+
+</div>
+
+  <PropTable componentLink="Surface" prop="children" />
+
+<div>
+
 ### testID
 
 </div>
diff --git a/docs/6.x/docs/guides/migration.md b/docs/6.x/docs/guides/migration.md
index 1fcd32bd25..e488b101ef 100644
--- a/docs/6.x/docs/guides/migration.md
+++ b/docs/6.x/docs/guides/migration.md
@@ -4,8 +4,162 @@ title: Migration from Paper 5.x to 6.x
 
 TBC
 
+## General changes
+
+### Animations
+
+React Native Paper 6 uses [Reanimated](https://docs.swmansion.com/react-native-reanimated/) for animations as opposed to the built-in React Native `Animated` API.
+
+The following props now accept animated styles returned from `useAnimatedStyle`. They no longer accept `Animated.Value` or `Animated.AnimatedInterpolation` where these were previously supported:
+
+- `Appbar.Action` and `Appbar.BackAction`: `style`
+- `Badge`: `style`
+- `Banner`: `style`
+- `Button`: `style`
+- `Card`: `style`
+- `Chip`: `style`
+- `Dialog`: `style`
+- `FAB` and `FAB.Extended`: `style`
+- `IconButton`: `style`
+- `Menu`: `contentStyle`
+- `Modal`: `contentContainerStyle`
+- `Searchbar`: `style`
+- `Snackbar`: `style`
+- `Surface`: `style`
+- `ToggleButton`: `style`
+
+So you can use Reanimated's `useSharedValue` and `useAnimatedStyle` to animate these components instead of the React Native `Animated` API.
+
+```tsx
+import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+const MyComponent = () => {
+  const opacity = useSharedValue(1);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return <Card style={animatedStyle}>Button</Card>;
+};
+```
+
+### Elevation
+
+The `elevation` prop no longer accepts a React Native `Animated.Value` in the following components:
+
+- `Banner`
+- `Card`
+- `Searchbar`
+- `Snackbar`
+- `Surface`
+
+You can use an elevation level from `0` to `5` instead. Changes to the elevation level are animated automatically.
+
+### Styles
+
+The following component style props no longer support overriding their background color or border radius:
+
+- `Banner`
+- `Button`
+- `Card`
+- `Chip`
+- `Dialog`
+- `Menu`: `contentStyle`
+- `Searchbar`
+- `Snackbar`
+
+You can use the component's color prop where available, or override the corresponding theme colors.
+
+### Test IDs
+
+Some hardcoded and generated test IDs have been removed for the following components:
+
+- `Appbar.Header`: `${testID}-root-layer`
+- `Surface`: `surface` and `${testID}-outer-layer`
+
+You can specify a `testID` explicitly and use that value to query the component.
+
 ## Components
 
+### Appbar
+
+The `style` props for `Appbar` and `Appbar.Header` no longer accept `Animated.Value` or `Animated.AnimatedInterpolation`. They only accept static styles.
+
+The `style.elevation` property is no longer supported. Use the `elevated` prop to control Appbar elevation.
+
+### Surface
+
+- The `elevation` prop no longer accepts a React Native `Animated.Value`. Any `elevation` changes are animated automatically.
+- The `style` prop no longer configures elevation, background color, or border radius. Use these props instead:
+  - `elevation`
+  - `backgroundColor`
+  - `borderRadius`
+  - `borderBottomEndRadius`
+  - `borderBottomLeftRadius`
+  - `borderBottomRightRadius`
+  - `borderBottomStartRadius`
+  - `borderEndEndRadius`
+  - `borderEndStartRadius`
+  - `borderStartEndRadius`
+  - `borderStartStartRadius`
+  - `borderTopEndRadius`
+  - `borderTopLeftRadius`
+  - `borderTopRightRadius`
+  - `borderTopStartRadius`
+  - `borderCurve`
+- The `pointerEvents` prop is no longer supported as it's deprecated in React Native Web. You can specify `pointerEvents` in the `style` prop instead.
+- The `overflow: 'hidden'` style is no longer supported in `style` as it can clip shadows. You can nest a `View` inside the `Surface` and apply `overflow: 'hidden'` to that instead.
+- The default `testID` for `Surface` was removed. You can specify a `testID` explicitly if you need it.
+
+e.g.:
+
+```diff
+<Surface
+- style={{
+-   backgroundColor: 'red',
+-   borderRadius: 8,
+-   overflow: 'hidden',
+- }}
++ backgroundColor="red"
++ borderRadius={8}
+>
++ <View style={{ overflow: 'hidden' }}>
+    <Text>Content</Text>
++ </View>
+</Surface>
+```
+
+### Modal
+
+- The `contentContainerStyle` prop no longer configures the background color or any border radius property. We have added new props for these:
+  - `contentBackgroundColor`
+  - `contentBorderRadius`
+- We have added the `contentElevation` prop to configure the elevation of the modal content.
+
+e.g.:
+
+```diff
+<Modal
+  visible={visible}
+- contentContainerStyle={{
+-   backgroundColor: 'white',
+-   borderRadius: 8,
+-   padding: 20,
+- }}
++ contentBackgroundColor="white"
++ contentBorderRadius={8}
++ contentElevation={2}
++ contentContainerStyle={{ padding: 20 }}
+>
+  <Text>Content</Text>
+</Modal>
+```
+
+### Dialog
+
+- The default elevation changed from level `1` to level `3`.
+- The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead.
+
 ### TextInput
 
 The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.
diff --git a/docs/src/data/componentDocs6x.json b/docs/src/data/componentDocs6x.json
index 300c315b99..b223c9c0a8 100644
--- a/docs/src/data/componentDocs6x.json
+++ b/docs/src/data/componentDocs6x.json
@@ -153,7 +153,11 @@
             "tsType": {
               "name": "boolean"
             },
-            "description": "@supported Available in v5.x with theme version 3\nWhether Appbar background should have the elevation along with primary color pigment."
+            "description": "@supported Available in v5.x with theme version 3\nWhether Appbar background should have the elevation along with primary color pigment.",
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            }
           },
           "safeAreaInsets": {
             "required": false,
@@ -206,19 +210,23 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "Omit",
                   "elements": [
                     {
                       "name": "ViewStyle"
+                    },
+                    {
+                      "name": "literal",
+                      "value": "'elevation'"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "Omit<ViewStyle, 'elevation'>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<AppbarStyle>"
             },
             "description": ""
           }
@@ -304,19 +312,19 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "AnimatedStyle",
                   "elements": [
                     {
                       "name": "ViewStyle"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "AnimatedStyle<ViewStyle>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<AnimatedStyle<ViewStyle>>"
             },
             "description": ""
           },
@@ -416,19 +424,19 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "AnimatedStyle",
                   "elements": [
                     {
                       "name": "ViewStyle"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "AnimatedStyle<ViewStyle>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<AnimatedStyle<ViewStyle>>"
             },
             "description": ""
           },
@@ -694,19 +702,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "AppbarStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<AppbarStyle>"
             },
             "description": ""
           },
@@ -1032,10 +1034,16 @@
               "name": "StyleProp",
               "elements": [
                 {
-                  "name": "TextStyle"
+                  "name": "AnimatedStyle",
+                  "elements": [
+                    {
+                      "name": "TextStyle"
+                    }
+                  ],
+                  "raw": "AnimatedStyle<TextStyle>"
                 }
               ],
-              "raw": "StyleProp<TextStyle>"
+              "raw": "StyleProp<AnimatedStyle<TextStyle>>"
             },
             "description": ""
           },
@@ -1147,37 +1155,7 @@
           "elevation": {
             "required": false,
             "tsType": {
-              "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
-              "elements": [
-                {
-                  "name": "literal",
-                  "value": "0"
-                },
-                {
-                  "name": "literal",
-                  "value": "1"
-                },
-                {
-                  "name": "literal",
-                  "value": "2"
-                },
-                {
-                  "name": "literal",
-                  "value": "3"
-                },
-                {
-                  "name": "literal",
-                  "value": "4"
-                },
-                {
-                  "name": "literal",
-                  "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
-                }
-              ]
+              "name": "Elevation"
             },
             "description": "@supported Available in v5.x with theme version 3\nChanges Banner shadow and background on iOS and Android.",
             "defaultValue": {
@@ -1195,19 +1173,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": ""
           },
@@ -1234,7 +1206,35 @@
           "onShowAnimationFinished": {
             "required": false,
             "tsType": {
-              "name": "Animated.EndCallback"
+              "name": "signature",
+              "type": "function",
+              "raw": "(result: { finished: boolean }) => void",
+              "signature": {
+                "arguments": [
+                  {
+                    "name": "result",
+                    "type": {
+                      "name": "signature",
+                      "type": "object",
+                      "raw": "{ finished: boolean }",
+                      "signature": {
+                        "properties": [
+                          {
+                            "key": "finished",
+                            "value": {
+                              "name": "boolean",
+                              "required": true
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  }
+                ],
+                "return": {
+                  "name": "void"
+                }
+              }
             },
             "description": "\nOptional callback that will be called after the opening animation finished running normally",
             "defaultValue": {
@@ -1245,7 +1245,35 @@
           "onHideAnimationFinished": {
             "required": false,
             "tsType": {
-              "name": "Animated.EndCallback"
+              "name": "signature",
+              "type": "function",
+              "raw": "(result: { finished: boolean }) => void",
+              "signature": {
+                "arguments": [
+                  {
+                    "name": "result",
+                    "type": {
+                      "name": "signature",
+                      "type": "object",
+                      "raw": "{ finished: boolean }",
+                      "signature": {
+                        "properties": [
+                          {
+                            "key": "finished",
+                            "value": {
+                              "name": "boolean",
+                              "required": true
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  }
+                ],
+                "return": {
+                  "name": "void"
+                }
+              }
             },
             "description": "\nOptional callback that will be called after the closing animation finished running normally",
             "defaultValue": {
@@ -3226,19 +3254,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": ""
           },
@@ -3449,37 +3471,7 @@
           "elevation": {
             "required": false,
             "tsType": {
-              "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
-              "elements": [
-                {
-                  "name": "literal",
-                  "value": "0"
-                },
-                {
-                  "name": "literal",
-                  "value": "1"
-                },
-                {
-                  "name": "literal",
-                  "value": "2"
-                },
-                {
-                  "name": "literal",
-                  "value": "3"
-                },
-                {
-                  "name": "literal",
-                  "value": "4"
-                },
-                {
-                  "name": "literal",
-                  "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
-                }
-              ]
+              "name": "Elevation"
             },
             "description": "Changes Card shadow and background on iOS and Android.",
             "defaultValue": {
@@ -3503,19 +3495,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": ""
           },
@@ -3543,6 +3529,19 @@
               "name": "boolean"
             },
             "description": "Pass down accessible from card props to touchable"
+          },
+          "ref": {
+            "required": false,
+            "tsType": {
+              "name": "ReactRef",
+              "raw": "React.Ref<View>",
+              "elements": [
+                {
+                  "name": "View"
+                }
+              ]
+            },
+            "description": "Reference to the card container."
           }
         }
       },
@@ -4590,19 +4589,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": ""
           },
@@ -4646,6 +4639,19 @@
             },
             "description": "Specifies the largest possible scale a text font can reach."
           },
+          "ref": {
+            "required": false,
+            "tsType": {
+              "name": "ReactRef",
+              "raw": "React.Ref<View>",
+              "elements": [
+                {
+                  "name": "View"
+                }
+              ]
+            },
+            "description": "Reference to the chip container."
+          },
           "role": {
             "defaultValue": {
               "value": "'button'",
@@ -5273,19 +5279,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": ""
           },
@@ -6124,10 +6124,16 @@
               "name": "StyleProp",
               "elements": [
                 {
-                  "name": "ViewStyle"
+                  "name": "AnimatedStyle",
+                  "elements": [
+                    {
+                      "name": "ViewStyle"
+                    }
+                  ],
+                  "raw": "AnimatedStyle<ViewStyle>"
                 }
               ],
-              "raw": "StyleProp<ViewStyle>"
+              "raw": "StyleProp<AnimatedStyle<ViewStyle>>"
             },
             "description": "Style for positioning the FAB. The visual treatment (size, shape, color)\nis driven by `variant` and `size`."
           },
@@ -6339,10 +6345,16 @@
               "name": "StyleProp",
               "elements": [
                 {
-                  "name": "ViewStyle"
+                  "name": "AnimatedStyle",
+                  "elements": [
+                    {
+                      "name": "ViewStyle"
+                    }
+                  ],
+                  "raw": "AnimatedStyle<ViewStyle>"
                 }
               ],
-              "raw": "StyleProp<ViewStyle>"
+              "raw": "StyleProp<AnimatedStyle<ViewStyle>>"
             },
             "description": "Style for positioning the FAB. The visual treatment (size, shape, color)\nis driven by `variant` and `size`."
           },
@@ -7929,19 +7941,19 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "AnimatedStyle",
                   "elements": [
                     {
                       "name": "ViewStyle"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "AnimatedStyle<ViewStyle>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<AnimatedStyle<ViewStyle>>"
             },
             "description": ""
           },
@@ -9059,19 +9071,13 @@
           "contentStyle": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": "Style of menu's inner content."
           },
@@ -9375,10 +9381,10 @@
     "Modal": {
       "filepath": "Modal.tsx",
       "title": "Modal",
-      "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showModal = () => setVisible(true);\n  const hideModal = () => setVisible(false);\n  const containerStyle = { backgroundColor: 'white', padding: 20 };\n\n  return (\n    <PaperProvider>\n      <Portal>\n        <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>\n          <Text>Example Modal.  Click outside this area to dismiss.</Text>\n        </Modal>\n      </Portal>\n      <Button style={{ marginTop: 30 }} onPress={showModal}>\n        Show\n      </Button>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
+      "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showModal = () => setVisible(true);\n  const hideModal = () => setVisible(false);\n\n  const containerStyle = { padding: 20 };\n\n  return (\n    <PaperProvider>\n      <Portal>\n        <Modal\n          visible={visible}\n          onDismiss={hideModal}\n          contentBackgroundColor=\"white\"\n          contentContainerStyle={containerStyle}\n        >\n          <Text>Example Modal.  Click outside this area to dismiss.</Text>\n        </Modal>\n      </Portal>\n      <Button style={{ marginTop: 30 }} onPress={showModal}>\n        Show\n      </Button>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
       "link": "modal",
       "data": {
-        "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showModal = () => setVisible(true);\n  const hideModal = () => setVisible(false);\n  const containerStyle = { backgroundColor: 'white', padding: 20 };\n\n  return (\n    <PaperProvider>\n      <Portal>\n        <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>\n          <Text>Example Modal.  Click outside this area to dismiss.</Text>\n        </Modal>\n      </Portal>\n      <Button style={{ marginTop: 30 }} onPress={showModal}>\n        Show\n      </Button>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
+        "description": "The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.\nNote that this modal is NOT accessible by default; if you need an accessible modal, please use the React Native Modal.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showModal = () => setVisible(true);\n  const hideModal = () => setVisible(false);\n\n  const containerStyle = { padding: 20 };\n\n  return (\n    <PaperProvider>\n      <Portal>\n        <Modal\n          visible={visible}\n          onDismiss={hideModal}\n          contentBackgroundColor=\"white\"\n          contentContainerStyle={containerStyle}\n        >\n          <Text>Example Modal.  Click outside this area to dismiss.</Text>\n        </Modal>\n      </Portal>\n      <Button style={{ marginTop: 30 }} onPress={showModal}>\n        Show\n      </Button>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
         "displayName": "Modal",
         "methods": [],
         "statics": [],
@@ -9457,21 +9463,42 @@
           "contentContainerStyle": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
-            "description": "Style for the content of the modal"
+            "description": "Style for the content of the modal.\n\nBackground color and border radius should be specified via props instead:\n- `contentBackgroundColor`\n- `contentBorderRadius`"
+          },
+          "contentBackgroundColor": {
+            "required": false,
+            "tsType": {
+              "name": "SurfaceProps['backgroundColor']",
+              "raw": "SurfaceProps['backgroundColor']"
+            },
+            "description": "Background color of the modal content. Defaults to transparent.",
+            "defaultValue": {
+              "value": "'transparent'",
+              "computed": false
+            }
+          },
+          "contentBorderRadius": {
+            "required": false,
+            "tsType": {
+              "name": "SurfaceProps['borderRadius']",
+              "raw": "SurfaceProps['borderRadius']"
+            },
+            "description": "Border radius of the modal content."
+          },
+          "contentElevation": {
+            "required": false,
+            "tsType": {
+              "name": "Elevation"
+            },
+            "description": "Elevation level of the modal content. Defaults to level 1."
           },
           "style": {
             "required": false,
@@ -10546,37 +10573,7 @@
           "elevation": {
             "required": false,
             "tsType": {
-              "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
-              "elements": [
-                {
-                  "name": "literal",
-                  "value": "0"
-                },
-                {
-                  "name": "literal",
-                  "value": "1"
-                },
-                {
-                  "name": "literal",
-                  "value": "2"
-                },
-                {
-                  "name": "literal",
-                  "value": "3"
-                },
-                {
-                  "name": "literal",
-                  "value": "4"
-                },
-                {
-                  "name": "literal",
-                  "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
-                }
-              ]
+              "name": "Elevation"
             },
             "description": "@supported Available in v5.x with theme version 3\nChanges Searchbar shadow and background on iOS and Android.",
             "defaultValue": {
@@ -10600,19 +10597,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": ""
           },
@@ -11018,37 +11009,7 @@
           "elevation": {
             "required": false,
             "tsType": {
-              "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
-              "elements": [
-                {
-                  "name": "literal",
-                  "value": "0"
-                },
-                {
-                  "name": "literal",
-                  "value": "1"
-                },
-                {
-                  "name": "literal",
-                  "value": "2"
-                },
-                {
-                  "name": "literal",
-                  "value": "3"
-                },
-                {
-                  "name": "literal",
-                  "value": "4"
-                },
-                {
-                  "name": "literal",
-                  "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
-                }
-              ]
+              "name": "Elevation"
             },
             "description": "@supported Available in v5.x with theme version 3\nChanges Snackbar shadow and background on iOS and Android.",
             "defaultValue": {
@@ -11092,19 +11053,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "SurfaceStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
             "description": ""
           },
@@ -11145,54 +11100,186 @@
     "Surface": {
       "filepath": "Surface.tsx",
       "title": "Surface",
-      "description": "Surface is a basic container that can give depth to an element with elevation shadow.\nOn dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\nOverlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n  <Surface style={styles.surface} elevation={4}>\n     <Text>Surface</Text>\n  </Surface>\n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n  surface: {\n    padding: 8,\n    height: 80,\n    width: 80,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n```",
+      "description": "Surface is a basic container that can give depth to an element with elevation shadow.\n\nOn Android, Surface uses the native `elevation` style,\nand falls back to shadows that approximate the elevation on other platforms.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n  <Surface style={styles.surface} elevation={4} borderRadius={8}>\n     <Text>Surface</Text>\n  </Surface>\n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n  surface: {\n    height: 80,\n    width: 80,\n    padding: 8,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n```",
       "link": "surface",
       "data": {
-        "description": "Surface is a basic container that can give depth to an element with elevation shadow.\nOn dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.\nOverlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n  <Surface style={styles.surface} elevation={4}>\n     <Text>Surface</Text>\n  </Surface>\n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n  surface: {\n    padding: 8,\n    height: 80,\n    width: 80,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n```",
+        "description": "Surface is a basic container that can give depth to an element with elevation shadow.\n\nOn Android, Surface uses the native `elevation` style,\nand falls back to shadows that approximate the elevation on other platforms.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Surface, Text } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n  <Surface style={styles.surface} elevation={4} borderRadius={8}>\n     <Text>Surface</Text>\n  </Surface>\n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n  surface: {\n    height: 80,\n    width: 80,\n    padding: 8,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n```",
         "displayName": "Surface",
         "methods": [],
         "statics": [],
         "props": {
-          "children": {
-            "required": true,
+          "backgroundColor": {
+            "required": false,
             "tsType": {
-              "name": "ReactReactNode",
-              "raw": "React.ReactNode"
+              "name": "ColorValue"
             },
-            "description": "Content of the `Surface`."
+            "description": "Background color of the Surface. Overrides the color derived from\n`elevation`."
+          },
+          "borderRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of every corner of the Surface."
+          },
+          "borderBottomEndRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the bottom-end corner of the Surface."
+          },
+          "borderBottomLeftRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the bottom-left corner of the Surface."
+          },
+          "borderBottomRightRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the bottom-right corner of the Surface."
+          },
+          "borderBottomStartRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the bottom-start corner of the Surface."
+          },
+          "borderEndEndRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the end-end corner of the Surface."
+          },
+          "borderEndStartRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the end-start corner of the Surface."
+          },
+          "borderStartEndRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the start-end corner of the Surface."
+          },
+          "borderStartStartRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the start-start corner of the Surface."
+          },
+          "borderTopEndRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the top-end corner of the Surface."
+          },
+          "borderTopLeftRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the top-left corner of the Surface."
+          },
+          "borderTopRightRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the top-right corner of the Surface."
+          },
+          "borderTopStartRadius": {
+            "required": false,
+            "tsType": {
+              "name": "Extract['borderRadius']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
+            },
+            "description": "Radius of the top-start corner of the Surface."
+          },
+          "borderCurve": {
+            "required": false,
+            "tsType": {
+              "name": "ViewStyle['borderCurve']",
+              "raw": "ViewStyle['borderCurve']"
+            },
+            "description": "Corner curve of the Surface on iOS.",
+            "defaultValue": {
+              "value": "'continuous'",
+              "computed": false
+            }
+          },
+          "transitionDuration": {
+            "required": false,
+            "tsType": {
+              "name": "number"
+            },
+            "description": "Duration of the background, elevation, and shadow transitions in\nmilliseconds."
           },
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "AnimatedStyle",
                   "elements": [
                     {
-                      "name": "ViewStyle"
+                      "name": "Omit",
+                      "elements": [
+                        {
+                          "name": "ViewStyle"
+                        },
+                        {
+                          "name": "union",
+                          "raw": "keyof SurfaceVisualProps | 'elevation'",
+                          "elements": [
+                            {
+                              "name": "unknown"
+                            },
+                            {
+                              "name": "literal",
+                              "value": "'elevation'"
+                            }
+                          ]
+                        }
+                      ],
+                      "raw": "Omit<ViewStyle, keyof SurfaceVisualProps | 'elevation'>"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "AnimatedStyle<\n  Omit<ViewStyle, keyof SurfaceVisualProps | 'elevation'>\n>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<SurfaceStyle>"
             },
-            "description": ""
+            "description": "Style of the Surface.\n\nThis doesn't support all View style properties:\n- Background color and border radius should be specified via props instead.\n- `overflow: 'hidden'` is not supported with `elevation` as it can clip the shadow.\n   To achieve the same effect, wrap the content in a child View with the overflow style."
           },
           "elevation": {
             "required": false,
             "tsType": {
-              "name": "union",
-              "raw": "Elevation | Animated.Value",
-              "elements": [
-                {
-                  "name": "Elevation"
-                },
-                {
-                  "name": "Animated.Value"
-                }
-              ]
+              "name": "Elevation"
             },
             "description": "@supported Available in v5.x with theme version 3\nChanges shadows and background on iOS and Android.\nUsed to create UI hierarchy between components.\n\nNote: If `mode` is set to `flat`, Surface doesn't have a shadow.\n\nNote: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.\nIt's no longer supported with theme version 3 and you should use `elevation` property instead.",
             "defaultValue": {
@@ -11229,16 +11316,20 @@
             },
             "description": ""
           },
+          "children": {
+            "required": true,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Content of the `Surface`."
+          },
           "testID": {
             "required": false,
             "tsType": {
               "name": "string"
             },
-            "description": "TestID used for testing purposes",
-            "defaultValue": {
-              "value": "'surface'",
-              "computed": false
-            }
+            "description": "TestID used for testing purposes"
           },
           "ref": {
             "required": false,
@@ -11252,13 +11343,6 @@
               ]
             },
             "description": ""
-          },
-          "container": {
-            "required": false,
-            "tsType": {
-              "name": "boolean"
-            },
-            "description": "@internal"
           }
         }
       },
@@ -11780,19 +11864,19 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "AnimatedStyle",
                   "elements": [
                     {
                       "name": "ViewStyle"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "AnimatedStyle<ViewStyle>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<AnimatedStyle<ViewStyle>>"
             },
             "description": ""
           },
diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx
index 5679a92518..2a99b38866 100644
--- a/example/src/Examples/BannerExample.tsx
+++ b/example/src/Examples/BannerExample.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Dimensions, Image, Platform, StyleSheet, View } from 'react-native';
-import type { LayoutChangeEvent } from 'react-native';
 
 import { Banner, FAB, Palette, useTheme } from 'react-native-paper';
 
@@ -15,13 +14,6 @@ const BannerExample = () => {
   const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
   const defaultTheme = useTheme();
 
-  const [height, setHeight] = React.useState(0);
-
-  const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {
-    const { height: layoutHeight } = nativeEvent.layout;
-    setHeight(layoutHeight);
-  };
-
   const customTheme = {
     ...defaultTheme,
     colors: {
@@ -37,23 +29,7 @@ const BannerExample = () => {
 
   return (
     <View style={styles.container}>
-      <ScreenWrapper>
-        <View style={[styles.grid, { paddingTop: height }]}>
-          {PHOTOS.map((uri) => (
-            <View key={uri} style={styles.item}>
-              <Image
-                source={{ uri }}
-                resizeMode="cover"
-                style={styles.photo}
-                accessibilityIgnoresInvertColors
-              />
-            </View>
-          ))}
-        </View>
-      </ScreenWrapper>
-      <FAB icon="eye" style={styles.fab} onPress={() => setVisible(!visible)} />
       <Banner
-        onLayout={handleLayout}
         actions={[
           {
             label: `Set ${useCustomTheme ? 'default' : 'custom'} theme`,
@@ -73,11 +49,25 @@ const BannerExample = () => {
           console.log('Completed closing animation')
         }
         theme={useCustomTheme ? customTheme : defaultTheme}
-        style={styles.banner}
       >
         Two line text string with two actions. One to two lines is preferable on
         mobile.
       </Banner>
+      <ScreenWrapper>
+        <View style={styles.grid}>
+          {PHOTOS.map((uri) => (
+            <View key={uri} style={styles.item}>
+              <Image
+                source={{ uri }}
+                resizeMode="cover"
+                style={styles.photo}
+                accessibilityIgnoresInvertColors
+              />
+            </View>
+          ))}
+        </View>
+      </ScreenWrapper>
+      <FAB icon="eye" style={styles.fab} onPress={() => setVisible(!visible)} />
     </View>
   );
 };
@@ -117,12 +107,6 @@ const styles = StyleSheet.create({
       },
     },
   }),
-  banner: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-  },
   photo: {
     flex: 1,
   },
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
index e250644756..2a164e8e77 100644
--- a/example/src/Examples/ButtonExample.tsx
+++ b/example/src/Examples/ButtonExample.tsx
@@ -283,18 +283,22 @@ const ButtonExample = () => {
           <Button
             mode="outlined"
             onPress={() => {}}
-            style={styles.customRadius}
+            theme={{ shapes: { corner: { largeIncreased: 16 } } }}
           >
             Custom radius
           </Button>
-          <Button mode="contained" onPress={() => {}} style={styles.noRadius}>
+          <Button
+            mode="contained"
+            onPress={() => {}}
+            theme={{ shapes: { corner: { largeIncreased: 0 } } }}
+          >
             Without radius
           </Button>
           <Button
             mode="contained-tonal"
             onPress={() => {}}
-            style={{ borderRadius: styles.customRadiusAndPadding.borderRadius }}
-            contentStyle={styles.customRadiusAndPadding}
+            theme={{ shapes: { corner: { largeIncreased: 4 } } }}
+            contentStyle={styles.customPadding}
           >
             Custom radius and padding
           </Button>
@@ -380,17 +384,7 @@ const styles = StyleSheet.create({
     width: '100%',
     marginTop: 10,
   },
-  customRadius: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 16,
-  },
-  noRadius: {
-    borderRadius: 0,
-  },
-  customRadiusAndPadding: {
-    borderRadius: 4,
+  customPadding: {
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx
index 61c7ebe822..1061d4f904 100644
--- a/example/src/Examples/CardExample.tsx
+++ b/example/src/Examples/CardExample.tsx
@@ -104,17 +104,24 @@ const CardExample = () => {
           />
           <Card.Title title="Custom Button styles" />
           <Card.Actions>
-            <Button style={styles.button} onPress={() => {}}>
+            <Button
+              theme={{ shapes: { corner: { largeIncreased: 12 } } }}
+              onPress={() => {}}
+            >
               Share
             </Button>
-            <Button style={styles.button} onPress={() => {}}>
+            <Button
+              theme={{ shapes: { corner: { largeIncreased: 12 } } }}
+              onPress={() => {}}
+            >
               Explore
             </Button>
           </Card.Actions>
         </Card>
         <Card
-          style={[styles.card, styles.customCardRadius]}
+          style={styles.card}
           mode={selectedMode}
+          theme={{ shapes: { corner: { medium: 24 } } }}
         >
           <Card.Title
             title="Custom border radius"
@@ -222,13 +229,6 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
     paddingHorizontal: 8,
   },
-  button: {
-    borderRadius: 12,
-  },
-  customCardRadius: {
-    borderTopLeftRadius: 24,
-    borderBottomRightRadius: 24,
-  },
   customCoverRadius: {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx
index 8ee757fa0e..c6c817041f 100644
--- a/example/src/Examples/ChipExample.tsx
+++ b/example/src/Examples/ChipExample.tsx
@@ -244,7 +244,8 @@ const ChipExample = () => {
                   accessibilityIgnoresInvertColors
                 />
               }
-              style={[styles.chip, styles.customBorderRadius]}
+              style={styles.chip}
+              theme={{ shapes: { corner: { small: 16 } } }}
             >
               Compact with custom border radius
             </Chip>
@@ -258,7 +259,8 @@ const ChipExample = () => {
                   accessibilityIgnoresInvertColors
                 />
               }
-              style={[styles.chip, styles.customBorderRadius]}
+              style={styles.chip}
+              theme={{ shapes: { corner: { small: 16 } } }}
             >
               Compact with custom border radius
             </Chip>
@@ -275,12 +277,15 @@ const ChipExample = () => {
             <Chip
               selected
               onPress={() => {}}
-              style={[
-                styles.chip,
-                {
-                  backgroundColor: color(customColor).alpha(0.2).rgb().string(),
+              style={styles.chip}
+              theme={{
+                colors: {
+                  secondaryContainer: color(customColor)
+                    .alpha(0.2)
+                    .rgb()
+                    .string(),
                 },
-              ]}
+              }}
               selectedColor={customColor}
             >
               Flat selected chip with custom color
@@ -296,12 +301,12 @@ const ChipExample = () => {
               selected
               mode="outlined"
               onPress={() => {}}
-              style={[
-                styles.chip,
-                {
-                  backgroundColor: color(customColor).alpha(0.2).rgb().string(),
+              style={styles.chip}
+              theme={{
+                colors: {
+                  surface: color(customColor).alpha(0.2).rgb().string(),
                 },
-              ]}
+              }}
               selectedColor={customColor}
             >
               Outlined selected chip with custom color
@@ -403,9 +408,6 @@ const styles = StyleSheet.create({
     marginVertical: 4,
     marginHorizontal: 12,
   },
-  customBorderRadius: {
-    borderRadius: 16,
-  },
 });
 
 export default ChipExample;
diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
index f3625b835e..75b5ee6b6e 100644
--- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
+++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -13,8 +13,10 @@ const DialogWithCustomColors = ({
     <Portal>
       <Dialog
         onDismiss={close}
-        style={{
-          backgroundColor: Palette.primary10,
+        theme={{
+          colors: {
+            surfaceContainerHigh: Palette.primary10,
+          },
         }}
         visible={visible}
       >
diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx
index fe420830ce..e941c7c843 100644
--- a/example/src/Examples/SurfaceExample.tsx
+++ b/example/src/Examples/SurfaceExample.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { Surface, Text, Palette, List, IconButton } from 'react-native-paper';
 import type { Elevation } from 'react-native-paper';
@@ -12,19 +12,10 @@ const AnimatedSurface = () => {
   const [index, setIndex] = React.useState(3);
 
   const level = elevationLevels[index];
-  const elevation = React.useRef(new Animated.Value(level)).current;
-
-  React.useEffect(() => {
-    Animated.timing(elevation, {
-      toValue: level,
-      duration: 250,
-      useNativeDriver: false,
-    }).start();
-  }, [elevation, level]);
 
   return (
     <View style={styles.scroll}>
-      <Surface style={styles.surface} elevation={elevation}>
+      <Surface style={styles.surface} borderRadius={8} elevation={level}>
         <Text variant="bodySmall">{`Elevation ${level}`}</Text>
       </Surface>
       <View style={styles.actions}>
@@ -49,7 +40,13 @@ const SurfaceExample = () => {
   const elevationValues: Elevation[] = [0, 1, 2, 3, 4, 5];
 
   const renderSurface = (index: Elevation, mode: 'flat' | 'elevated') => (
-    <Surface key={index} style={styles.surface} mode={mode} elevation={index}>
+    <Surface
+      key={index}
+      style={styles.surface}
+      borderRadius={8}
+      mode={mode}
+      elevation={index}
+    >
       <Text variant="bodySmall">{`Elevation ${index}`}</Text>
     </Surface>
   );
@@ -93,10 +90,14 @@ const SurfaceExample = () => {
             </Surface>
           </View>
           <View style={styles.verticalSurfacesContainer}>
-            <Surface style={styles.verticalSurface}>
+            <Surface
+              style={[styles.verticalSurface, styles.verticalSurfaceContent]}
+            >
               <Text style={styles.centerText}>Top</Text>
             </Surface>
-            <Surface style={styles.verticalSurface}>
+            <Surface
+              style={[styles.verticalSurface, styles.verticalSurfaceContent]}
+            >
               <Text style={styles.centerText}>Bottom</Text>
             </Surface>
           </View>
@@ -121,7 +122,6 @@ const styles = StyleSheet.create({
   surface: {
     height: 120,
     width: 120,
-    borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -153,6 +153,8 @@ const styles = StyleSheet.create({
   },
   verticalSurface: {
     height: '48%',
+  },
+  verticalSurfaceContent: {
     justifyContent: 'center',
   },
 
diff --git a/jest/reanimatedSnapshotSerializer.js b/jest/reanimatedSnapshotSerializer.js
new file mode 100644
index 0000000000..0d20dec218
--- /dev/null
+++ b/jest/reanimatedSnapshotSerializer.js
@@ -0,0 +1,27 @@
+const reanimatedTestProps = new Set([
+  'jestAnimatedProps',
+  'jestAnimatedStyle',
+  'jestInlineStyle',
+]);
+
+module.exports = {
+  test(value) {
+    return (
+      value !== null &&
+      typeof value === 'object' &&
+      value.props !== null &&
+      typeof value.props === 'object' &&
+      Object.keys(value.props).some((prop) => reanimatedTestProps.has(prop))
+    );
+  },
+  print(value, serialize) {
+    return serialize({
+      ...value,
+      props: Object.fromEntries(
+        Object.entries(value.props).filter(
+          ([prop]) => !reanimatedTestProps.has(prop)
+        )
+      ),
+    });
+  },
+};
diff --git a/jest/testSetup.js b/jest/testSetup.js
index c00e611084..1033126c45 100644
--- a/jest/testSetup.js
+++ b/jest/testSetup.js
@@ -4,13 +4,10 @@ jest.useFakeTimers();
 
 jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
 
-jest.mock('react-native-worklets', () =>
-  require('react-native-worklets/lib/module/mock')
-);
-
-jest.mock('react-native-reanimated', () =>
-  require('react-native-reanimated/mock')
-);
+jest.mock('react-native-worklets', () => ({
+  ...require('react-native-worklets/lib/module/mock'),
+  isUIRuntime: () => false,
+}));
 
 jest.mock('@react-native-vector-icons/material-design-icons', () => {
   const React = require('react');
diff --git a/package.json b/package.json
index 25ca91fb73..6db11f9fef 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,9 @@
       "<rootDir>/jest/jestSetupAfterEnv.js",
       "@testing-library/react-native"
     ],
+    "snapshotSerializers": [
+      "<rootDir>/jest/reanimatedSnapshotSerializer.js"
+    ],
     "cacheDirectory": "./cache/jest",
     "testPathIgnorePatterns": [
       "\\.d\\.ts$"
diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
index 8ef9965819..7e62fd4df9 100644
--- a/src/components/Appbar/Appbar.tsx
+++ b/src/components/Appbar/Appbar.tsx
@@ -1,19 +1,24 @@
 import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import AppbarContent from './AppbarContent';
 import {
   getAppbarBackgroundColor,
+  getAppbarBorders,
   modeAppbarHeight,
   renderAppbarContent,
   filterAppbarActions,
 } from './utils';
 import type { AppbarModes, AppbarChildProps } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { Elevation, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import Surface from '../Surface';
 
+const APPBAR_HORIZONTAL_PADDING = 4;
+
+export type AppbarStyle = Omit<ViewStyle, 'elevation'>;
+
 export type Props = Omit<Partial<ViewProps>, 'style'> & {
   /**
    * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
@@ -51,7 +56,7 @@ export type Props = Omit<Partial<ViewProps>, 'style'> & {
    * @optional
    */
   theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AppbarStyle>;
 };
 
 /**
@@ -145,30 +150,26 @@ const Appbar = ({
   dark,
   style,
   mode = 'small',
-  elevated,
+  elevated = false,
   safeAreaInsets,
   theme: themeOverrides,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const flattenedStyle = StyleSheet.flatten(style);
-  const {
-    backgroundColor: customBackground,
-    elevation = elevated ? 2 : 0,
-    ...restStyle
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
-    elevation?: Elevation;
+  const { backgroundColor: customBackground, ...restStyle } = (flattenedStyle ||
+    {}) as Exclude<typeof flattenedStyle, number> & {
     backgroundColor?: ColorValue;
   };
 
   const backgroundColor = getAppbarBackgroundColor(
     theme,
-    elevation,
-    customBackground,
-    elevated
+    elevated,
+    customBackground
   );
 
+  const borderStyles = getAppbarBorders(restStyle);
+
   const isMode = (modeToCompare: AppbarModes) => {
     return mode === modeToCompare;
   };
@@ -210,24 +211,25 @@ const Appbar = ({
   const insets = {
     paddingBottom: safeAreaInsets?.bottom,
     paddingTop: safeAreaInsets?.top,
-    paddingLeft: safeAreaInsets?.left,
-    paddingRight: safeAreaInsets?.right,
+    paddingLeft: (safeAreaInsets?.left ?? 0) + APPBAR_HORIZONTAL_PADDING,
+    paddingRight: (safeAreaInsets?.right ?? 0) + APPBAR_HORIZONTAL_PADDING,
   };
 
   return (
     <Surface
+      {...borderStyles}
+      backgroundColor={backgroundColor}
       style={[
-        { backgroundColor },
-        styles.appbar,
         {
           height: modeAppbarHeight[mode],
         },
+        styles.appbar,
         insets,
         restStyle,
       ]}
-      elevation={elevation}
-      container
+      elevation={elevated ? 2 : 0}
       {...rest}
+      theme={theme}
     >
       {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
       {(isMode('small') || isMode('center-aligned')) && (
@@ -308,7 +310,6 @@ const styles = StyleSheet.create({
   appbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 4,
   },
   v3Spacing: {
     width: 52,
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
index 400271a988..c6d68a362e 100644
--- a/src/components/Appbar/AppbarAction.tsx
+++ b/src/components/Appbar/AppbarAction.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
-import type {
-  Animated,
-  ColorValue,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
+import type { ColorValue, StyleProp, View, ViewStyle } from 'react-native';
+
+import type { AnimatedStyle } from 'react-native-reanimated';
 
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
@@ -43,7 +39,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
    * Whether it's the leading button. Note: If `Appbar.BackAction` is present, it will be rendered before any `isLeading` icons.
    */
   isLeading?: boolean;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   ref?: React.Ref<View>;
   /**
    * @optional
diff --git a/src/components/Appbar/AppbarBackAction.tsx b/src/components/Appbar/AppbarBackAction.tsx
index 2835c27c91..c4249bd18a 100644
--- a/src/components/Appbar/AppbarBackAction.tsx
+++ b/src/components/Appbar/AppbarBackAction.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type {
-  Animated,
   ColorValue,
   GestureResponderEvent,
   StyleProp,
@@ -8,6 +7,8 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import type { AnimatedStyle } from 'react-native-reanimated';
+
 import type { $Omit } from './../../types';
 import AppbarAction from './AppbarAction';
 import AppbarBackIcon from './AppbarBackIcon';
@@ -36,7 +37,7 @@ export type Props = $Omit<
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   ref?: React.Ref<View>;
 };
 
diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx
index 0252cc89ba..1c486f9ccd 100644
--- a/src/components/Appbar/AppbarHeader.tsx
+++ b/src/components/Appbar/AppbarHeader.tsx
@@ -1,22 +1,18 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
-import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import type { ColorValue, StyleProp } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Appbar } from './Appbar';
-import {
-  getAppbarBackgroundColor,
-  modeAppbarHeight,
-  getAppbarBorders,
-} from './utils';
+import type { AppbarStyle } from './Appbar';
+import { getAppbarBackgroundColor, modeAppbarHeight } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { shadow } from '../../theme/tokens/sys/elevation';
 import type { ThemeProp } from '../../types';
 
 export type Props = Omit<
   React.ComponentProps<typeof Appbar>,
-  'safeAreaInsets'
+  'safeAreaInsets' | 'style'
 > & {
   /**
    * Whether the background color is a dark color. A dark header will render light text and vice-versa.
@@ -52,7 +48,7 @@ export type Props = Omit<
    * @optional
    */
   theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AppbarStyle>;
 };
 
 /**
@@ -100,64 +96,53 @@ const AppbarHeader = ({
   const flattenedStyle = StyleSheet.flatten(style);
   const {
     height = modeAppbarHeight[mode],
-    elevation = elevated ? 2 : 0,
     backgroundColor: customBackground,
     zIndex = elevated ? 1 : 0,
     ...restStyle
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
-    height?: number;
-    elevation?: number;
+    height?: AppbarStyle['height'];
     backgroundColor?: ColorValue;
     zIndex?: number;
   };
 
-  const borderRadius = getAppbarBorders(restStyle);
-
   const backgroundColor = getAppbarBackgroundColor(
     theme,
-    elevation,
-    customBackground,
-    elevated
+    elevated,
+    customBackground
   );
 
   const { top, left, right } = useSafeAreaInsets();
+  const topInset = statusBarHeight ?? top;
+  const horizontalInset = Math.max(left, right);
+  const headerHeight = typeof height === 'number' ? height + topInset : height;
 
   return (
-    <View
-      testID={`${testID}-root-layer`}
+    <Appbar
+      testID={testID}
       style={[
         {
+          height: headerHeight,
           backgroundColor,
           zIndex,
-          elevation,
-          paddingTop: statusBarHeight ?? top,
-          paddingHorizontal: Math.max(left, right),
         },
-        borderRadius,
-        shadow(elevation, theme.colors.shadow),
+        restStyle,
       ]}
-    >
-      <Appbar
-        testID={testID}
-        style={[{ height, backgroundColor }, styles.appbar, restStyle]}
-        dark={dark}
-        {...rest}
-        mode={mode}
-        theme={theme}
-      />
-    </View>
+      safeAreaInsets={{
+        top: topInset,
+        left: horizontalInset,
+        right: horizontalInset,
+      }}
+      dark={dark}
+      elevated={elevated}
+      {...rest}
+      mode={mode}
+      theme={theme}
+    />
   );
 };
 
 AppbarHeader.displayName = 'Appbar.Header';
 
-const styles = StyleSheet.create({
-  appbar: {
-    elevation: 0,
-  },
-});
-
 export default AppbarHeader;
 
 // @component-docs ignore-next-line
diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts
index a6ea546b34..29978636b9 100644
--- a/src/components/Appbar/utils.ts
+++ b/src/components/Appbar/utils.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet, Animated } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { white } from '../../theme/colors';
 import type { InternalTheme, ThemeProp } from '../../types';
@@ -15,17 +15,25 @@ export type AppbarChildProps = {
 
 const borderStyleProperties = [
   'borderRadius',
+  'borderBottomEndRadius',
+  'borderBottomStartRadius',
+  'borderEndEndRadius',
+  'borderEndStartRadius',
+  'borderStartEndRadius',
+  'borderStartStartRadius',
+  'borderTopEndRadius',
+  'borderTopStartRadius',
   'borderTopLeftRadius',
   'borderTopRightRadius',
   'borderBottomRightRadius',
   'borderBottomLeftRadius',
+  'borderCurve',
 ] satisfies readonly (keyof ViewStyle)[];
 
 export const getAppbarBackgroundColor = (
   theme: InternalTheme,
-  _elevation: number,
-  customBackground?: ColorValue,
-  elevated?: boolean
+  elevated: boolean,
+  customBackground?: ColorValue
 ) => {
   const { colors } = theme;
   if (customBackground) {
@@ -54,19 +62,14 @@ export const getAppbarColor = ({
   return undefined;
 };
 
-export const getAppbarBorders = (
-  style:
-    | Animated.Value
-    | Animated.AnimatedInterpolation<string | number>
-    | Animated.WithAnimatedObject<ViewStyle>
-) => {
-  const borders: Record<string, number> = {};
+export const getAppbarBorders = (style: ViewStyle) => {
+  let borders: ViewStyle = {};
 
   for (const property of borderStyleProperties) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-    const value = style[property as keyof typeof style];
-    if (value) {
-      borders[property] = value;
+    const value = style[property];
+
+    if (typeof value === 'number' || typeof value === 'string') {
+      borders = { ...borders, [property]: value };
     }
   }
 
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 869adf6820..4567055f6b 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,7 +1,7 @@
 import type { StyleProp, TextProps, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 
-import Animated from 'react-native-reanimated';
+import Animated, { type AnimatedStyle } from 'react-native-reanimated';
 
 import { useInternalTheme } from '../core/theming';
 import { cornerFull } from '../theme/tokens/sys/shape';
@@ -21,7 +21,7 @@ export type Props = TextProps & {
    * Content of the `Badge`.
    */
   children?: string | number;
-  style?: StyleProp<TextStyle>;
+  style?: StyleProp<AnimatedStyle<TextStyle>>;
   /**
    * @optional
    */
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index f994396931..dddcf330c0 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -1,21 +1,37 @@
 import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import type { LayoutChangeEvent } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import type {
+  LayoutChangeEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 
+import Animated, {
+  Easing,
+  interpolate,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import Button from './Button/Button';
 import Icon from './Icon';
 import type { IconSource } from './Icon';
 import Surface from './Surface';
+import type { SurfaceStyle } from './Surface';
 import Text from './Typography/Text';
 import { useInternalTheme } from '../core/theming';
-import type { $Omit, $RemoveChildren, ThemeProp } from '../types';
+import type { $RemoveChildren, Elevation, ThemeProp } from '../types';
 
 const DEFAULT_MAX_WIDTH = 960;
 
-export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
+type AnimationFinishedCallback = (result: { finished: boolean }) => void;
+
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Whether banner is currently visible.
    */
@@ -51,12 +67,12 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * @supported Available in v5.x with theme version 3
    * Changes Banner shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   ref?: React.RefObject<View>;
   /**
    * @optional
@@ -66,12 +82,12 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * @optional
    * Optional callback that will be called after the opening animation finished running normally
    */
-  onShowAnimationFinished?: Animated.EndCallback;
+  onShowAnimationFinished?: AnimationFinishedCallback;
   /**
    * @optional
    * Optional callback that will be called after the closing animation finished running normally
    */
-  onHideAnimationFinished?: Animated.EndCallback;
+  onHideAnimationFinished?: AnimationFinishedCallback;
 };
 
 /**
@@ -134,9 +150,9 @@ const Banner = ({
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { colors } = theme;
-  const { current: position } = React.useRef<Animated.Value>(
-    new Animated.Value(visible ? 1 : 0)
-  );
+
+  const position = useSharedValue(visible ? 1 : 0);
+
   const [layout, setLayout] = React.useState<{
     height: number;
     measured: boolean;
@@ -149,30 +165,33 @@ const Banner = ({
   const hideCallback = useLatestCallback(onHideAnimationFinished);
 
   const { scale } = theme.animation;
-
-  const opacity = position.interpolate({
-    inputRange: [0, 0.1, 1],
-    outputRange: [0, 1, 1],
-  });
+  const animationDuration = (visible ? 250 : 200) * scale;
 
   React.useEffect(() => {
-    if (visible) {
-      // show
-      Animated.timing(position, {
-        duration: 250 * scale,
-        toValue: 1,
-        useNativeDriver: false,
-      }).start(showCallback);
-    } else {
-      // hide
-      Animated.timing(position, {
-        duration: 200 * scale,
-        toValue: 0,
-        useNativeDriver: false,
-      }).start(hideCallback);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, position, scale]);
+    const callback = visible ? showCallback : hideCallback;
+
+    position.value = withTiming(
+      visible ? 1 : 0,
+      {
+        duration: animationDuration,
+        easing: Easing.inOut(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      },
+      (finished) => scheduleOnRN(callback, { finished: finished ?? false })
+    );
+  }, [animationDuration, hideCallback, position, showCallback, visible]);
+
+  const surfaceStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(position.value, [0, 0.1, 1], [0, 1, 1]),
+  }));
+
+  const spacerStyle = useAnimatedStyle(() => ({
+    height: position.value * layout.height,
+  }));
+
+  const contentAnimationStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: (position.value - 1) * layout.height }],
+  }));
 
   const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {
     const { height } = nativeEvent.layout;
@@ -186,29 +205,22 @@ const Banner = ({
   // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
   // We need this because we need to move the content below as if banner's height was being animated
   // However we can't animated banner's height directly as it'll also resize the content inside
-  const height = Animated.multiply(position, layout.height);
-
-  const translateY = Animated.multiply(
-    Animated.add(position, -1),
-    layout.height
-  );
   return (
     <Surface
       {...rest}
-      style={[{ opacity }, style]}
+      style={[surfaceStyle, style]}
       theme={theme}
-      container
       elevation={elevation}
     >
       <View style={[styles.wrapper, contentStyle]}>
-        <Animated.View style={{ height }} />
+        <Animated.View style={spacerStyle} />
         <Animated.View
           onLayout={handleLayout}
           style={[
             layout.measured || !visible
               ? // If we have measured banner's height or it's invisible,
                 // Position it absolutely, the layout will be taken care of the spacer
-                [styles.absolute, { transform: [{ translateY }] }]
+                [styles.absolute, contentAnimationStyle]
               : // Otherwise position it normally
                 null,
             !layout.measured && !visible
diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx
index 245dda9707..c0594f7e55 100644
--- a/src/components/BottomNavigation/BottomNavigationBar.tsx
+++ b/src/components/BottomNavigation/BottomNavigationBar.tsx
@@ -437,7 +437,6 @@ const BottomNavigationBar = <Route extends BaseRoute>({
     backgroundColor: customBackground,
     // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
   } = (StyleSheet.flatten(style) || {}) as {
-    elevation?: number;
     backgroundColor?: ColorValue;
   };
 
@@ -462,9 +461,14 @@ const BottomNavigationBar = <Route extends BaseRoute>({
     bottom: safeAreaInsets?.bottom ?? bottom,
   };
 
+  const pointerEvents = layout.measured
+    ? keyboardHidesNavigationBar && keyboardVisible
+      ? 'none'
+      : 'auto'
+    : 'none';
+
   return (
-    <Surface
-      elevation={0}
+    <Animated.View
       testID={testID}
       style={[
         styles.bar,
@@ -485,218 +489,148 @@ const BottomNavigationBar = <Route extends BaseRoute>({
             }
           : null,
         style,
+        { pointerEvents },
       ]}
-      pointerEvents={
-        layout.measured
-          ? keyboardHidesNavigationBar && keyboardVisible
-            ? 'none'
-            : 'auto'
-          : 'none'
-      }
       onLayout={onLayout}
-      container
     >
-      <Animated.View
-        style={[styles.barContent, { backgroundColor }]}
-        testID={`${testID}-content`}
-      >
-        <View
-          style={[
-            styles.items,
-            {
-              marginBottom: insets.bottom,
-              marginHorizontal: Math.max(insets.left, insets.right),
-            },
-            compact && {
-              maxWidth: maxTabBarWidth,
-            },
-          ]}
-          role={'tablist'}
-          testID={`${testID}-content-wrapper`}
+      <Surface elevation={0}>
+        <Animated.View
+          style={[styles.barContent, { backgroundColor }]}
+          testID={`${testID}-content`}
         >
-          {routes.map((route, index) => {
-            const focused = navigationState.index === index;
-            const active = tabsAnims[index];
-
-            // Move down the icon to account for no-label in shifting and smaller label in non-shifting.
-            const translateY = labeled
-              ? shifting
+          <View
+            style={[
+              styles.items,
+              {
+                marginBottom: insets.bottom,
+                marginHorizontal: Math.max(insets.left, insets.right),
+              },
+              compact && {
+                maxWidth: maxTabBarWidth,
+              },
+            ]}
+            role={'tablist'}
+            testID={`${testID}-content-wrapper`}
+          >
+            {routes.map((route, index) => {
+              const focused = navigationState.index === index;
+              const active = tabsAnims[index];
+
+              // Move down the icon to account for no-label in shifting and smaller label in non-shifting.
+              const translateY = labeled
+                ? shifting
+                  ? active.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [7, 0],
+                    })
+                  : 0
+                : 7;
+
+              // We render the active icon and label on top of inactive ones and cross-fade them on change.
+              // This trick gives the illusion that we are animating between active and inactive colors.
+              // This is to ensure that we can use native driver, as colors cannot be animated with native driver.
+              const activeOpacity = active;
+
+              const inactiveOpacity = active.interpolate({
+                inputRange: [0, 1],
+                outputRange: [1, 0],
+              });
+
+              const v3ActiveOpacity = focused ? 1 : 0;
+
+              const v3InactiveOpacity = shifting
+                ? inactiveOpacity
+                : focused
+                  ? 0
+                  : 1;
+
+              // Scale horizontally the outline pill
+              const outlineScale = focused
                 ? active.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [7, 0],
+                    outputRange: [0.5, 1],
                   })
-                : 0
-              : 7;
-
-            // We render the active icon and label on top of inactive ones and cross-fade them on change.
-            // This trick gives the illusion that we are animating between active and inactive colors.
-            // This is to ensure that we can use native driver, as colors cannot be animated with native driver.
-            const activeOpacity = active;
-            const inactiveOpacity = active.interpolate({
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            });
-
-            const v3ActiveOpacity = focused ? 1 : 0;
-            const v3InactiveOpacity = shifting
-              ? inactiveOpacity
-              : focused
-                ? 0
-                : 1;
-
-            // Scale horizontally the outline pill
-            const outlineScale = focused
-              ? active.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.5, 1],
-                })
-              : 0;
-
-            const badge = getBadge({ route });
-
-            const activeLabelColor = getLabelColor({
-              tintColor: activeTintColor,
-              hasColor: Boolean(activeColor),
-              focused,
-              theme,
-            });
-
-            const inactiveLabelColor = getLabelColor({
-              tintColor: inactiveTintColor,
-              hasColor: Boolean(inactiveColor),
-              focused,
-              theme,
-            });
-
-            const badgeStyle = {
-              top: typeof badge === 'boolean' ? 4 : 2,
-              right:
-                badge != null && typeof badge !== 'boolean'
-                  ? String(badge).length * -2
-                  : 0,
-            };
-
-            const isLegacyOrV3Shifting = shifting && labeled;
-
-            const font = theme.fonts.labelMedium;
-
-            return renderTouchable({
-              key: route.key,
-              route,
-              borderless: true,
-              centered: true,
-              rippleColor: 'transparent',
-              onPress: () => onTabPress(eventForIndex(index)),
-              onLongPress: () => onTabLongPress?.(eventForIndex(index)),
-              testID: getTestID({ route }),
-              'aria-label': getAccessibilityLabel({ route }),
-              role: Platform.OS === 'ios' ? 'button' : 'tab',
-              'aria-selected': focused,
-              style: [styles.item, styles.v3Item],
-              children: (
-                <View
-                  pointerEvents="none"
-                  style={
-                    labeled
-                      ? styles.v3TouchableContainer
-                      : styles.v3NoLabelContainer
-                  }
-                >
-                  <Animated.View
-                    style={[
-                      styles.iconContainer,
-                      styles.v3IconContainer,
-                      isLegacyOrV3Shifting && {
-                        transform: [{ translateY }],
-                      },
-                    ]}
+                : 0;
+
+              const badge = getBadge({ route });
+
+              const activeLabelColor = getLabelColor({
+                tintColor: activeTintColor,
+                hasColor: Boolean(activeColor),
+                focused,
+                theme,
+              });
+
+              const inactiveLabelColor = getLabelColor({
+                tintColor: inactiveTintColor,
+                hasColor: Boolean(inactiveColor),
+                focused,
+                theme,
+              });
+
+              const badgeStyle = {
+                top: typeof badge === 'boolean' ? 4 : 2,
+                right:
+                  badge != null && typeof badge !== 'boolean'
+                    ? String(badge).length * -2
+                    : 0,
+              };
+
+              const isLegacyOrV3Shifting = shifting && labeled;
+
+              const font = theme.fonts.labelMedium;
+
+              return renderTouchable({
+                key: route.key,
+                route,
+                borderless: true,
+                centered: true,
+                rippleColor: 'transparent',
+                onPress: () => onTabPress(eventForIndex(index)),
+                onLongPress: () => onTabLongPress?.(eventForIndex(index)),
+                testID: getTestID({ route }),
+                'aria-label': getAccessibilityLabel({ route }),
+                role: Platform.OS === 'ios' ? 'button' : 'tab',
+                'aria-selected': focused,
+                style: [styles.item, styles.v3Item],
+                children: (
+                  <View
+                    pointerEvents="none"
+                    style={
+                      labeled
+                        ? styles.v3TouchableContainer
+                        : styles.v3NoLabelContainer
+                    }
                   >
-                    {focused && (
-                      <Animated.View
-                        style={[
-                          styles.outline,
-                          {
-                            transform: [
-                              {
-                                scaleX: outlineScale,
-                              },
-                            ],
-                            backgroundColor: colors.secondaryContainer,
-                          },
-                          activeIndicatorStyle,
-                        ]}
-                      />
-                    )}
-                    <Animated.View
-                      style={[
-                        styles.iconWrapper,
-                        styles.v3IconWrapper,
-                        {
-                          opacity: isLegacyOrV3Shifting
-                            ? activeOpacity
-                            : v3ActiveOpacity,
-                        },
-                      ]}
-                    >
-                      {renderIcon ? (
-                        renderIcon({
-                          route,
-                          focused: true,
-                          color: activeTintColor,
-                        })
-                      ) : (
-                        <Icon
-                          // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-                          source={route.focusedIcon as IconSource}
-                          color={activeTintColor}
-                          size={24}
-                        />
-                      )}
-                    </Animated.View>
                     <Animated.View
                       style={[
-                        styles.iconWrapper,
-                        styles.v3IconWrapper,
-                        {
-                          opacity: isLegacyOrV3Shifting
-                            ? inactiveOpacity
-                            : v3InactiveOpacity,
+                        styles.iconContainer,
+                        styles.v3IconContainer,
+                        isLegacyOrV3Shifting && {
+                          transform: [{ translateY }],
                         },
                       ]}
                     >
-                      {renderIcon ? (
-                        renderIcon({
-                          route,
-                          focused: false,
-                          color: inactiveTintColor,
-                        })
-                      ) : (
-                        <Icon
-                          source={
-                            route.unfocusedIcon !== undefined
-                              ? route.unfocusedIcon
-                              : // focusedIcon is required when renderIcon is omitted.
-                                // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-                                (route.focusedIcon as IconSource)
-                          }
-                          color={inactiveTintColor}
-                          size={24}
+                      {focused && (
+                        <Animated.View
+                          style={[
+                            styles.outline,
+                            {
+                              transform: [
+                                {
+                                  scaleX: outlineScale,
+                                },
+                              ],
+                              backgroundColor: colors.secondaryContainer,
+                            },
+                            activeIndicatorStyle,
+                          ]}
                         />
                       )}
-                    </Animated.View>
-                    <View style={[styles.badgeContainer, badgeStyle]}>
-                      {typeof badge === 'boolean' ? (
-                        <Badge visible={badge} />
-                      ) : (
-                        <Badge visible={badge != null}>{badge}</Badge>
-                      )}
-                    </View>
-                  </Animated.View>
-                  {labeled ? (
-                    <Animated.View style={[styles.labelContainer]}>
                       <Animated.View
                         style={[
-                          styles.labelWrapper,
+                          styles.iconWrapper,
+                          styles.v3IconWrapper,
                           {
                             opacity: isLegacyOrV3Shifting
                               ? activeOpacity
@@ -704,54 +638,86 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                           },
                         ]}
                       >
-                        {renderLabel ? (
-                          renderLabel({
+                        {renderIcon ? (
+                          renderIcon({
                             route,
                             focused: true,
-                            color: activeLabelColor,
+                            color: activeTintColor,
                           })
                         ) : (
-                          <Text
-                            maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-                            variant="labelMedium"
-                            style={[
-                              styles.label,
-                              {
-                                color: activeLabelColor,
-                                ...font,
-                              },
-                            ]}
-                          >
-                            {getLabelText({ route })}
-                          </Text>
+                          <Icon
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+                            source={route.focusedIcon as IconSource}
+                            color={activeTintColor}
+                            size={24}
+                          />
                         )}
                       </Animated.View>
-                      {shifting ? null : (
+                      <Animated.View
+                        style={[
+                          styles.iconWrapper,
+                          styles.v3IconWrapper,
+                          {
+                            opacity: isLegacyOrV3Shifting
+                              ? inactiveOpacity
+                              : v3InactiveOpacity,
+                          },
+                        ]}
+                      >
+                        {renderIcon ? (
+                          renderIcon({
+                            route,
+                            focused: false,
+                            color: inactiveTintColor,
+                          })
+                        ) : (
+                          <Icon
+                            source={
+                              route.unfocusedIcon !== undefined
+                                ? route.unfocusedIcon
+                                : // focusedIcon is required when renderIcon is omitted.
+                                  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+                                  (route.focusedIcon as IconSource)
+                            }
+                            color={inactiveTintColor}
+                            size={24}
+                          />
+                        )}
+                      </Animated.View>
+                      <View style={[styles.badgeContainer, badgeStyle]}>
+                        {typeof badge === 'boolean' ? (
+                          <Badge visible={badge} />
+                        ) : (
+                          <Badge visible={badge != null}>{badge}</Badge>
+                        )}
+                      </View>
+                    </Animated.View>
+                    {labeled ? (
+                      <Animated.View style={[styles.labelContainer]}>
                         <Animated.View
                           style={[
                             styles.labelWrapper,
                             {
                               opacity: isLegacyOrV3Shifting
-                                ? inactiveOpacity
-                                : v3InactiveOpacity,
+                                ? activeOpacity
+                                : v3ActiveOpacity,
                             },
                           ]}
                         >
                           {renderLabel ? (
                             renderLabel({
                               route,
-                              focused: false,
-                              color: inactiveLabelColor,
+                              focused: true,
+                              color: activeLabelColor,
                             })
                           ) : (
                             <Text
                               maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
                               variant="labelMedium"
-                              selectable={false}
                               style={[
                                 styles.label,
                                 {
-                                  color: inactiveLabelColor,
+                                  color: activeLabelColor,
                                   ...font,
                                 },
                               ]}
@@ -760,16 +726,53 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                             </Text>
                           )}
                         </Animated.View>
-                      )}
-                    </Animated.View>
-                  ) : null}
-                </View>
-              ),
-            });
-          })}
-        </View>
-      </Animated.View>
-    </Surface>
+                        {shifting ? null : (
+                          <Animated.View
+                            style={[
+                              styles.labelWrapper,
+                              {
+                                opacity: isLegacyOrV3Shifting
+                                  ? inactiveOpacity
+                                  : v3InactiveOpacity,
+                              },
+                            ]}
+                          >
+                            {renderLabel ? (
+                              renderLabel({
+                                route,
+                                focused: false,
+                                color: inactiveLabelColor,
+                              })
+                            ) : (
+                              <Text
+                                maxFontSizeMultiplier={
+                                  labelMaxFontSizeMultiplier
+                                }
+                                variant="labelMedium"
+                                selectable={false}
+                                style={[
+                                  styles.label,
+                                  {
+                                    color: inactiveLabelColor,
+                                    ...font,
+                                  },
+                                ]}
+                              >
+                                {getLabelText({ route })}
+                              </Text>
+                            )}
+                          </Animated.View>
+                        )}
+                      </Animated.View>
+                    ) : null}
+                  </View>
+                ),
+              });
+            })}
+          </View>
+        </Animated.View>
+      </Surface>
+    </Animated.View>
   );
 };
 
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index bfc7782d66..00f0242f0f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
@@ -7,24 +7,25 @@ import type {
   Role,
   StyleProp,
   TextStyle,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
 import { getButtonColors, getButtonTouchableRippleStyle } from './utils';
 import type { ButtonMode } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $Omit, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
-import { splitStyles } from '../../utils/splitStyles';
 import ActivityIndicator from '../ActivityIndicator';
 import Icon from '../Icon';
 import type { IconSource } from '../Icon';
 import Surface from '../Surface';
+import type { SurfaceStyle } from '../Surface';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
    * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.
@@ -122,7 +123,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Sets additional distance outside of element in which a press can be detected.
    */
   hitSlop?: TouchableRippleProps['hitSlop'];
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * Style for the button text.
    */
@@ -192,15 +193,15 @@ const Button = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const isMode = React.useCallback(
     (modeToCompare: ButtonMode) => {
       return mode === modeToCompare;
     },
     [mode]
   );
-  const { animation } = theme;
+
   const uppercase = uppercaseProp ?? false;
-  const isWeb = Platform.OS === 'web';
 
   const hasPassedTouchHandler = hasTouchHandler({
     onPress,
@@ -213,52 +214,33 @@ const Button = ({
   const initialElevation = 1;
   const activeElevation = 2;
 
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(isElevationEntitled ? initialElevation : 0)
-  );
+  const [pressed, setPressed] = React.useState(false);
 
-  React.useEffect(() => {
-    // Workaround not to call setValue on Animated.Value, because it breaks styles.
-    // https://github.com/callstack/react-native-paper/issues/4559
-    Animated.timing(elevation, {
-      toValue: isElevationEntitled ? initialElevation : 0,
-      duration: 0,
-      useNativeDriver: true,
-    });
-  }, [isElevationEntitled, elevation, initialElevation]);
+  const elevation = isElevationEntitled
+    ? pressed
+      ? activeElevation
+      : initialElevation
+    : 0;
 
   const handlePressIn = (e: GestureResponderEvent) => {
     onPressIn?.(e);
-    if (isMode('elevated')) {
-      const { scale } = animation;
-      Animated.timing(elevation, {
-        toValue: activeElevation,
-        duration: 200 * scale,
-        useNativeDriver:
-          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-      }).start();
+
+    if (isElevationEntitled) {
+      setPressed(true);
     }
   };
 
   const handlePressOut = (e: GestureResponderEvent) => {
     onPressOut?.(e);
-    if (isMode('elevated')) {
-      const { scale } = animation;
-      Animated.timing(elevation, {
-        toValue: initialElevation,
-        duration: 150 * scale,
-        useNativeDriver:
-          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-      }).start();
+
+    if (isElevationEntitled) {
+      setPressed(false);
     }
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-  const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-  const [, borderRadiusStyles] = splitStyles(
-    flattenedStyles,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
-  );
+  const elevationTransitionDuration =
+    theme.motion.duration[pressed ? 'short4' : 'short3'] *
+    theme.animation.scale;
 
   const borderRadius = theme.shapes.corner.largeIncreased;
   const iconSize = 18;
@@ -279,17 +261,7 @@ const Button = ({
     dark,
   });
 
-  const touchableStyle = {
-    ...borderRadiusStyles,
-    borderRadius: borderRadiusStyles.borderRadius ?? borderRadius,
-  };
-
-  const buttonStyle = {
-    backgroundColor: backgroundOpacity < 1 ? 'transparent' : backgroundColor,
-    borderColor,
-    borderWidth,
-    ...touchableStyle,
-  };
+  const touchableStyle = { borderRadius };
 
   const { color: customLabelColor, fontSize: customLabelSize } =
     StyleSheet.flatten(labelStyle) || {};
@@ -321,9 +293,19 @@ const Button = ({
       {...rest}
       ref={ref}
       testID={`${testID}-container`}
-      style={[styles.button, compact && styles.compact, buttonStyle, style]}
+      backgroundColor={backgroundOpacity < 1 ? 'transparent' : backgroundColor}
+      {...touchableStyle}
+      style={[
+        styles.button,
+        compact && styles.compact,
+        {
+          borderColor,
+          borderWidth,
+        },
+        style,
+      ]}
       elevation={elevation}
-      container
+      transitionDuration={elevationTransitionDuration}
     >
       {backgroundOpacity < 1 && (
         <View
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index f0fdc89407..bb668736a8 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { Animated, StyleSheet, Pressable, View } from 'react-native';
-import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Pressable, View } from 'react-native';
+import type {
+  GestureResponderEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 
 import useLatestCallback from 'use-latest-callback';
 
@@ -10,10 +15,10 @@ import CardCover from './CardCover';
 import CardTitle from './CardTitle';
 import { getCardColors } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $Omit, ThemeProp } from '../../types';
+import type { Elevation, ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
-import { splitStyles } from '../../utils/splitStyles';
 import Surface from '../Surface';
+import type { SurfaceStyle } from '../Surface';
 
 type OutlinedCardProps = {
   mode: 'outlined';
@@ -22,7 +27,7 @@ type OutlinedCardProps = {
 
 type ElevatedCardProps = {
   mode?: 'elevated';
-  elevation?: number;
+  elevation?: Elevation;
 };
 
 type ContainedCardProps = {
@@ -30,11 +35,9 @@ type ContainedCardProps = {
   elevation?: never;
 };
 
-type HandlePressType = 'in' | 'out';
-
 type Mode = 'elevated' | 'outlined' | 'contained';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Mode of the Card.
    * - `elevated` - Card with elevation.
@@ -73,12 +76,12 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Changes Card shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * Style of card's inner content.
    */
   contentStyle?: StyleProp<ViewStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * @optional
    */
@@ -91,6 +94,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Pass down accessible from card props to touchable
    */
   accessible?: boolean;
+  /**
+   * Reference to the card container.
+   */
+  ref?: React.Ref<View>;
 };
 
 /**
@@ -141,6 +148,7 @@ const Card = ({
   ...rest
 }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const isMode = React.useCallback(
     (modeToCompare: Mode) => {
       return cardMode === modeToCompare;
@@ -155,34 +163,23 @@ const Card = ({
     onPressOut,
   });
 
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(cardElevation)
-  );
-  const { animation } = theme;
-
-  const animationDuration = 150 * animation.scale;
-
-  const runElevationAnimation = (pressType: HandlePressType) => {
-    if (isMode('contained')) {
-      return;
-    }
-
-    const isPressTypeIn = pressType === 'in';
-    Animated.timing(elevation, {
-      toValue: isPressTypeIn ? 2 : cardElevation,
-      duration: animationDuration,
-      useNativeDriver: false,
-    }).start();
-  };
+  const [pressed, setPressed] = React.useState(false);
+  const elevation = isMode('elevated') ? (pressed ? 2 : cardElevation) : 0;
 
   const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
     onPressIn?.(e);
-    runElevationAnimation('in');
+
+    if (isMode('elevated')) {
+      setPressed(true);
+    }
   });
 
   const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
     onPressOut?.(e);
-    runElevationAnimation('out');
+
+    if (isMode('elevated')) {
+      setPressed(false);
+    }
   });
 
   const total = React.Children.count(children);
@@ -204,15 +201,7 @@ const Card = ({
 
   const { borderColor = themedBorderColor } = flattenedStyles;
 
-  const [, borderRadiusStyles] = splitStyles(
-    flattenedStyles,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
-  );
-
-  const borderRadiusCombinedStyles = {
-    borderRadius: theme.shapes.corner.medium,
-    ...borderRadiusStyles,
-  };
+  const borderRadius = theme.shapes.corner.medium;
 
   const content = (
     <View style={[styles.innerContainer, contentStyle]} testID={testID}>
@@ -222,7 +211,6 @@ const Card = ({
               index,
               total,
               siblings,
-              borderRadiusStyles,
             })
           : child
       )}
@@ -232,15 +220,12 @@ const Card = ({
   return (
     <Surface
       ref={ref}
-      style={[
-        !isMode('elevated') && { backgroundColor },
-        borderRadiusCombinedStyles,
-        style,
-      ]}
+      borderRadius={borderRadius}
+      backgroundColor={!isMode('elevated') ? backgroundColor : undefined}
+      style={[{ borderColor }, style]}
       theme={theme}
-      elevation={isMode('elevated') ? elevation : 0}
+      elevation={elevation}
       testID={`${testID}-container`}
-      container
       {...rest}
     >
       {isMode('outlined') && (
@@ -252,7 +237,7 @@ const Card = ({
               borderColor,
             },
             styles.outline,
-            borderRadiusCombinedStyles,
+            { borderRadius },
           ]}
         />
       )}
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index b6482e9209..3bbbe32cf5 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, Pressable, View } from 'react-native';
+import { Platform, StyleSheet, Pressable, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
   TextStyle,
-  ViewStyle,
+  ViewProps,
 } from 'react-native';
 
 import useLatestCallback from 'use-latest-callback';
@@ -15,17 +15,18 @@ import { getChipColors } from './helpers';
 import type { ChipAvatarProps } from './helpers';
 import { useInternalTheme } from '../../core/theming';
 import { white } from '../../theme/colors';
-import type { $Omit, EllipsizeProp, ThemeProp } from '../../types';
+import type { EllipsizeProp, ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Surface from '../Surface';
+import type { SurfaceStyle } from '../Surface';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Mode of the chip.
    * - `flat` - flat chip without outline.
@@ -123,7 +124,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Style of chip's text
    */
   textStyle?: StyleProp<TextStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * Sets additional distance outside of element in which a press can be detected.
    */
@@ -144,6 +145,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
+  /**
+   * Reference to the chip container.
+   */
+  ref?: React.Ref<View>;
 };
 
 /**
@@ -201,11 +206,9 @@ const Chip = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const isWeb = Platform.OS === 'web';
 
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(elevated ? 1 : 0)
-  );
+  const [pressed, setPressed] = React.useState(false);
+  const elevation = elevated ? (pressed ? 2 : 1) : 0;
 
   const hasPassedTouchHandler = hasTouchHandler({
     onPress,
@@ -217,36 +220,24 @@ const Chip = ({
   const isOutlined = mode === 'outlined';
 
   const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
-    const { scale } = theme.animation;
     onPressIn?.(e);
-    Animated.timing(elevation, {
-      toValue: elevated ? 2 : 0,
-      duration: 200 * scale,
-      useNativeDriver:
-        isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-    }).start();
+    setPressed(true);
   });
 
   const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
-    const { scale } = theme.animation;
     onPressOut?.(e);
-    Animated.timing(elevation, {
-      toValue: elevated ? 1 : 0,
-      duration: 150 * scale,
-      useNativeDriver:
-        isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-    }).start();
+    setPressed(false);
   });
 
+  const elevationTransitionDuration =
+    theme.motion.duration[pressed ? 'short4' : 'short3'] *
+    theme.animation.scale;
+
   const opacity = 0.38;
   const defaultBorderRadius = theme.shapes.corner.small;
   const iconSize = 18;
 
-  const {
-    backgroundColor: customBackgroundColor,
-    borderRadius = defaultBorderRadius,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-  } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+  const borderRadius = defaultBorderRadius;
 
   const {
     borderColor,
@@ -259,12 +250,11 @@ const Chip = ({
     isOutlined,
     theme,
     selectedColor,
-    customBackgroundColor,
     disabled,
   });
 
-  const elevationStyle = elevation;
   const multiplier = compact ? 1.5 : 2;
+
   const labelSpacings = {
     marginRight: onClose ? 0 : 8 * multiplier,
     marginLeft:
@@ -272,30 +262,26 @@ const Chip = ({
         ? 4 * multiplier
         : 8 * multiplier,
   };
+
   const contentSpacings = {
     paddingRight: onClose ? 34 : 0,
   };
+
   const labelTextStyle = {
     color: textColor,
     ...theme.fonts.labelLarge,
   };
+
   return (
     <Surface
-      style={[
-        styles.container,
-        styles.md3Container,
-        {
-          backgroundColor: selected ? selectedBackgroundColor : backgroundColor,
-          borderColor,
-          borderRadius,
-        },
-        style,
-      ]}
-      elevation={elevationStyle}
+      backgroundColor={selected ? selectedBackgroundColor : backgroundColor}
+      borderRadius={borderRadius}
+      style={[styles.container, styles.md3Container, { borderColor }, style]}
+      elevation={elevation}
+      transitionDuration={elevationTransitionDuration}
       {...rest}
       testID={`${testID}-container`}
       theme={theme}
-      container
     >
       <TouchableRipple
         borderless
diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx
index 94424b8ea8..1990bc59a7 100644
--- a/src/components/Chip/helpers.tsx
+++ b/src/components/Chip/helpers.tsx
@@ -24,7 +24,7 @@ const getBorderColor = ({
   isOutlined,
   disabled,
   selectedColor,
-}: BaseProps & { backgroundColor: ColorValue; selectedColor?: ColorValue }) => {
+}: BaseProps & { selectedColor?: ColorValue }) => {
   const isSelectedColor = selectedColor !== undefined;
   const { colors } = md3(theme);
 
@@ -85,19 +85,8 @@ const getDefaultBackgroundColor = ({
   return colors.secondaryContainer;
 };
 
-const getBackgroundColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  customBackgroundColor,
-}: BaseProps & {
-  customBackgroundColor?: ColorValue;
-}) => {
+const getBackgroundColor = ({ theme, isOutlined, disabled }: BaseProps) => {
   const { colors } = md3(theme);
-  if (typeof customBackgroundColor === 'string') {
-    return customBackgroundColor;
-  }
-
   if (disabled) {
     if (isOutlined) {
       return 'transparent';
@@ -108,22 +97,6 @@ const getBackgroundColor = ({
   return getDefaultBackgroundColor({ theme, isOutlined });
 };
 
-const getSelectedBackgroundColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  customBackgroundColor,
-}: BaseProps & {
-  customBackgroundColor?: ColorValue;
-}) => {
-  return getBackgroundColor({
-    theme,
-    disabled,
-    isOutlined,
-    customBackgroundColor,
-  });
-};
-
 const getIconColor = ({
   theme,
   isOutlined,
@@ -153,10 +126,8 @@ export const getChipColors = ({
   isOutlined,
   theme,
   selectedColor,
-  customBackgroundColor,
   disabled,
 }: BaseProps & {
-  customBackgroundColor?: ColorValue;
   disabled?: boolean;
   selectedColor?: ColorValue;
 }) => {
@@ -164,12 +135,6 @@ export const getChipColors = ({
 
   const backgroundColor = getBackgroundColor({
     ...baseChipColorProps,
-    customBackgroundColor,
-  });
-
-  const selectedBackgroundColor = getSelectedBackgroundColor({
-    ...baseChipColorProps,
-    customBackgroundColor,
   });
 
   const contentOpacity = disabled
@@ -180,7 +145,6 @@ export const getChipColors = ({
     borderColor: getBorderColor({
       ...baseChipColorProps,
       selectedColor,
-      backgroundColor,
     }),
     textColor: getTextColor({
       ...baseChipColorProps,
@@ -192,6 +156,6 @@ export const getChipColors = ({
     }),
     contentOpacity,
     backgroundColor,
-    selectedBackgroundColor,
+    selectedBackgroundColor: backgroundColor,
   };
 };
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index a7b082fe89..89832fe658 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import type { StyleProp } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -10,8 +10,9 @@ import DialogIcon from './DialogIcon';
 import DialogScrollArea from './DialogScrollArea';
 import DialogTitle from './DialogTitle';
 import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
+import type { Elevation, ThemeProp } from '../../types';
 import Modal from '../Modal';
+import type { SurfaceStyle } from '../Surface';
 import type { DialogChildProps } from './utils';
 
 export type Props = {
@@ -35,7 +36,7 @@ export type Props = {
    * Content of the `Dialog`.
    */
   children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * @optional
    */
@@ -46,7 +47,7 @@ export type Props = {
   testID?: string;
 };
 
-const DIALOG_ELEVATION: number = 24;
+const DIALOG_ELEVATION: Elevation = 3;
 
 /**
  * Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
@@ -99,6 +100,7 @@ const Dialog = ({
   testID,
 }: Props) => {
   const { right, left } = useSafeAreaInsets();
+
   const theme = useInternalTheme(themeOverrides);
   const borderRadius = theme.shapes.corner.extraLarge;
 
@@ -110,10 +112,11 @@ const Dialog = ({
       dismissableBackButton={dismissableBackButton}
       onDismiss={onDismiss}
       visible={visible}
+      contentBackgroundColor={backgroundColor}
+      contentBorderRadius={borderRadius}
+      contentElevation={DIALOG_ELEVATION}
       contentContainerStyle={[
         {
-          borderRadius,
-          backgroundColor,
           marginHorizontal: Math.max(left, right, 26),
         },
         styles.container,
@@ -158,7 +161,6 @@ const styles = StyleSheet.create({
      * dialog (44 pixel from the top and bottom) it won't be dismissed.
      */
     marginVertical: Platform.OS === 'android' ? 44 : 0,
-    elevation: DIALOG_ELEVATION,
     justifyContent: 'flex-start',
   },
 });
diff --git a/src/components/FAB/Extended.tsx b/src/components/FAB/Extended.tsx
index 06a67cab1f..ff3c500545 100644
--- a/src/components/FAB/Extended.tsx
+++ b/src/components/FAB/Extended.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
@@ -8,14 +8,15 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import Reanimated, {
+import Animated, {
+  type AnimatedStyle,
   measure,
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import { scheduleOnUI } from 'react-native-worklets';
+import { isUIRuntime, scheduleOnUI } from 'react-native-worklets';
 
 import Shell from './Shell';
 import type { Size, Variant } from './tokens';
@@ -101,7 +102,7 @@ export type Props = {
    * Style for positioning the FAB. The visual treatment (size, shape, color)
    * is driven by `variant` and `size`.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
    * TestID used for testing purposes.
    */
@@ -177,7 +178,7 @@ const Extended = ({
 
   const dimensions = getDimensions({ theme, size });
 
-  const offscreenLabelRef = useAnimatedRef<Reanimated.View>();
+  const offscreenLabelRef = useAnimatedRef<Animated.View>();
 
   const widthValue = useSharedValue(dimensions.width);
   const labelOpacity = useSharedValue(expanded ? 1 : 0);
@@ -190,15 +191,20 @@ const Extended = ({
       iconLabelGap,
       trailing,
     } = dimensions;
+
     const targetOpacity = expanded ? 1 : 0;
 
     if (reduceMotion) {
       scheduleOnUI(() => {
         'worklet';
-        const m = measure(offscreenLabelRef);
-        const lw = m?.width ?? 0;
+
+        const labelWidth =
+          Platform.OS === 'web' || isUIRuntime()
+            ? (measure(offscreenLabelRef)?.width ?? 0)
+            : 0;
+
         widthValue.value = expanded
-          ? leading + iconSize + iconLabelGap + lw + trailing
+          ? leading + iconSize + iconLabelGap + labelWidth + trailing
           : collapsedWidth;
         labelOpacity.value = targetOpacity;
       });
@@ -218,9 +224,15 @@ const Extended = ({
 
     scheduleOnUI(() => {
       'worklet';
-      const m = measure(offscreenLabelRef);
-      const lw = m?.width ?? 0;
-      const expandedWidth = leading + iconSize + iconLabelGap + lw + trailing;
+
+      const labelWidth =
+        Platform.OS === 'web' || isUIRuntime()
+          ? (measure(offscreenLabelRef)?.width ?? 0)
+          : 0;
+
+      const expandedWidth =
+        leading + iconSize + iconLabelGap + labelWidth + trailing;
+
       widthValue.value = withSpring(
         expanded ? expandedWidth : collapsedWidth,
         widthSpring
@@ -267,7 +279,7 @@ const Extended = ({
         testID={testID}
         theme={themeOverrides}
       />
-      <Reanimated.View
+      <Animated.View
         ref={offscreenLabelRef}
         style={styles.offscreenMeasure}
         importantForAccessibility="no-hide-descendants"
@@ -280,7 +292,7 @@ const Extended = ({
         >
           {label}
         </AnimatedText>
-      </Reanimated.View>
+      </Animated.View>
     </>
   );
 };
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index fa4de1288c..fac6460c6a 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -8,6 +8,8 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import type { AnimatedStyle } from 'react-native-reanimated';
+
 import Shell from './Shell';
 import type { Size, Variant } from './tokens';
 import type { ThemeProp } from '../../types';
@@ -73,7 +75,7 @@ export type Props = {
    * Style for positioning the FAB. The visual treatment (size, shape, color)
    * is driven by `variant` and `size`.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
    * TestID used for testing purposes.
    */
diff --git a/src/components/FAB/Shell.tsx b/src/components/FAB/Shell.tsx
index 2d2d60e4cd..b9f6279194 100644
--- a/src/components/FAB/Shell.tsx
+++ b/src/components/FAB/Shell.tsx
@@ -8,9 +8,10 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import Reanimated, {
+import Animated, {
   useAnimatedStyle,
   useSharedValue,
+  withSpring,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 import type { AnimatedStyle } from 'react-native-reanimated';
@@ -24,12 +25,14 @@ import {
 } from './tokens';
 import type { Size, Variant } from './tokens';
 import { useFocusRing } from './useFocusRing';
-import { useVisibility } from './useVisibility';
 import { getDimensions, resolveColors } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { toRawSpring } from '../../theme/tokens/sys/motion';
 import type { ShapeToken } from '../../theme/utils/shape';
 import type { Elevation, ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
+import Surface from '../Surface';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
 export type ShellProps = {
@@ -159,7 +162,7 @@ export type ShellProps = {
    * Outer-positioning style. Visual treatment (size, shape, color) comes from
    * `variant` and `size`.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
    * TestID used for testing purposes.
    */
@@ -174,7 +177,7 @@ export type ShellProps = {
 /**
  * Internal shell used by every FAB-flavored component (regular, Extended,
  * morphing menu trigger). Owns the outer container, ripple, clip, and the
- * visibility animation (scale + alpha + shadow). Consumers that need to
+ * visibility animation (scale + alpha). Consumers that need to
  * animate the outer's width/height/borderRadius pass shared values; the
  * static size-driven defaults are used otherwise.
  *
@@ -225,11 +228,30 @@ const Shell = ({
     [theme, variant, containerColor, contentColor]
   );
 
-  const { scale, alpha, shadowStyle } = useVisibility({
-    visible,
-    theme,
-    elevation,
-  });
+  const reduceMotion = useReduceMotion();
+
+  const scale = useSharedValue(visible ? 1 : 0);
+  const alpha = useSharedValue(visible ? 1 : 0);
+
+  React.useEffect(() => {
+    const target = visible ? 1 : 0;
+
+    if (reduceMotion) {
+      scale.value = target;
+      alpha.value = target;
+      return;
+    }
+
+    scale.value = withSpring(
+      target,
+      toRawSpring(theme.motion.spring.fast.spatial)
+    );
+
+    alpha.value = withSpring(
+      target,
+      toRawSpring(theme.motion.spring.fast.effects)
+    );
+  }, [visible, theme, reduceMotion, scale, alpha]);
 
   // Fallback shared values track the static size-driven dimensions. Consumers
   // that don't supply their own animated shared values get these. Keeping
@@ -238,6 +260,7 @@ const Shell = ({
   const fallbackWidth = useSharedValue(dimensions.width);
   const fallbackHeight = useSharedValue(dimensions.height);
   const fallbackBorderRadius = useSharedValue(dimensions.borderRadius);
+
   React.useEffect(() => {
     fallbackWidth.value = dimensions.width;
     fallbackHeight.value = dimensions.height;
@@ -262,10 +285,8 @@ const Shell = ({
       opacity: alpha.value,
       width: width.value,
       height: height.value,
-      borderRadius: borderRadius.value,
-      backgroundColor: containerBg,
     }),
-    [width, height, borderRadius, containerBg]
+    [width, height]
   );
 
   const clipStyle = useAnimatedStyle(
@@ -277,6 +298,7 @@ const Shell = ({
   );
 
   const { focusedSV, onFocus, onBlur } = useFocusRing();
+
   const focusRingStyle = useAnimatedStyle(
     () => ({
       opacity: focusedSV.value ? 1 : 0,
@@ -286,18 +308,21 @@ const Shell = ({
   );
 
   return (
-    <Reanimated.View
+    <Surface
       ref={ref}
+      backgroundColor={containerBg}
+      borderRadius={borderRadius}
       style={[
         style,
         styles.container,
         outerStyle,
-        shadowStyle,
         visible ? styles.pointerEventsAuto : styles.pointerEventsNone,
       ]}
+      elevation={elevation}
       testID={`${testID}-container`}
+      theme={theme}
     >
-      <Reanimated.View style={[styles.clip, clipStyle]}>
+      <Animated.View style={[styles.clip, clipStyle]}>
         {overlay}
         <TouchableRipple
           borderless
@@ -336,15 +361,15 @@ const Shell = ({
             />
           )}
         </TouchableRipple>
-      </Reanimated.View>
-      <Reanimated.View
+      </Animated.View>
+      <Animated.View
         style={[
           styles.focusRing,
           { borderColor: theme.colors.secondary },
           focusRingStyle,
         ]}
       />
-    </Reanimated.View>
+    </Surface>
   );
 };
 
diff --git a/src/components/FAB/useVisibility.ts b/src/components/FAB/useVisibility.ts
deleted file mode 100644
index f6c4b2e645..0000000000
--- a/src/components/FAB/useVisibility.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react';
-import { Platform, type ViewStyle } from 'react-native';
-
-import {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  type AnimatedStyle,
-  type SharedValue,
-} from 'react-native-reanimated';
-
-import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
-import {
-  androidElevationLevels,
-  shadow,
-  shadowLayers,
-} from '../../theme/tokens/sys/elevation';
-import { toRawSpring } from '../../theme/tokens/sys/motion';
-import type { Elevation, InternalTheme } from '../../types';
-
-type UseVisibilityArgs = {
-  visible: boolean;
-  theme: InternalTheme;
-  initialScale?: number;
-  transformOrigin?: ViewStyle['transformOrigin'];
-  /**
-   * Elevation level when shown. Shadow fades in/out with the FAB.
-   */
-  elevation?: Elevation;
-};
-
-type UseVisibilityResult = {
-  scale: SharedValue<number>;
-  alpha: SharedValue<number>;
-  transformOrigin: ViewStyle['transformOrigin'];
-  shadowStyle: AnimatedStyle<ViewStyle>;
-};
-
-/**
- * Animates a FAB in and out: scale + alpha together.
- * Reduce-motion: snap to the final value, no animation.
- *
- * Returns `shadowStyle` too. Put it on the same view as the transform so the
- * shadow stays in sync (Android uses `elevation`, iOS uses `shadow*`, Web uses
- * `boxShadow` -- the outer container's `opacity: alpha.value` handles the
- * visibility fade on Web so the shadow string can be static).
- */
-export function useVisibility({
-  visible,
-  theme,
-  initialScale = 0,
-  transformOrigin = 'center',
-  elevation = 0,
-}: UseVisibilityArgs): UseVisibilityResult {
-  const reduceMotion = useReduceMotion();
-  const scale = useSharedValue(visible ? 1 : initialScale);
-  const alpha = useSharedValue(visible ? 1 : 0);
-
-  React.useEffect(() => {
-    const targetScale = visible ? 1 : initialScale;
-    const targetAlpha = visible ? 1 : 0;
-    if (reduceMotion) {
-      scale.value = targetScale;
-      alpha.value = targetAlpha;
-      return;
-    }
-    scale.value = withSpring(
-      targetScale,
-      toRawSpring(theme.motion.spring.fast.spatial)
-    );
-    alpha.value = withSpring(
-      targetAlpha,
-      toRawSpring(theme.motion.spring.fast.effects)
-    );
-  }, [visible, theme, reduceMotion, scale, alpha, initialScale]);
-
-  const restingElevationDp = androidElevationLevels[elevation];
-  const shadowOffsetHeight = shadowLayers[0].height[elevation];
-  const shadowRadius = shadowLayers[0].shadowRadius[elevation];
-  const shadowOpacity = elevation ? shadowLayers[0].shadowOpacity : 0;
-  const shadowColor = theme.colors.shadow;
-
-  const webShadow =
-    Platform.OS === 'web' ? shadow(elevation, shadowColor) : null;
-
-  const shadowStyle = useAnimatedStyle(() => {
-    if (Platform.OS === 'android') {
-      return { elevation: alpha.value * restingElevationDp };
-    }
-    if (Platform.OS === 'web') {
-      return webShadow ?? {};
-    }
-    return {
-      shadowColor,
-      shadowOpacity: alpha.value * shadowOpacity,
-      shadowOffset: { width: 0, height: shadowOffsetHeight },
-      shadowRadius,
-    };
-  });
-
-  return { scale, alpha, transformOrigin, shadowStyle };
-}
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 270c9289ac..52cb5fa3b2 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
@@ -7,6 +7,8 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import Animated, { type AnimatedStyle } from 'react-native-reanimated';
+
 import { getIconButtonColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
@@ -14,7 +16,6 @@ import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon from '../Icon';
 import type { IconSource } from '../Icon';
-import Surface from '../Surface';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
 const PADDING = 8;
@@ -69,7 +70,7 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   ref?: React.Ref<View>;
   /**
    * TestID used for testing purposes
@@ -147,34 +148,26 @@ const IconButton = ({
 
   const buttonSize = size + 2 * PADDING;
 
-  const {
-    borderWidth = mode === 'outlined' && !selected ? 1 : 0,
-    borderRadius = buttonSize / 2,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-  } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
   const borderStyles = {
-    borderWidth,
-    borderRadius,
+    borderWidth: mode === 'outlined' && !selected ? 1 : 0,
+    borderRadius: buttonSize / 2,
     borderColor,
   };
 
   return (
-    <Surface
+    <Animated.View
       ref={ref}
       testID={`${testID}-container`}
       style={[
+        styles.container,
         {
           backgroundColor: backgroundOpacity < 1 ? undefined : backgroundColor,
           width: buttonSize,
           height: buttonSize,
         },
-        styles.container,
         borderStyles,
         style,
       ]}
-      container
-      elevation={0}
     >
       {backgroundOpacity < 1 && (
         <View
@@ -210,15 +203,14 @@ const IconButton = ({
           )}
         </View>
       </TouchableRipple>
-    </Surface>
+    </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    overflow: 'hidden',
     margin: 6,
-    elevation: 0,
+    overflow: 'hidden',
   },
   touchable: {
     flexGrow: 1,
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index ec4c256dad..63fb0faf1f 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import {
-  Animated,
   Dimensions,
-  Easing,
   Keyboard,
   Platform,
+  Pressable,
   ScrollView,
   StyleSheet,
   View,
-  Pressable,
 } from 'react-native';
 import type { KeyboardEvent as RNKeyboardEvent } from 'react-native';
 import type {
@@ -20,7 +18,16 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { scheduleOnRN } from 'react-native-worklets';
+import useLatestCallback from 'use-latest-callback';
 
 import MenuItem from './MenuItem';
 import { useLocale } from '../../core/locale';
@@ -30,6 +37,7 @@ import { addEventListener } from '../../utils/addEventListener';
 import { BackHandler } from '../../utils/BackHandler/BackHandler';
 import Portal from '../Portal/Portal';
 import Surface from '../Surface';
+import type { SurfaceStyle } from '../Surface';
 
 export type Props = {
   /**
@@ -67,7 +75,7 @@ export type Props = {
   /**
    * Style of menu's inner content.
    */
-  contentStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  contentStyle?: StyleProp<SurfaceStyle>;
   style?: StyleProp<ViewStyle>;
   /**
    * Elevation level of the menu's content. Shadow styles are calculated based on this value. Default `backgroundColor` is taken from the corresponding `theme.colors.elevation` property. By default equals `2`.
@@ -127,8 +135,6 @@ const isCoordinate = (anchor: any): anchor is { x: number; y: number } =>
   typeof anchor?.x === 'number' &&
   typeof anchor?.y === 'number';
 
-const isBrowser = () => Platform.OS === 'web' && 'document' in global;
-
 /**
  * Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.
  *
@@ -193,9 +199,10 @@ const Menu = ({
   keyboardShouldPersistTaps,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const { direction } = useLocale();
-  const { colors: md3Colors } = theme;
   const insets = useSafeAreaInsets();
+
   const [rendered, setRendered] = React.useState(visible);
   const [left, setLeft] = React.useState(0);
   const [top, setTop] = React.useState(0);
@@ -209,13 +216,15 @@ const Menu = ({
     height: WINDOW_LAYOUT.height,
   });
 
-  const opacityAnimationRef = React.useRef(new Animated.Value(0));
-  const scaleAnimationRef = React.useRef(new Animated.ValueXY({ x: 0, y: 0 }));
+  const opacity = useSharedValue(0);
+  const scaleX = useSharedValue(0);
+  const scaleY = useSharedValue(0);
+
   const keyboardHeightRef = React.useRef(0);
   const prevVisible = React.useRef<boolean | null>(null);
   const anchorRef = React.useRef<View | null>(null);
   const menuRef = React.useRef<View | null>(null);
-  const prevRendered = React.useRef(false);
+  const isShownRef = React.useRef(false);
 
   const keyboardDidShow = React.useCallback((e: RNKeyboardEvent) => {
     const keyboardHeight = e.endCoordinates.height;
@@ -258,7 +267,10 @@ const Menu = ({
   const removeListeners = React.useCallback(() => {
     backHandlerSubscriptionRef.current?.remove();
     dimensionsSubscriptionRef.current?.remove();
-    isBrowser() && document.removeEventListener('keyup', handleKeypress);
+
+    if (Platform.OS === 'web' && 'document' in global) {
+      document.removeEventListener('keyup', handleKeypress);
+    }
   }, [handleKeypress]);
 
   const attachListeners = React.useCallback(() => {
@@ -301,6 +313,26 @@ const Menu = ({
     [anchor]
   );
 
+  const handleShowAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (!finished || !prevVisible.current) {
+      return;
+    }
+
+    isShownRef.current = true;
+    focusFirstDOMNode(menuRef.current);
+  });
+
+  const handleHideAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (!finished || prevVisible.current) {
+      return;
+    }
+
+    setMenuLayout({ width: 0, height: 0 });
+    setRendered(false);
+    isShownRef.current = false;
+    focusFirstDOMNode(anchorRef.current);
+  });
+
   const show = React.useCallback(async () => {
     const windowLayoutResult = Dimensions.get('window');
     const [menuLayoutResult, anchorLayoutResult] = await Promise.all([
@@ -308,6 +340,10 @@ const Menu = ({
       measureAnchorLayout(),
     ]);
 
+    if (!prevVisible.current) {
+      return;
+    }
+
     // When visible is true for first render
     // native views can be still not rendered and
     // measureMenuLayout/measureAnchorLayout functions
@@ -344,45 +380,54 @@ const Menu = ({
     });
 
     attachListeners();
+
     requestAnimationFrame(() => {
+      if (!prevVisible.current) {
+        return;
+      }
+
       const { animation } = theme;
-      Animated.parallel([
-        Animated.timing(scaleAnimationRef.current, {
-          toValue: { x: menuLayoutResult.width, y: menuLayoutResult.height },
-          duration: ANIMATION_DURATION * animation.scale,
-          easing: EASING,
-          useNativeDriver: true,
-        }),
-        Animated.timing(opacityAnimationRef.current, {
-          toValue: 1,
-          duration: ANIMATION_DURATION * animation.scale,
-          easing: EASING,
-          useNativeDriver: true,
-        }),
-      ]).start(() => {
-        focusFirstDOMNode(menuRef.current);
-        prevRendered.current = true;
-      });
+
+      const config = {
+        duration: ANIMATION_DURATION * animation.scale,
+        easing: EASING,
+        reduceMotion: ReduceMotion.Never,
+      };
+
+      scaleX.value = withTiming(menuLayoutResult.width, config);
+      scaleY.value = withTiming(menuLayoutResult.height, config);
+
+      opacity.value = withTiming(1, config, (finished) =>
+        scheduleOnRN(handleShowAnimationFinished, finished ?? false)
+      );
     });
-  }, [anchor, attachListeners, measureAnchorLayout, theme]);
+  }, [
+    anchor,
+    attachListeners,
+    handleShowAnimationFinished,
+    measureAnchorLayout,
+    opacity,
+    scaleX,
+    scaleY,
+    theme,
+  ]);
 
   const hide = React.useCallback(() => {
     removeListeners();
+    isShownRef.current = false;
 
     const { animation } = theme;
 
-    Animated.timing(opacityAnimationRef.current, {
-      toValue: 0,
-      duration: ANIMATION_DURATION * animation.scale,
-      easing: EASING,
-      useNativeDriver: true,
-    }).start(() => {
-      setMenuLayout({ width: 0, height: 0 });
-      setRendered(false);
-      prevRendered.current = false;
-      focusFirstDOMNode(anchorRef.current);
-    });
-  }, [removeListeners, theme]);
+    opacity.value = withTiming(
+      0,
+      {
+        duration: ANIMATION_DURATION * animation.scale,
+        easing: EASING,
+        reduceMotion: ReduceMotion.Never,
+      },
+      (finished) => scheduleOnRN(handleHideAnimationFinished, finished ?? false)
+    );
+  }, [handleHideAnimationFinished, opacity, removeListeners, theme]);
 
   const updateVisibility = React.useCallback(
     async (display: boolean) => {
@@ -390,7 +435,7 @@ const Menu = ({
       // We need to do the same here so that the ref is up-to-date
       await Promise.resolve();
 
-      if (display && !prevRendered.current) {
+      if (display && !isShownRef.current) {
         await show();
         return;
       }
@@ -403,8 +448,6 @@ const Menu = ({
   );
 
   React.useEffect(() => {
-    const opacityAnimation = opacityAnimationRef.current;
-    const scaleAnimation = scaleAnimationRef.current;
     keyboardDidShowListenerRef.current = Keyboard.addListener(
       'keyboardDidShow',
       keyboardDidShow
@@ -418,26 +461,24 @@ const Menu = ({
       removeListeners();
       keyboardDidShowListenerRef.current?.remove();
       keyboardDidHideListenerRef.current?.remove();
-      scaleAnimation.removeAllListeners();
-      opacityAnimation?.removeAllListeners();
     };
   }, [removeListeners, keyboardDidHide, keyboardDidShow]);
 
+  if (visible && !rendered) {
+    // Mount the Portal before attempting to show.
+    setRendered(true);
+  }
+
   React.useEffect(() => {
     if (prevVisible.current !== visible) {
       prevVisible.current = visible;
 
-      if (visible) {
-        if (!rendered) {
-          // Mount the Portal before attempting to show.
-          setRendered(true);
-        }
-      } else {
+      if (!visible) {
         // Keep the Portal mounted so the hide animation can finish.
         void updateVisibility(false);
       }
     }
-  }, [visible, rendered, updateVisibility]);
+  }, [visible, updateVisibility]);
 
   React.useEffect(() => {
     if (rendered && visible) {
@@ -452,7 +493,9 @@ const Menu = ({
   });
 
   // We need to translate menu while animating scale to imitate transform origin for scale animation
-  const positionTransforms = [];
+  let startTranslateX = 0;
+  let startTranslateY = 0;
+
   let leftTransformation = left;
   let topTransformation =
     !isCoordinate(anchorRef.current) && anchorPosition === 'bottom'
@@ -461,24 +504,14 @@ const Menu = ({
 
   // Check if menu fits horizontally and if not align it to right.
   if (left <= windowLayout.width - menuLayout.width - SCREEN_INDENT) {
-    positionTransforms.push({
-      translateX: scaleAnimationRef.current.x.interpolate({
-        inputRange: [0, menuLayout.width],
-        outputRange: [-(menuLayout.width / 2), 0],
-      }),
-    });
+    startTranslateX = -(menuLayout.width / 2);
 
     // Check if menu position has enough space from left side
     if (leftTransformation < SCREEN_INDENT) {
       leftTransformation = SCREEN_INDENT;
     }
   } else {
-    positionTransforms.push({
-      translateX: scaleAnimationRef.current.x.interpolate({
-        inputRange: [0, menuLayout.width],
-        outputRange: [menuLayout.width / 2, 0],
-      }),
-    });
+    startTranslateX = menuLayout.width / 2;
 
     leftTransformation += anchorLayout.width - menuLayout.width;
 
@@ -559,24 +592,14 @@ const Menu = ({
       // And bottom side of the screen has more space than top side
       topTransformation <= windowLayout.height - topTransformation)
   ) {
-    positionTransforms.push({
-      translateY: scaleAnimationRef.current.y.interpolate({
-        inputRange: [0, menuLayout.height],
-        outputRange: [-((scrollableMenuHeight || menuLayout.height) / 2), 0],
-      }),
-    });
+    startTranslateY = -((scrollableMenuHeight || menuLayout.height) / 2);
 
     // Check if menu position has enough space from top side
     if (topTransformation < SCREEN_INDENT) {
       topTransformation = SCREEN_INDENT;
     }
   } else {
-    positionTransforms.push({
-      translateY: scaleAnimationRef.current.y.interpolate({
-        inputRange: [0, menuLayout.height],
-        outputRange: [(scrollableMenuHeight || menuLayout.height) / 2, 0],
-      }),
-    });
+    startTranslateY = (scrollableMenuHeight || menuLayout.height) / 2;
 
     topTransformation +=
       anchorLayout.height - (scrollableMenuHeight || menuLayout.height);
@@ -598,25 +621,38 @@ const Menu = ({
     }
   }
 
-  const shadowMenuContainerStyle = {
-    opacity: opacityAnimationRef.current,
+  const shadowMenuContainerStyle: ViewStyle = scrollableMenuHeight
+    ? { height: scrollableMenuHeight }
+    : {};
+
+  const positionTransformsStyle = useAnimatedStyle(() => {
+    const scaleXProgress = menuLayout.width
+      ? scaleX.value / menuLayout.width
+      : 0;
+
+    const scaleYProgress = menuLayout.height
+      ? scaleY.value / menuLayout.height
+      : 0;
+
+    return {
+      transform: [
+        { translateX: startTranslateX * (1 - scaleXProgress) },
+        { translateY: startTranslateY * (1 - scaleYProgress) },
+      ],
+    };
+  });
+
+  const shadowMenuAnimationStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
     transform: [
       {
-        scaleX: scaleAnimationRef.current.x.interpolate({
-          inputRange: [0, menuLayout.width],
-          outputRange: [0, 1],
-        }),
+        scaleX: menuLayout.width ? scaleX.value / menuLayout.width : 0,
       },
       {
-        scaleY: scaleAnimationRef.current.y.interpolate({
-          inputRange: [0, menuLayout.height],
-          outputRange: [0, 1],
-        }),
+        scaleY: menuLayout.height ? scaleY.value / menuLayout.height : 0,
       },
     ],
-    borderRadius: theme.shapes.corner.extraSmall,
-    ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}),
-  };
+  }));
 
   const positionStyle = {
     top: isCoordinate(anchor)
@@ -659,33 +695,36 @@ const Menu = ({
           >
             <Animated.View
               pointerEvents={pointerEvents}
-              style={{
-                transform: positionTransforms,
-              }}
+              style={positionTransformsStyle}
             >
               <Surface
                 mode={mode}
-                pointerEvents={pointerEvents}
+                borderRadius={theme.shapes.corner.extraSmall}
                 style={[
                   styles.shadowMenuContainer,
+                  { pointerEvents },
                   shadowMenuContainerStyle,
-                  {
-                    backgroundColor: md3Colors.elevation[`level${elevation}`],
-                  },
-                  contentStyle,
+                  shadowMenuAnimationStyle,
                 ]}
                 elevation={elevation}
                 testID={`${testID}-surface`}
                 theme={theme}
-                container
               >
-                {(scrollableMenuHeight && (
-                  <ScrollView
-                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-                  >
-                    {children}
-                  </ScrollView>
-                )) || <React.Fragment>{children}</React.Fragment>}
+                <Animated.View
+                  style={[
+                    styles.menuContent,
+                    Boolean(scrollableMenuHeight) && styles.fill,
+                    contentStyle,
+                  ]}
+                >
+                  {(scrollableMenuHeight && (
+                    <ScrollView
+                      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                    >
+                      {children}
+                    </ScrollView>
+                  )) || <React.Fragment>{children}</React.Fragment>}
+                </Animated.View>
               </Surface>
             </Animated.View>
           </View>
@@ -703,8 +742,13 @@ const styles = StyleSheet.create({
   },
   shadowMenuContainer: {
     opacity: 0,
+  },
+  menuContent: {
     paddingVertical: 8,
   },
+  fill: {
+    height: '100%',
+  },
   pressableOverlay: {
     ...Platform.select({
       web: {
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 3c66c885b3..22a3f7ba8e 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react';
-import { Animated, Easing, StyleSheet, Pressable, View } from 'react-native';
+import { StyleSheet, Pressable, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
+import Animated, {
+  cubicBezier,
+  type AnimatedStyle,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
 
 import Surface from './Surface';
+import type { Props as SurfaceProps, SurfaceStyle } from './Surface';
 import { useInternalTheme } from '../core/theming';
 import { tokens } from '../theme/tokens';
-import type { ThemeProp } from '../types';
+import type { Elevation, ThemeProp } from '../types';
 import { addEventListener } from '../utils/addEventListener';
 import { BackHandler } from '../utils/BackHandler/BackHandler';
-import useAnimatedValue from '../utils/useAnimatedValue';
 
 const scrimAlpha = tokens.md.sys.scrim.alpha;
 
@@ -41,9 +45,25 @@ export type Props = {
    */
   children: React.ReactNode;
   /**
-   * Style for the content of the modal
+   * Style for the content of the modal.
+   *
+   * Background color and border radius should be specified via props instead:
+   * - `contentBackgroundColor`
+   * - `contentBorderRadius`
    */
-  contentContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  contentContainerStyle?: StyleProp<SurfaceStyle>;
+  /**
+   * Background color of the modal content. Defaults to transparent.
+   */
+  contentBackgroundColor?: SurfaceProps['backgroundColor'];
+  /**
+   * Border radius of the modal content.
+   */
+  contentBorderRadius?: SurfaceProps['borderRadius'];
+  /**
+   * Elevation level of the modal content. Defaults to level 1.
+   */
+  contentElevation?: Elevation;
   /**
    * Style for the wrapper of the modal.
    * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
@@ -77,12 +97,18 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *
  *   const showModal = () => setVisible(true);
  *   const hideModal = () => setVisible(false);
- *   const containerStyle = { backgroundColor: 'white', padding: 20 };
+ *
+ *   const containerStyle = { padding: 20 };
  *
  *   return (
  *     <PaperProvider>
  *       <Portal>
- *         <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
+ *         <Modal
+ *           visible={visible}
+ *           onDismiss={hideModal}
+ *           contentBackgroundColor="white"
+ *           contentContainerStyle={containerStyle}
+ *         >
  *           <Text>Example Modal.  Click outside this area to dismiss.</Text>
  *         </Modal>
  *       </Portal>
@@ -104,55 +130,46 @@ function Modal({
   onDismiss = () => {},
   children,
   contentContainerStyle,
+  contentBackgroundColor = 'transparent',
+  contentBorderRadius,
+  contentElevation,
   style,
   theme: themeOverrides,
   testID = 'modal',
 }: Props) {
   const theme = useInternalTheme(themeOverrides);
+
   const onDismissCallback = useLatestCallback(onDismiss);
-  const { scale } = theme.animation;
+
   const { top, bottom } = useSafeAreaInsets();
-  const opacity = useAnimatedValue(visible ? 1 : 0);
+
   const [visibleInternal, setVisibleInternal] = React.useState(visible);
+  const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
-  const showModalAnimation = React.useCallback(() => {
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: scale * DEFAULT_DURATION,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start();
-  }, [opacity, scale]);
-
-  const hideModalAnimation = React.useCallback(() => {
-    Animated.timing(opacity, {
-      toValue: 0,
-      duration: scale * DEFAULT_DURATION,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (!finished) {
-        return;
-      }
+  if (visible && !visibleInternal) {
+    setVisibleInternal(true);
+  }
 
-      setVisibleInternal(false);
-    });
-  }, [opacity, scale]);
+  const { scale } = theme.animation;
 
   React.useEffect(() => {
-    if (visibleInternal === visible) {
-      return;
-    }
+    const timeout = setTimeout(() => setAnimatedVisible(visible), 0);
 
-    if (!visibleInternal && visible) {
-      setVisibleInternal(true);
-      return showModalAnimation();
-    }
+    return () => clearTimeout(timeout);
+  }, [visible]);
 
-    if (visibleInternal && !visible) {
-      return hideModalAnimation();
+  React.useEffect(() => {
+    if (visible || !visibleInternal) {
+      return undefined;
     }
-  }, [visible, showModalAnimation, hideModalAnimation, visibleInternal]);
+
+    const timeout = setTimeout(
+      () => setVisibleInternal(false),
+      scale * DEFAULT_DURATION
+    );
+
+    return () => clearTimeout(timeout);
+  }, [scale, visible, visibleInternal]);
 
   React.useEffect(() => {
     if (!visible) {
@@ -172,10 +189,33 @@ function Modal({
       'hardwareBackPress',
       onHardwareBackPress
     );
+
     return () => subscription.remove();
   }, [dismissable, dismissableBackButton, onDismissCallback, visible]);
 
-  if (!visibleInternal) {
+  const transitionTimingFunction = cubicBezier(1 / 3, 1, 2 / 3, 1);
+
+  const backdropTransitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionDuration: scale * DEFAULT_DURATION,
+    transitionProperty: 'opacity',
+    transitionTimingFunction,
+  };
+
+  const contentTransitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionProperty: 'opacity',
+    transitionTimingFunction,
+  };
+
+  const backdropStyle: AnimatedStyle<ViewStyle> = {
+    backgroundColor: theme.colors.scrim,
+    opacity: animatedVisible ? scrimAlpha : 0,
+  };
+
+  const contentStyle: AnimatedStyle<ViewStyle> = {
+    opacity: animatedVisible ? 1 : 0,
+  };
+
+  if (!visible && !visibleInternal) {
     return null;
   }
 
@@ -194,16 +234,7 @@ function Modal({
         disabled={!dismissable}
         onPress={dismissable ? onDismissCallback : undefined}
         importantForAccessibility="no"
-        style={[
-          styles.backdrop,
-          {
-            backgroundColor: theme.colors.scrim,
-            opacity: opacity.interpolate({
-              inputRange: [0, 1],
-              outputRange: [0, scrimAlpha],
-            }),
-          },
-        ]}
+        style={[styles.backdrop, backdropStyle, backdropTransitionStyle]}
         testID={`${testID}-backdrop`}
       />
       <View
@@ -218,8 +249,16 @@ function Modal({
         <Surface
           testID={`${testID}-surface`}
           theme={theme}
-          style={[{ opacity }, styles.content, contentContainerStyle]}
-          container
+          backgroundColor={contentBackgroundColor}
+          borderRadius={contentBorderRadius}
+          style={[
+            styles.content,
+            contentStyle,
+            contentTransitionStyle,
+            contentContainerStyle,
+          ]}
+          elevation={contentElevation}
+          transitionDuration={scale * DEFAULT_DURATION}
         >
           {children}
         </Surface>
@@ -238,9 +277,7 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFill,
     justifyContent: 'center',
   },
-  // eslint-disable-next-line react-native/no-color-literals
   content: {
-    backgroundColor: 'transparent',
     justifyContent: 'center',
   },
 });
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index b0819b5710..8d7e038c31 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, TextInput, View } from 'react-native';
+import { Platform, StyleSheet, TextInput, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
   StyleProp,
   TextInputProps,
   TextStyle,
-  ViewStyle,
 } from 'react-native';
 
 import ActivityIndicator from './ActivityIndicator';
@@ -15,10 +14,11 @@ import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
+import type { SurfaceStyle } from './Surface';
 import { useLocale } from '../core/locale';
 import { useInternalTheme } from '../core/theming';
 import { cornerNone } from '../theme/tokens/sys/shape';
-import type { ThemeProp } from '../types';
+import type { Elevation, ThemeProp } from '../types';
 
 interface Style {
   marginRight: number;
@@ -111,12 +111,12 @@ export type Props = TextInputProps & {
    * @supported Available in v5.x with theme version 3
    * Changes Searchbar shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * Set style of the TextInput component inside the searchbar
    */
   inputStyle?: StyleProp<TextStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   /**
    * Custom flag for replacing clear button with activity indicator.
    */
@@ -188,8 +188,10 @@ const Searchbar = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const { direction } = useLocale();
   const { colors, fonts } = theme;
+
   const root = React.useRef<TextInput>(null);
 
   React.useImperativeHandle(ref, () => ({
@@ -230,18 +232,11 @@ const Searchbar = ({
 
   return (
     <Surface
-      style={[
-        { borderRadius: theme.shapes.corner.extraSmall },
-        {
-          backgroundColor: theme.colors.surfaceContainerHigh,
-          borderRadius: isBarMode ? theme.shapes.corner.extraLarge : cornerNone,
-        },
-        styles.container,
-        style,
-      ]}
+      backgroundColor={theme.colors.surfaceContainerHigh}
+      borderRadius={isBarMode ? theme.shapes.corner.extraLarge : cornerNone}
+      style={[styles.container, style]}
       testID={`${testID}-container`}
       elevation={elevation}
-      container
       theme={theme}
     >
       <IconButton
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index 05e2b3d6c1..297825c130 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -1,8 +1,17 @@
 import * as React from 'react';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import {
+  Easing,
+  interpolate,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import Button from './Button/Button';
@@ -10,12 +19,13 @@ import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
 import Surface from './Surface';
+import type { SurfaceStyle } from './Surface';
 import Text from './Typography/Text';
 import { useLocale } from '../core/locale';
 import { useInternalTheme } from '../core/theming';
-import type { $Omit, $RemoveChildren, ThemeProp } from '../types';
+import type { $RemoveChildren, Elevation, ThemeProp } from '../types';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Whether the Snackbar is currently visible.
    */
@@ -58,7 +68,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * @supported Available in v5.x with theme version 3
    * Changes Snackbar shadow and background on iOS and Android.
    */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * Specifies the largest possible scale a text font can reach.
    */
@@ -71,7 +81,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Style for the content of the snackbar
    */
   contentStyle?: StyleProp<ViewStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<SurfaceStyle>;
   ref?: React.RefObject<View>;
   /**
    * @optional
@@ -152,82 +162,83 @@ const Snackbar = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const { direction } = useLocale();
+
   const { bottom, right, left } = useSafeAreaInsets();
 
-  const { current: opacity } = React.useRef<Animated.Value>(
-    new Animated.Value(0.0)
-  );
+  const opacity = useSharedValue(0);
+
   const hideTimeout = React.useRef<ReturnType<typeof setTimeout> | undefined>(
     undefined
   );
+  const isMounted = React.useRef(true);
 
   const [hidden, setHidden] = React.useState(!visible);
 
   const { scale } = theme.animation;
 
-  const animateShow = useLatestCallback(() => {
-    if (hideTimeout.current) clearTimeout(hideTimeout.current);
-
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration: 200 * scale,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        const isInfinity =
-          duration === Number.POSITIVE_INFINITY ||
-          duration === Number.NEGATIVE_INFINITY;
-
-        if (!isInfinity) {
-          hideTimeout.current = setTimeout(onDismiss, duration);
-        }
-      }
-    });
-  });
-
-  const handleOnVisible = useLatestCallback(() => {
-    // show
+  if (visible && hidden) {
     setHidden(false);
+  }
+
+  const handleShowAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (!finished || !visible || !isMounted.current) {
+      return;
+    }
+
+    const isInfinity =
+      duration === Number.POSITIVE_INFINITY ||
+      duration === Number.NEGATIVE_INFINITY;
+
+    if (!isInfinity) {
+      hideTimeout.current = setTimeout(onDismiss, duration);
+    }
   });
 
-  const handleOnHidden = useLatestCallback(() => {
-    // hide
+  React.useEffect(() => {
     if (hideTimeout.current) {
       clearTimeout(hideTimeout.current);
+      hideTimeout.current = undefined;
     }
 
-    Animated.timing(opacity, {
-      toValue: 0,
-      duration: 100 * scale,
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        setHidden(true);
+    opacity.value = withTiming(
+      visible ? 1 : 0,
+      {
+        duration: (visible ? 200 : 100) * scale,
+        easing: visible ? Easing.out(Easing.ease) : Easing.inOut(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      },
+      (finished) => {
+        if (visible) {
+          scheduleOnRN(handleShowAnimationFinished, finished ?? false);
+        } else if (finished) {
+          scheduleOnRN(setHidden, true);
+        }
       }
-    });
-  });
+    );
+  }, [handleShowAnimationFinished, opacity, scale, visible]);
 
   React.useEffect(() => {
-    if (!hidden) {
-      animateShow();
-    }
-  }, [animateShow, hidden]);
+    isMounted.current = true;
 
-  React.useEffect(() => {
     return () => {
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
+      isMounted.current = false;
+
+      if (hideTimeout.current) {
+        clearTimeout(hideTimeout.current);
+      }
     };
   }, []);
 
-  React.useLayoutEffect(() => {
-    if (visible) {
-      handleOnVisible();
-    } else {
-      handleOnHidden();
-    }
-  }, [visible, handleOnVisible, handleOnHidden]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [
+      {
+        scale: visible ? interpolate(opacity.value, [0, 1], [0.9, 1]) : 1,
+      },
+    ],
+  }));
 
   const { colors } = theme;
 
@@ -255,26 +266,21 @@ const Snackbar = ({
     paddingHorizontal: Math.max(left, right),
   };
 
-  const renderChildrenWithWrapper = () => {
-    if (typeof children === 'string') {
-      return (
-        <Text
-          variant="bodyMedium"
-          style={[styles.content, { color: textColor }]}
-          maxFontSizeMultiplier={maxFontSizeMultiplier}
-        >
-          {children}
-        </Text>
-      );
-    }
-
-    return (
+  const content =
+    typeof children === 'string' ? (
+      <Text
+        variant="bodyMedium"
+        style={[styles.content, { color: textColor }]}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+      >
+        {children}
+      </Text>
+    ) : (
       <View style={[styles.content, contentStyle]}>
         {/* View is added to allow multiple lines support for Text component as children */}
         <View>{children}</View>
       </View>
     );
-  };
 
   return (
     <View
@@ -282,34 +288,16 @@ const Snackbar = ({
       style={[styles.wrapper, wrapperPaddings, wrapperStyle]}
     >
       <Surface
-        pointerEvents="box-none"
         aria-live="polite"
         theme={theme}
-        style={[
-          styles.container,
-          {
-            backgroundColor,
-            borderRadius: theme.shapes.corner.extraSmall,
-            opacity: opacity,
-            transform: [
-              {
-                scale: visible
-                  ? opacity.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [0.9, 1],
-                    })
-                  : 1,
-              },
-            ],
-          },
-          style,
-        ]}
+        backgroundColor={backgroundColor}
+        borderRadius={theme.shapes.corner.extraSmall}
+        style={[styles.container, animatedStyle, style]}
         testID={testID}
-        container
         elevation={elevation}
         {...rest}
       >
-        {renderChildrenWithWrapper()}
+        {content}
         {(action || isIconButton) && (
           <View style={[styles.actionsContainer, { marginLeft }]}>
             {action ? (
@@ -385,8 +373,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     margin: 8,
-    borderRadius: 4,
     minHeight: 48,
+    pointerEvents: 'box-none',
   },
   content: {
     marginHorizontal: 16,
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
index b0b0f0c4aa..fa84f49051 100644
--- a/src/components/Surface.tsx
+++ b/src/components/Surface.tsx
@@ -1,205 +1,147 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
-import type {
-  ColorValue,
-  ShadowStyleIOS,
-  StyleProp,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import Animated, {
+  cubicBezier,
+  isSharedValue,
+  type AnimatedStyle,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 import { useInternalTheme } from '../core/theming';
-import {
-  androidElevationLevels,
-  elevationInputRange,
-  shadow,
-  shadowLayers,
-} from '../theme/tokens/sys/elevation';
+import { androidElevationLevels, shadow } from '../theme/tokens/sys/elevation';
 import type { Elevation, ThemeProp } from '../types';
-import { isAnimatedValue } from '../utils/animations';
-import { splitStyles } from '../utils/splitStyles';
 
-type SurfaceElevation = Elevation | Animated.Value;
+type AnimatedStyleProp<Key extends keyof ViewStyle> = Extract<
+  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,
+  Record<Key, unknown>
+>[Key];
+
+type BorderRadius = AnimatedStyleProp<'borderRadius'>;
 
-export type Props = Omit<ViewProps, 'style'> & {
+type SurfaceVisualProps = {
+  /**
+   * Background color of the Surface. Overrides the color derived from
+   * `elevation`.
+   */
+  backgroundColor?: ColorValue;
+  /**
+   * Radius of every corner of the Surface.
+   */
+  borderRadius?: BorderRadius;
+  /**
+   * Radius of the bottom-end corner of the Surface.
+   */
+  borderBottomEndRadius?: BorderRadius;
+  /**
+   * Radius of the bottom-left corner of the Surface.
+   */
+  borderBottomLeftRadius?: BorderRadius;
   /**
-   * Content of the `Surface`.
+   * Radius of the bottom-right corner of the Surface.
    */
-  children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  borderBottomRightRadius?: BorderRadius;
   /**
-   * @supported Available in v5.x with theme version 3
-   * Changes shadows and background on iOS and Android.
-   * Used to create UI hierarchy between components.
-   *
-   * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
-   *
-   * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
-   * It's no longer supported with theme version 3 and you should use `elevation` property instead.
+   * Radius of the bottom-start corner of the Surface.
    */
-  elevation?: SurfaceElevation;
+  borderBottomStartRadius?: BorderRadius;
   /**
-   * @supported Available in v5.x with theme version 3
-   * Mode of the Surface.
-   * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
-   * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
+   * Radius of the end-end corner of the Surface.
    */
-  mode?: 'flat' | 'elevated';
+  borderEndEndRadius?: BorderRadius;
   /**
-   * @optional
+   * Radius of the end-start corner of the Surface.
    */
-  theme?: ThemeProp;
+  borderEndStartRadius?: BorderRadius;
   /**
-   * TestID used for testing purposes
+   * Radius of the start-end corner of the Surface.
    */
-  testID?: string;
-  ref?: React.Ref<View>;
+  borderStartEndRadius?: BorderRadius;
   /**
-   * @internal
+   * Radius of the start-start corner of the Surface.
    */
-  container?: boolean;
+  borderStartStartRadius?: BorderRadius;
+  /**
+   * Radius of the top-end corner of the Surface.
+   */
+  borderTopEndRadius?: BorderRadius;
+  /**
+   * Radius of the top-left corner of the Surface.
+   */
+  borderTopLeftRadius?: BorderRadius;
+  /**
+   * Radius of the top-right corner of the Surface.
+   */
+  borderTopRightRadius?: BorderRadius;
+  /**
+   * Radius of the top-start corner of the Surface.
+   */
+  borderTopStartRadius?: BorderRadius;
+  /**
+   * Corner curve of the Surface on iOS.
+   */
+  borderCurve?: ViewStyle['borderCurve'];
 };
 
-const outerLayerStyleProperties: (keyof ViewStyle)[] = [
-  'position',
-  'alignSelf',
-  'top',
-  'right',
-  'bottom',
-  'left',
-  'start',
-  'end',
-  'flex',
-  'flexShrink',
-  'flexGrow',
-  'width',
-  'height',
-  'transform',
-  'opacity',
-];
+export type SurfaceStyle = AnimatedStyle<
+  Omit<ViewStyle, keyof SurfaceVisualProps | 'elevation'>
+>;
 
-function getStyleForShadowLayer(
-  elevation: SurfaceElevation,
-  layer: 0 | 1,
-  shadowColor: ColorValue
-): Animated.WithAnimatedValue<ShadowStyleIOS> {
-  if (isAnimatedValue(elevation)) {
-    return {
-      shadowColor,
-      shadowOpacity: elevation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, shadowLayers[layer].shadowOpacity],
-        extrapolate: 'clamp',
-      }),
-      shadowOffset: {
-        width: 0,
-        height: elevation.interpolate({
-          inputRange: elevationInputRange,
-          outputRange: shadowLayers[layer].height,
-        }),
-      },
-      shadowRadius: elevation.interpolate({
-        inputRange: elevationInputRange,
-        outputRange: shadowLayers[layer].shadowRadius,
-      }),
-    };
-  }
-
-  return {
-    shadowColor,
-    shadowOpacity: elevation ? shadowLayers[layer].shadowOpacity : 0,
-    shadowOffset: {
-      width: 0,
-      height: shadowLayers[layer].height[elevation],
-    },
-    shadowRadius: shadowLayers[layer].shadowRadius[elevation],
+export type Props = Omit<ViewProps, 'pointerEvents' | 'style'> &
+  SurfaceVisualProps & {
+    /**
+     * Duration of the background, elevation, and shadow transitions in
+     * milliseconds.
+     */
+    transitionDuration?: number;
+    /**
+     * Style of the Surface.
+     *
+     * This doesn't support all View style properties:
+     * - Background color and border radius should be specified via props instead.
+     * - `overflow: 'hidden'` is not supported with `elevation` as it can clip the shadow.
+     *    To achieve the same effect, wrap the content in a child View with the overflow style.
+     */
+    style?: StyleProp<SurfaceStyle>;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Changes shadows and background on iOS and Android.
+     * Used to create UI hierarchy between components.
+     *
+     * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
+     *
+     * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
+     * It's no longer supported with theme version 3 and you should use `elevation` property instead.
+     */
+    elevation?: Elevation;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Mode of the Surface.
+     * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
+     * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
+     */
+    mode?: 'flat' | 'elevated';
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * Content of the `Surface`.
+     */
+    children: React.ReactNode;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    ref?: React.Ref<View>;
   };
-}
-
-type SurfaceIOSProps = Omit<Props, 'elevation'> & {
-  elevation: SurfaceElevation;
-  backgroundColor?:
-    | ColorValue
-    | Animated.AnimatedInterpolation<string | number>;
-  shadowColor: ColorValue;
-};
-
-const SurfaceIOS = ({
-  elevation,
-  style,
-  backgroundColor,
-  shadowColor,
-  testID,
-  children,
-  mode = 'elevated',
-  container,
-  ref,
-  ...props
-}: SurfaceIOSProps) => {
-  const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-    const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-    const [filteredStyles, outerLayerStyles, borderRadiusStyles] = splitStyles(
-      flattenedStyles,
-      (style) =>
-        outerLayerStyleProperties.includes(style) || style.startsWith('margin'),
-      (style) => style.startsWith('border') && style.endsWith('Radius')
-    );
-
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      filteredStyles.overflow === 'hidden' &&
-      elevation !== 0
-    ) {
-      console.warn(
-        'When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.'
-      );
-    }
-
-    const bgColor = flattenedStyles.backgroundColor || backgroundColor;
-
-    const isElevated = mode === 'elevated';
-
-    const outerLayerViewStyles = {
-      ...(isElevated && getStyleForShadowLayer(elevation, 0, shadowColor)),
-      ...outerLayerStyles,
-      ...borderRadiusStyles,
-      backgroundColor: bgColor,
-    };
-
-    const innerLayerViewStyles = {
-      ...(isElevated && getStyleForShadowLayer(elevation, 1, shadowColor)),
-      ...filteredStyles,
-      ...borderRadiusStyles,
-      flex:
-        flattenedStyles.height || (!container && flattenedStyles.flex)
-          ? 1
-          : undefined,
-      backgroundColor: bgColor,
-    };
-
-    return [outerLayerViewStyles, innerLayerViewStyles];
-  }, [style, elevation, backgroundColor, shadowColor, mode, container]);
-
-  return (
-    <Animated.View
-      ref={ref}
-      style={outerLayerViewStyles}
-      testID={`${testID}-outer-layer`}
-    >
-      <Animated.View {...props} style={innerLayerViewStyles} testID={testID}>
-        {children}
-      </Animated.View>
-    </Animated.View>
-  );
-};
 
 /**
  * Surface is a basic container that can give depth to an element with elevation shadow.
- * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
- * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+ *
+ * On Android, Surface uses the native `elevation` style,
+ * and falls back to shadows that approximate the elevation on other platforms.
  *
  * ## Usage
  * ```js
@@ -208,7 +150,7 @@ const SurfaceIOS = ({
  * import { StyleSheet } from 'react-native';
  *
  * const MyComponent = () => (
- *   <Surface style={styles.surface} elevation={4}>
+ *   <Surface style={styles.surface} elevation={4} borderRadius={8}>
  *      <Text>Surface</Text>
  *   </Surface>
  * );
@@ -217,9 +159,9 @@ const SurfaceIOS = ({
  *
  * const styles = StyleSheet.create({
  *   surface: {
- *     padding: 8,
  *     height: 80,
  *     width: 80,
+ *     padding: 8,
  *     alignItems: 'center',
  *     justifyContent: 'center',
  *   },
@@ -231,44 +173,92 @@ const Surface = ({
   children,
   theme: overridenTheme,
   style,
-  testID = 'surface',
+  backgroundColor: customBackgroundColor,
+  borderRadius,
+  borderBottomEndRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderBottomStartRadius,
+  borderEndEndRadius,
+  borderEndStartRadius,
+  borderStartEndRadius,
+  borderStartStartRadius,
+  borderTopEndRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderTopStartRadius,
+  borderCurve = 'continuous',
+  testID,
   mode = 'elevated',
+  transitionDuration: customTransitionDuration,
   ref,
-  ...props
+  ...rest
 }: Props) => {
   const theme = useInternalTheme(overridenTheme);
 
   const { colors } = theme;
 
-  const backgroundColor = (() => {
-    if (isAnimatedValue(elevation)) {
-      return elevation.interpolate({
-        inputRange: elevationInputRange,
-        outputRange: elevationInputRange.map((elevation) => {
-          return colors.elevation?.[`level${elevation}`];
-        }),
-      });
-    }
+  const backgroundColor =
+    customBackgroundColor ?? colors.elevation?.[`level${elevation}`];
 
-    return colors.elevation?.[`level${elevation}`];
-  })();
+  const backgroundStyle = { backgroundColor };
+
+  const shapeProps = {
+    borderRadius,
+    borderBottomEndRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomStartRadius,
+    borderEndEndRadius,
+    borderEndStartRadius,
+    borderStartEndRadius,
+    borderStartStartRadius,
+    borderTopEndRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopStartRadius,
+    borderCurve,
+  };
+
+  // Reanimated styles can't be shared between different views
+  // So we need to create two separate styles for the surface and shadow layers
+  const visualStyle = useSurfaceVisualStyle(shapeProps);
+  const shadowVisualStyle = useSurfaceVisualStyle(shapeProps);
 
   const isElevated = mode === 'elevated';
 
+  const transitionDuration =
+    customTransitionDuration ??
+    theme.motion.duration.short3 * theme.animation.scale;
+  const transitionDurationStyle: AnimatedStyle<ViewStyle> = {
+    transitionDuration,
+  };
+  const transitionTimingFunction = cubicBezier(...theme.motion.easing.standard);
+  const transitionProperty =
+    // FIXME: Reanimated can't animate PlatformColor and DynamicColorIOS
+    typeof backgroundColor === 'string' ? ['backgroundColor' as const] : [];
+
   if (Platform.OS === 'web') {
-    const { pointerEvents = 'auto' } = props;
+    const [elevationShadow] = shadow(elevation, theme.colors.shadow);
+
+    const transitionStyle: AnimatedStyle<ViewStyle> = {
+      transitionTimingFunction,
+      transitionProperty: [...transitionProperty, 'boxShadow'],
+    };
+
     return (
       <Animated.View
-        {...props}
-        pointerEvents={pointerEvents}
+        {...rest}
         ref={ref}
         testID={testID}
         style={[
-          { backgroundColor },
-          elevation && isElevated
-            ? shadow(elevation, theme.colors.shadow)
-            : null,
+          transitionStyle,
+          styles.container,
           style,
+          transitionDurationStyle,
+          backgroundStyle,
+          visualStyle,
+          isElevated ? elevationShadow : null,
         ]}
       >
         {children}
@@ -277,40 +267,25 @@ const Surface = ({
   }
 
   if (Platform.OS === 'android') {
-    const getElevationAndroid = () => {
-      if (isAnimatedValue(elevation)) {
-        return elevation.interpolate({
-          inputRange: elevationInputRange,
-          outputRange: androidElevationLevels,
-        });
-      }
+    const elevationAndroid = androidElevationLevels[elevation];
 
-      return androidElevationLevels[elevation];
+    const transitionStyle: AnimatedStyle<ViewStyle> = {
+      transitionTimingFunction,
+      transitionProperty: [...transitionProperty, 'elevation'],
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-    const { margin, padding, transform, borderRadius } = (StyleSheet.flatten(
-      style
-    ) || {}) as ViewStyle;
-
-    const outerLayerStyles = { margin, padding, transform, borderRadius };
-    const sharedStyle = [{ backgroundColor }, style];
-
     return (
       <Animated.View
-        {...props}
+        {...rest}
         testID={testID}
         ref={ref}
         style={[
-          {
-            backgroundColor,
-            transform,
-          },
-          outerLayerStyles,
-          sharedStyle,
-          isElevated && {
-            elevation: getElevationAndroid(),
-          },
+          transitionStyle,
+          style,
+          transitionDurationStyle,
+          backgroundStyle,
+          visualStyle,
+          isElevated && { elevation: elevationAndroid },
         ]}
       >
         {children}
@@ -318,20 +293,97 @@ const Surface = ({
     );
   }
 
+  const [spotShadow, ambientShadow] = shadow(elevation, theme.colors.shadow);
+
+  const transitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionTimingFunction,
+    transitionProperty: [
+      ...transitionProperty,
+      'shadowOpacity',
+      'shadowOffset',
+      'shadowRadius',
+    ],
+  };
+
   return (
-    <SurfaceIOS
-      {...props}
+    <Animated.View
+      {...rest}
       ref={ref}
-      elevation={elevation}
-      backgroundColor={backgroundColor}
-      shadowColor={theme.colors.shadow}
-      style={style}
+      style={[
+        transitionStyle,
+        style,
+        transitionDurationStyle,
+        backgroundStyle,
+        visualStyle,
+        isElevated && spotShadow,
+      ]}
       testID={testID}
-      mode={mode}
     >
+      {isElevated ? (
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            styles.shadow,
+            transitionStyle,
+            transitionDurationStyle,
+            backgroundStyle,
+            shadowVisualStyle,
+            ambientShadow,
+          ]}
+        />
+      ) : null}
       {children}
-    </SurfaceIOS>
+    </Animated.View>
   );
 };
 
+const useSurfaceVisualStyle = ({
+  borderRadius,
+  borderBottomEndRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderBottomStartRadius,
+  borderEndEndRadius,
+  borderEndStartRadius,
+  borderStartEndRadius,
+  borderStartStartRadius,
+  borderTopEndRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderTopStartRadius,
+  borderCurve,
+}: Omit<SurfaceVisualProps, 'backgroundColor'>) =>
+  useAnimatedStyle<ViewStyle>(() =>
+    Object.fromEntries(
+      Object.entries({
+        borderRadius,
+        borderBottomEndRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        borderBottomStartRadius,
+        borderEndEndRadius,
+        borderEndStartRadius,
+        borderStartEndRadius,
+        borderStartStartRadius,
+        borderTopEndRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderTopStartRadius,
+        borderCurve,
+      }).map(([property, value]) => [
+        property,
+        isSharedValue(value) ? value.value : value,
+      ])
+    )
+  );
+
+const styles = StyleSheet.create({
+  container: {
+    pointerEvents: 'auto',
+  },
+  shadow: {
+    pointerEvents: 'none',
+  },
+});
+
 export default Surface;
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
index 22598c16b2..50bb50547e 100644
--- a/src/components/ToggleButton/ToggleButton.tsx
+++ b/src/components/ToggleButton/ToggleButton.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { StyleSheet, View, Animated } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
+import type { AnimatedStyle } from 'react-native-reanimated';
+
 import { ToggleButtonGroupContext } from './ToggleButtonGroup';
 import { getToggleButtonColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
@@ -42,7 +44,7 @@ export type Props = {
    * Status of button.
    */
   status?: 'checked' | 'unchecked';
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
    * @optional
    */
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
index 27cd573f9d..5bba9563f4 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -1,7 +1,4 @@
-import { Animated } from 'react-native';
-
-import { describe, expect, it, jest } from '@jest/globals';
-import { act } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { getTheme } from '../../../core/theming';
@@ -280,176 +277,53 @@ describe('AppbarContent', () => {
 });
 
 describe('getAppbarColors', () => {
-  const elevation = 4;
+  const elevated = true;
   const customBackground = 'aquamarine';
 
   it('should return custom color no matter what is the theme version', () => {
     expect(
-      getAppbarBackgroundColor(getTheme(), elevation, customBackground)
+      getAppbarBackgroundColor(getTheme(), elevated, customBackground)
     ).toBe(customBackground);
   });
 
-  it('should return v3 light color if theme version is 3', () => {
-    expect(getAppbarBackgroundColor(getTheme(), elevation)).toBe(
-      tokens.md.ref.palette.neutral98
+  it('returns the light surface container color for an elevated appbar', () => {
+    expect(getAppbarBackgroundColor(getTheme(), elevated)).toBe(
+      tokens.md.ref.palette.neutral94
     );
   });
 
-  it('should return v3 dark color if theme version is 3', () => {
-    expect(getAppbarBackgroundColor(getTheme(true), elevation)).toBe(
-      tokens.md.ref.palette.neutral6
+  it('returns the dark surface container color for an elevated appbar', () => {
+    expect(getAppbarBackgroundColor(getTheme(true), elevated)).toBe(
+      tokens.md.ref.palette.neutral12
     );
   });
 });
 
-describe('animated value changes correctly', () => {
-  it('appbar animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
-    await render(
-      <Appbar testID="appbar" style={[{ transform: [{ scale: value }] }]}>
-        <Appbar.Action icon="menu" />
-      </Appbar>
+describe('getAppbarBorders', () => {
+  const borderStyles = {
+    borderRadius: 1,
+    borderBottomEndRadius: 2,
+    borderBottomStartRadius: 3,
+    borderEndEndRadius: 4,
+    borderEndStartRadius: 5,
+    borderStartEndRadius: 6,
+    borderStartStartRadius: 7,
+    borderTopEndRadius: 8,
+    borderTopStartRadius: 9,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 11,
+    borderBottomRightRadius: 12,
+    borderBottomLeftRadius: 13,
+    borderCurve: 'continuous' as const,
+  };
+
+  it('returns every border style and excludes unrelated styles', () => {
+    expect(getAppbarBorders({ ...borderStyles, height: 60, top: 13 })).toEqual(
+      borderStyles
     );
-    expect(screen.getByTestId('appbar-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    await act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(screen.getByTestId('appbar-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
-
-  it('action animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
-    await render(
-      <Appbar>
-        <Appbar.Action
-          icon="menu"
-          style={[{ transform: [{ scale: value }] }]}
-          testID="appbar-action"
-        />
-      </Appbar>
-    );
-    expect(
-      screen.getByTestId('appbar-action-container-outer-layer')
-    ).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    await act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(
-      screen.getByTestId('appbar-action-container-outer-layer')
-    ).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
   });
 
-  it('back action animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
-    await render(
-      <Appbar>
-        <Appbar.BackAction
-          style={[{ transform: [{ scale: value }] }]}
-          testID="appbar-back-action"
-        />
-      </Appbar>
-    );
-    expect(
-      screen.getByTestId('appbar-back-action-container-outer-layer')
-    ).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    await act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(
-      screen.getByTestId('appbar-back-action-container-outer-layer')
-    ).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
-
-  it('header animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
-    await render(
-      <SafeAreaProvider>
-        <Appbar.Header
-          style={[{ transform: [{ scale: value }] }]}
-          testID="appbar-header"
-        >
-          {null}
-        </Appbar.Header>
-      </SafeAreaProvider>
-    );
-    expect(screen.getByTestId('appbar-header-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    await act(() => {
-      jest.advanceTimersByTime(200);
-    });
-
-    expect(screen.getByTestId('appbar-header-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
-
-  it('header bottom border radius applied correctly', async () => {
-    const style = { borderBottomLeftRadius: 16, borderBottomRightRadius: 16 };
-
-    await render(
-      <SafeAreaProvider>
-        <Appbar.Header style={style} testID="appbar-header">
-          {null}
-        </Appbar.Header>
-      </SafeAreaProvider>
-    );
-    expect(screen.getByTestId('appbar-header-root-layer')).toHaveStyle(style);
-  });
-
-  describe('getAppbarBorders', () => {
-    const style = { borderRadius: 10, height: 60, top: 13 };
-
-    it('should return only border radius styles', () => {
-      expect(getAppbarBorders(style)).toEqual({ borderRadius: 10 });
-    });
-
-    it('should return empty object if no borders are passed', () => {
-      const style = { height: 60, top: 13 };
-      expect(getAppbarBorders(style)).toEqual({});
-    });
+  it('returns an empty object when no border styles are passed', () => {
+    expect(getAppbarBorders({ height: 60, top: 13 })).toEqual({});
   });
 });
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index a5d9d95766..30aaf4e66d 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -4,33 +4,43 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(254, 247, 255, 1)",
-      "height": 64,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "height": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
         "alignItems": "center",
-        "backgroundColor": "rgba(254, 247, 255, 1)",
-        "flex": 1,
         "flexDirection": "row",
+      },
+      {
         "paddingBottom": undefined,
-        "paddingHorizontal": 4,
-        "paddingLeft": undefined,
-        "paddingRight": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
         "paddingTop": undefined,
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -38,16 +48,88 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
     }
-    testID="surface"
-  >
-    <View
-      collapsable={false}
-      style={
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {},
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+        {},
         {
           "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
           "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -55,19 +137,47 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
-        }
-      }
-      testID="search-bar-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        },
+      ]
+    }
+    testID="search-bar-container"
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
           {
-            "alignItems": "center",
             "backgroundColor": "rgba(236, 230, 240, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
             "borderRadius": 28,
-            "flex": undefined,
-            "flexDirection": "row",
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
             "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
@@ -75,339 +185,297 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="search-bar-icon-container"
+    >
+      <View
+        accessibilityLabel="search"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="search-bar-container"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="search-bar-icon"
       >
         <View
-          collapsable={false}
           style={
             {
-              "backgroundColor": "transparent",
-              "borderRadius": 20,
-              "height": 40,
-              "margin": 6,
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
-              "width": 40,
+              "opacity": 1,
             }
           }
-          testID="search-bar-icon-container-outer-layer"
         >
-          <View
-            collapsable={false}
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "backgroundColor": "transparent",
-                "borderColor": "rgba(202, 196, 208, 1)",
-                "borderRadius": 20,
-                "borderWidth": 0,
-                "elevation": 0,
-                "flex": 1,
-                "overflow": "hidden",
-                "shadowColor": "rgba(0, 0, 0, 1)",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
-                },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
-              }
-            }
-            testID="search-bar-icon-container"
-          >
-            <View
-              accessibilityLabel="search"
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": true,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              centered={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
+              [
                 {
-                  "bottom": 6,
-                  "left": 6,
-                  "right": 6,
-                  "top": 6,
-                }
-              }
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              role="button"
-              style={
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "overflow": "hidden",
-                  },
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexGrow": 1,
-                      "justifyContent": "center",
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-              testID="search-bar-icon"
-            >
-              <View
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
-              >
-                <Text
-                  accessibilityElementsHidden={true}
-                  importantForAccessibility="no-hide-descendants"
-                  pointerEvents="none"
-                  selectable={false}
-                  style={
-                    [
+                    "lineHeight": 24,
+                    "transform": [
                       {
-                        "color": "rgba(73, 69, 79, 1)",
-                        "fontSize": 24,
+                        "scaleX": 1,
                       },
-                      [
-                        {
-                          "lineHeight": 24,
-                          "transform": [
-                            {
-                              "scaleX": 1,
-                            },
-                          ],
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  magnify
-                </Text>
-              </View>
-            </View>
-          </View>
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            magnify
+          </Text>
         </View>
-        <TextInput
-          keyboardAppearance="light"
-          placeholder="Search"
-          placeholderTextColor="rgba(29, 27, 32, 1)"
-          returnKeyType="search"
-          role="searchbox"
-          selectionColor="rgba(103, 80, 164, 1)"
-          style={
-            [
-              {
-                "alignSelf": "stretch",
-                "flex": 1,
-                "fontSize": 18,
-                "minWidth": 0,
-                "paddingLeft": 8,
-              },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontFamily": "System",
-                "fontSize": 16,
-                "fontWeight": "400",
-                "letterSpacing": 0.5,
-                "lineHeight": 0,
-                "textAlign": "left",
-              },
-              {
-                "minHeight": 56,
-                "paddingLeft": 0,
-              },
-              undefined,
-            ]
-          }
-          testID="search-bar"
-          underlineColorAndroid="transparent"
-          value=""
-        />
+      </View>
+    </View>
+    <TextInput
+      keyboardAppearance="light"
+      placeholder="Search"
+      placeholderTextColor="rgba(29, 27, 32, 1)"
+      returnKeyType="search"
+      role="searchbox"
+      selectionColor="rgba(103, 80, 164, 1)"
+      style={
+        [
+          {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "fontSize": 18,
+            "minWidth": 0,
+            "paddingLeft": 8,
+          },
+          {
+            "color": "rgba(73, 69, 79, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "letterSpacing": 0.5,
+            "lineHeight": 0,
+            "textAlign": "left",
+          },
+          {
+            "minHeight": 56,
+            "paddingLeft": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="search-bar"
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <View
+      pointerEvents="none"
+      style={
+        [
+          {
+            "marginLeft": 16,
+            "position": "absolute",
+            "right": 0,
+          },
+          false,
+        ]
+      }
+      testID="search-bar-icon-wrapper"
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            undefined,
+          ]
+        }
+        testID="search-bar-clear-icon-container"
+      >
         <View
-          pointerEvents="none"
+          accessibilityLabel="clear"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
+            }
+          }
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
           style={
             [
               {
-                "marginLeft": 16,
-                "position": "absolute",
-                "right": 0,
+                "overflow": "hidden",
               },
-              false,
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
             ]
           }
-          testID="search-bar-icon-wrapper"
+          testID="search-bar-clear-icon"
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "transparent",
-                "borderRadius": 20,
-                "height": 40,
-                "margin": 6,
-                "shadowColor": "rgba(0, 0, 0, 1)",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
-                },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
-                "width": 40,
+                "opacity": 1,
               }
             }
-            testID="search-bar-clear-icon-container-outer-layer"
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "backgroundColor": "transparent",
-                  "borderColor": "rgba(202, 196, 208, 1)",
-                  "borderRadius": 20,
-                  "borderWidth": 0,
-                  "elevation": 0,
-                  "flex": 1,
-                  "overflow": "hidden",
-                  "shadowColor": "rgba(0, 0, 0, 1)",
-                  "shadowOffset": {
-                    "height": 0,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0,
-                  "shadowRadius": 0,
-                }
-              }
-              testID="search-bar-clear-icon-container"
-            >
-              <View
-                accessibilityLabel="clear"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                centered={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
+                [
                   {
-                    "bottom": 6,
-                    "left": 6,
-                    "right": 6,
-                    "top": 6,
-                  }
-                }
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                role="button"
-                style={
+                    "color": "rgba(255, 255, 255, 0)",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "overflow": "hidden",
-                    },
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexGrow": 1,
-                        "justifyContent": "center",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="search-bar-clear-icon"
-              >
-                <View
-                  style={
-                    {
-                      "opacity": 1,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
+                      "lineHeight": 24,
+                      "transform": [
                         {
-                          "color": "rgba(255, 255, 255, 0)",
-                          "fontSize": 24,
+                          "scaleX": 1,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    close
-                  </Text>
-                </View>
-              </View>
-            </View>
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
           </View>
         </View>
       </View>
@@ -420,33 +488,43 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(254, 247, 255, 1)",
-      "height": 64,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "height": 64,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
         "alignItems": "center",
-        "backgroundColor": "rgba(254, 247, 255, 1)",
-        "flex": 1,
         "flexDirection": "row",
+      },
+      {
         "paddingBottom": undefined,
-        "paddingHorizontal": 4,
-        "paddingLeft": undefined,
-        "paddingRight": undefined,
+        "paddingLeft": 4,
+        "paddingRight": 4,
         "paddingTop": undefined,
+      },
+      {},
+      {},
+      {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -454,18 +532,46 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="surface"
-  >
-    <View
-      collapsable={false}
-      style={
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -473,97 +579,130 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="icon-button-container"
+  >
+    <View
+      accessibilityLabel="Back"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="Back"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="icon-button"
+    >
+      <View
+        style={
+          {
+            "opacity": 1,
           }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
+        }
+      >
+        <View
           style={
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "height": 24,
+                "width": 24,
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
             ]
           }
-          testID="icon-button"
         >
           <View
+            collapsable={false}
             style={
               {
+                "bottom": 0,
+                "left": 0,
                 "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "rotate": "0deg",
+                  },
+                ],
               }
             }
+            testID="cross-fade-icon-current"
           >
             <View
               style={
@@ -574,304 +713,249 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   },
                   {
                     "height": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                     "width": 24,
                   },
                 ]
               }
             >
-              <View
-                collapsable={false}
-                style={
+              <Image
+                accessibilityIgnoresInvertColors={true}
+                resizeMode="contain"
+                source={
                   {
-                    "bottom": 0,
-                    "left": 0,
-                    "opacity": 1,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                    "transform": [
-                      {
-                        "rotate": "0deg",
-                      },
-                    ],
+                    "testUri": "../../../src/assets/back-chevron.png",
                   }
                 }
-                testID="cross-fade-icon-current"
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "justifyContent": "center",
-                      },
-                      {
-                        "height": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                        "width": 24,
-                      },
-                    ]
+                style={
+                  {
+                    "height": 21,
+                    "tintColor": "rgba(29, 27, 32, 1)",
+                    "width": 21,
                   }
-                >
-                  <Image
-                    accessibilityIgnoresInvertColors={true}
-                    resizeMode="contain"
-                    source={
-                      {
-                        "testUri": "../../../src/assets/back-chevron.png",
-                      }
-                    }
-                    style={
-                      {
-                        "height": 21,
-                        "tintColor": "rgba(29, 27, 32, 1)",
-                        "width": 21,
-                      }
-                    }
-                  />
-                </View>
-              </View>
+                }
+              />
             </View>
           </View>
         </View>
       </View>
     </View>
-    <View
-      pointerEvents="box-none"
+  </View>
+  <View
+    pointerEvents="box-none"
+    style={
+      [
+        {
+          "flex": 1,
+          "paddingHorizontal": 12,
+        },
+        {
+          "paddingHorizontal": 0,
+        },
+        [
+          {
+            "marginLeft": 12,
+          },
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID="appbar-content"
+  >
+    <Text
+      accessible={true}
+      numberOfLines={1}
+      role="heading"
       style={
         [
           {
-            "flex": 1,
-            "paddingHorizontal": 12,
+            "textAlign": "left",
           },
           {
-            "paddingHorizontal": 0,
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
           },
           [
             {
-              "marginLeft": 12,
-            },
-            false,
-            undefined,
-          ],
-        ]
-      }
-      testID="appbar-content"
-    >
-      <Text
-        accessible={true}
-        numberOfLines={1}
-        role="heading"
-        style={
-          [
-            {
-              "textAlign": "left",
-            },
-            {
-              "color": "rgba(29, 27, 32, 1)",
-              "writingDirection": "ltr",
+              "fontFamily": "System",
+              "fontSize": 22,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 28,
             },
             [
               {
+                "color": "rgba(29, 27, 32, 1)",
                 "fontFamily": "System",
                 "fontSize": 22,
                 "fontWeight": "400",
                 "letterSpacing": 0,
                 "lineHeight": 28,
               },
-              [
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontSize": 22,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 28,
-                },
-                undefined,
-              ],
+              undefined,
             ],
-          ]
-        }
-        testID="appbar-content-title-text"
-      >
-        Examples
-      </Text>
-    </View>
-    <View
-      collapsable={false}
-      style={
+          ],
+        ]
+      }
+      testID="appbar-content-title-text"
+    >
+      Examples
+    </Text>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      [
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
           "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="icon-button-container"
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
-      testID="icon-button-container-outer-layer"
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="icon-button"
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="icon-button-container"
       >
         <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
           style={
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "justifyContent": "center",
+              },
+              {
+                "height": 24,
+                "width": 24,
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
             ]
           }
-          testID="icon-button"
         >
           <View
+            collapsable={false}
             style={
               {
+                "bottom": 0,
+                "left": 0,
                 "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "rotate": "0deg",
+                  },
+                ],
               }
             }
+            testID="cross-fade-icon-current"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                  },
-                  {
-                    "height": 24,
-                    "width": 24,
+                    "color": "rgba(73, 69, 79, 1)",
+                    "fontSize": 24,
                   },
-                ]
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "bottom": 0,
-                    "left": 0,
-                    "opacity": 1,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                    "transform": [
-                      {
-                        "rotate": "0deg",
-                      },
-                    ],
-                  }
-                }
-                testID="cross-fade-icon-current"
-              >
-                <Text
-                  accessibilityElementsHidden={true}
-                  importantForAccessibility="no-hide-descendants"
-                  pointerEvents="none"
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "rgba(73, 69, 79, 1)",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                          "transform": [
-                            {
-                              "scaleX": 1,
-                            },
-                          ],
-                        },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
                         {
-                          "backgroundColor": "transparent",
+                          "scaleX": 1,
                         },
                       ],
-                    ]
-                  }
-                >
-                  menu
-                </Text>
-              </View>
-            </View>
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              menu
+            </Text>
           </View>
         </View>
       </View>
diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx
index 80bd3e9017..5cbd07b387 100644
--- a/src/components/__tests__/Banner.test.tsx
+++ b/src/components/__tests__/Banner.test.tsx
@@ -1,4 +1,4 @@
-import { Animated, Image } from 'react-native';
+import { Image } from 'react-native';
 
 import {
   afterAll,
@@ -11,7 +11,7 @@ import {
 } from '@jest/globals';
 import { act } from '@testing-library/react-native';
 
-import { render, screen } from '../../test-utils';
+import { render } from '../../test-utils';
 import Banner from '../Banner';
 
 it('renders hidden banner, without action buttons and without image', async () => {
@@ -356,34 +356,4 @@ describe('animations', () => {
       expect(nextHideCallback).toHaveBeenCalledTimes(1);
     });
   });
-
-  it('animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
-    await render(
-      <Banner
-        visible
-        testID="banner"
-        style={[{ transform: [{ scale: value }] }]}
-      >
-        Banner
-      </Banner>
-    );
-    expect(screen.getByTestId('banner-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    await act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(screen.getByTestId('banner-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
 });
diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx
index 21e495742a..e4a275921f 100644
--- a/src/components/__tests__/BottomNavigation.test.tsx
+++ b/src/components/__tests__/BottomNavigation.test.tsx
@@ -1,4 +1,12 @@
-import { Animated, Easing, Platform, StyleSheet, Text } from 'react-native';
+import {
+  Animated,
+  Easing,
+  Keyboard,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import type { KeyboardEvent } from 'react-native';
 
 import { describe, expect, it, jest } from '@jest/globals';
 import { act, fireEvent, userEvent } from '@testing-library/react-native';
@@ -431,6 +439,60 @@ it('renders custom background color passed to barStyle property', async () => {
   expect(wrapper).toHaveStyle({ backgroundColor: Palette.error60 });
 });
 
+it('uses the rendered bar height when hiding it for the keyboard', async () => {
+  let handleKeyboardShow: ((event: KeyboardEvent) => void) | undefined;
+  const addKeyboardListener = Keyboard.addListener.bind(Keyboard);
+  const keyboardListenerSpy = jest
+    .spyOn(Keyboard, 'addListener')
+    .mockImplementation((event, listener) => {
+      if (event.endsWith('Show')) {
+        handleKeyboardShow = listener;
+      }
+
+      return addKeyboardListener(event, listener);
+    });
+
+  await render(
+    <BottomNavigation.Bar
+      navigationState={createState(0, 3)}
+      onTabPress={jest.fn()}
+      keyboardHidesNavigationBar
+      style={{ height: 96 }}
+      testID="bottom-navigation"
+    />
+  );
+
+  const navigation = screen.getByTestId('bottom-navigation');
+
+  await fireEvent(navigation, 'layout', {
+    nativeEvent: {
+      layout: { height: 72, width: 360 },
+    },
+  });
+
+  await act(() => {
+    handleKeyboardShow?.({
+      duration: 0,
+      easing: 'keyboard',
+      endCoordinates: {
+        screenX: 0,
+        screenY: 500,
+        width: 360,
+        height: 300,
+      },
+    });
+    jest.runAllTimers();
+  });
+
+  expect(navigation).toHaveStyle({
+    height: 96,
+    position: 'absolute',
+    transform: [{ translateY: 72 }],
+  });
+
+  keyboardListenerSpy.mockRestore();
+});
+
 it('renders a single tab', async () => {
   await render(
     <BottomNavigation
@@ -590,18 +652,18 @@ describe('getLabelColor', () => {
   );
 });
 
-it('barStyle animated value changes correctly', async () => {
+it('supports animated styles in bar', async () => {
   const value = new Animated.Value(1);
   await render(
-    <BottomNavigation
+    <BottomNavigation.Bar
       navigationState={createState(0, 1)}
-      onIndexChange={() => {}}
-      renderScene={renderScene}
-      testID={'bottom-navigation'}
-      barStyle={[{ transform: [{ scale: value }] }]}
+      onTabPress={jest.fn()}
+      testID="bottom-navigation"
+      style={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(screen.getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({
+
+  expect(screen.getByTestId('bottom-navigation')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -614,7 +676,8 @@ it('barStyle animated value changes correctly', async () => {
   await act(() => {
     jest.advanceTimersByTime(200);
   });
-  expect(screen.getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({
+
+  expect(screen.getByTestId('bottom-navigation')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx
index 4da466837a..be3d573d29 100644
--- a/src/components/__tests__/Button.test.tsx
+++ b/src/components/__tests__/Button.test.tsx
@@ -1,7 +1,7 @@
-import { Animated, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { describe, expect, it, jest } from '@jest/globals';
-import { act, userEvent } from '@testing-library/react-native';
+import { userEvent } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
 import { render, screen } from '../../test-utils';
@@ -16,15 +16,6 @@ const styles = StyleSheet.create({
   flexing: {
     flexDirection: 'row-reverse',
   },
-  customRadius: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 16,
-  },
-  noRadius: {
-    borderRadius: 0,
-  },
 });
 
 it('renders text button by default', async () => {
@@ -155,54 +146,6 @@ it('renders button with an accessibility hint', async () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders button with custom border radius', async () => {
-  await render(
-    <Button testID="custom-radius" style={styles.customRadius}>
-      Custom radius
-    </Button>
-  );
-
-  expect(screen.getByTestId('custom-radius-container')).toHaveStyle(
-    styles.customRadius
-  );
-  expect(screen.getByTestId('custom-radius')).toHaveStyle(styles.customRadius);
-});
-
-it('renders outlined button with custom border radius', async () => {
-  await render(
-    <Button
-      mode={'outlined'}
-      testID="custom-radius"
-      style={styles.customRadius}
-    >
-      Custom radius
-    </Button>
-  );
-
-  expect(screen.getByTestId('custom-radius-container')).toHaveStyle(
-    styles.customRadius
-  );
-  expect(screen.getByTestId('custom-radius')).toHaveStyle({
-    borderTopLeftRadius: 15, // styles.customRadius - 1px outline
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 15, // styles.customRadius - 1px outline
-  });
-});
-
-it('renders button without border radius', async () => {
-  await render(
-    <Button testID="custom-radius" style={styles.noRadius}>
-      Custom radius
-    </Button>
-  );
-
-  expect(screen.getByTestId('custom-radius-container')).toHaveStyle(
-    styles.noRadius
-  );
-  expect(screen.getByTestId('custom-radius')).toHaveStyle(styles.noRadius);
-});
-
 it('should execute onPressIn', async () => {
   const onPressInMock = jest.fn();
   const onPress = jest.fn();
@@ -709,33 +652,3 @@ describe('getButtonColors - border width', () => {
       })
   );
 });
-
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <Button
-      mode="elevated"
-      compact
-      icon="camera"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      Compact button
-    </Button>
-  );
-  expect(screen.getByTestId('button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx
index d9e91d9d73..74637a8a53 100644
--- a/src/components/__tests__/Card/Card.test.tsx
+++ b/src/components/__tests__/Card/Card.test.tsx
@@ -1,7 +1,6 @@
-import { Animated, StyleSheet, Text } from 'react-native';
+import { Platform, StyleSheet, Text } from 'react-native';
 
-import { describe, expect, it, jest } from '@jest/globals';
-import { act } from '@testing-library/react-native';
+import { afterEach, describe, expect, it, jest } from '@jest/globals';
 
 import { getTheme } from '../../../core/theming';
 import { render, screen } from '../../../test-utils';
@@ -11,9 +10,6 @@ import Card from '../../Card/Card';
 import { getCardColors, getCardCoverStyle } from '../../Card/utils';
 
 const styles = StyleSheet.create({
-  customBorderRadius: {
-    borderRadius: 32,
-  },
   customCoverRadius: {
     borderTopLeftRadius: 4,
     borderTopRightRadius: 8,
@@ -25,6 +21,10 @@ const styles = StyleSheet.create({
   },
 });
 
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
 describe('Card', () => {
   it('renders an outlined card', async () => {
     const tree = (await render(<Card mode="outlined">{null}</Card>)).toJSON();
@@ -32,40 +32,49 @@ describe('Card', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders an outlined card with custom border radius and color', async () => {
+  it('renders an outlined card with a custom outline color', async () => {
+    const testID = 'custom-outline-card';
+
     await render(
       <Card
         mode="outlined"
+        accessibilityLabel="card"
         theme={{ colors: { outline: 'purple' } }}
-        style={styles.customBorderRadius}
+        testID={testID}
       >
         {null}
       </Card>
     );
 
-    expect(screen.getByTestId('card-outline')).toHaveStyle({
-      borderRadius: 32,
+    expect(screen.getByTestId(`${testID}-outline`)).toHaveStyle({
       borderColor: 'purple',
+      borderWidth: 1,
     });
   });
 
   it('renders an outlined card with custom border color', async () => {
+    const testID = 'custom-border-card';
+
     await render(
       <Card
         mode="outlined"
         accessibilityLabel="card"
         style={{ borderColor: Palette.error50 }}
+        testID={testID}
       >
         {null}
       </Card>
     );
 
-    expect(screen.getByLabelText('card')).toHaveStyle({
+    expect(screen.getByTestId(`${testID}-outline`)).toHaveStyle({
       borderColor: Palette.error50,
+      borderWidth: 1,
     });
   });
 
-  it('renders with a custom theme', async () => {
+  it('renders with a custom theme background color', async () => {
+    jest.replaceProperty(Platform, 'OS', 'web');
+
     await render(
       <Card
         mode="outlined"
@@ -140,26 +149,6 @@ describe('CardActions', () => {
       screen.getByTestId('card-actions').props.children[0].props.mode
     ).toBe('contained');
   });
-
-  it('renders button with custom styles', async () => {
-    await render(
-      <Card>
-        <Card.Actions>
-          <Button
-            testID="card-actions-button"
-            mode="contained"
-            style={styles.customBorderRadius}
-          >
-            Agree
-          </Button>
-        </Card.Actions>
-      </Card>
-    );
-
-    expect(screen.getByTestId('card-actions-button')).toHaveStyle({
-      borderRadius: 32,
-    });
-  });
 });
 
 describe('getCardColors - background color', () => {
@@ -224,32 +213,3 @@ describe('getCardCoverStyle - border radius', () => {
     ).toMatchObject({ borderRadius: getTheme().shapes.corner.medium });
   });
 });
-
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <Card
-      mode="outlined"
-      accessibilityLabel="card"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      {null}
-    </Card>
-  );
-  expect(screen.getByTestId('card-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('card-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
index d1492cc475..5c39f6bf05 100644
--- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
+++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -4,27 +4,33 @@ exports[`Card renders an outlined card 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(254, 247, 255, 1)",
-      "borderRadius": 12,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderColor": "rgba(121, 116, 126, 1)",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="card-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {},
       {
         "backgroundColor": "rgba(254, 247, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 12,
-        "flex": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -32,42 +38,89 @@ exports[`Card renders an outlined card 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="card-container"
-  >
-    <View
-      pointerEvents="none"
-      style={
-        [
-          {
-            "borderColor": "rgba(121, 116, 126, 1)",
-          },
-          {
-            "borderWidth": 1,
-            "height": "100%",
-            "position": "absolute",
-            "width": "100%",
-            "zIndex": 2,
-          },
-          {
-            "borderRadius": 12,
-          },
-        ]
-      }
-      testID="card-outline"
-    />
-    <View
-      style={
-        [
-          {
-            "flexShrink": 1,
+      },
+    ]
+  }
+  testID="card-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 12,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
           },
-          undefined,
-        ]
-      }
-      testID="card"
-    />
-  </View>
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "borderColor": "rgba(121, 116, 126, 1)",
+        },
+        {
+          "borderWidth": 1,
+          "height": "100%",
+          "position": "absolute",
+          "width": "100%",
+          "zIndex": 2,
+        },
+        {
+          "borderRadius": 12,
+        },
+      ]
+    }
+    testID="card-outline"
+  />
+  <View
+    style={
+      [
+        {
+          "flexShrink": 1,
+        },
+        undefined,
+      ]
+    }
+    testID="card"
+  />
 </View>
 `;
diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 54f2e4f7a4..714b65414e 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -83,6 +83,7 @@ exports[`renders Checkbox with custom testID 1`] = `
       }
     >
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -105,6 +106,7 @@ exports[`renders Checkbox with custom testID 1`] = `
         }
       />
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -126,6 +128,7 @@ exports[`renders Checkbox with custom testID 1`] = `
         }
       />
       <View
+        collapsable={false}
         style={
           [
             {
@@ -268,6 +271,7 @@ exports[`renders checked Checkbox with color 1`] = `
       }
     >
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -290,6 +294,7 @@ exports[`renders checked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -311,6 +316,7 @@ exports[`renders checked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
         style={
           [
             {
@@ -453,6 +459,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
       }
     >
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -475,6 +482,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -496,6 +504,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
         style={
           [
             {
@@ -638,6 +647,7 @@ exports[`renders indeterminate Checkbox 1`] = `
       }
     >
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -660,6 +670,7 @@ exports[`renders indeterminate Checkbox 1`] = `
         }
       />
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -681,6 +692,7 @@ exports[`renders indeterminate Checkbox 1`] = `
         }
       />
       <View
+        collapsable={false}
         style={
           [
             {
@@ -810,6 +822,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
       }
     >
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -832,6 +845,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -853,6 +867,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
         style={
           [
             {
@@ -982,6 +997,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
       }
     >
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -1004,6 +1020,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -1025,6 +1042,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
         style={
           [
             {
@@ -1167,6 +1185,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
       }
     >
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -1189,6 +1208,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
         pointerEvents="none"
         style={
           [
@@ -1210,6 +1230,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
         style={
           [
             {
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
index 0f7f92073b..bba3d6f506 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
@@ -135,6 +135,7 @@ exports[`can render leading checkbox control 1`] = `
           }
         >
           <View
+            collapsable={false}
             pointerEvents="none"
             style={
               [
@@ -157,6 +158,7 @@ exports[`can render leading checkbox control 1`] = `
             }
           />
           <View
+            collapsable={false}
             pointerEvents="none"
             style={
               [
@@ -178,6 +180,7 @@ exports[`can render leading checkbox control 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -451,6 +454,7 @@ exports[`renders unchecked 1`] = `
           }
         >
           <View
+            collapsable={false}
             pointerEvents="none"
             style={
               [
@@ -473,6 +477,7 @@ exports[`renders unchecked 1`] = `
             }
           />
           <View
+            collapsable={false}
             pointerEvents="none"
             style={
               [
@@ -494,6 +499,7 @@ exports[`renders unchecked 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
index 644906ae33..87f54dba4e 100644
--- a/src/components/__tests__/Chip.test.tsx
+++ b/src/components/__tests__/Chip.test.tsx
@@ -1,7 +1,4 @@
-import { Animated } from 'react-native';
-
-import { describe, expect, it, jest } from '@jest/globals';
-import { act } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 import color from 'color';
 
 import { getTheme } from '../../core/theming';
@@ -196,56 +193,7 @@ describe('getChipColors - icon color', () => {
   });
 });
 
-describe('getChipColor - selected background color', () => {
-  it('should return custom color, outlined mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        isOutlined: true,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: 'purple',
-    });
-  });
-
-  it('should return custom color, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: 'purple',
-    });
-  });
-
-  it('should return theme color, for theme version 3, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      selectedBackgroundColor: getTheme().colors.secondaryContainer,
-    });
-  });
-});
-
 describe('getChipColor - background color', () => {
-  it('should return custom color', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      backgroundColor: 'purple',
-    });
-  });
-
   it('should return theme color, for theme version 3, outlined mode', () => {
     expect(
       getChipColors({
@@ -317,18 +265,6 @@ describe('getChipColor - border color', () => {
     });
   });
 
-  it('should return custom color, flat mode', () => {
-    expect(
-      getChipColors({
-        theme: getTheme(true),
-        customBackgroundColor: 'purple',
-        isOutlined: false,
-      })
-    ).toMatchObject({
-      borderColor: 'transparent',
-    });
-  });
-
   it('should return theme color, light mode, outlined mode', () => {
     expect(
       getChipColors({
@@ -373,32 +309,3 @@ describe('getChipColor - border color', () => {
     });
   });
 });
-
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <Chip
-      onPress={() => {}}
-      testID="chip"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      Example Chip
-    </Chip>
-  );
-  expect(screen.getByTestId('chip-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('chip-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/FABExtended.test.tsx b/src/components/__tests__/FABExtended.test.tsx
index fd9a21cec9..e8e530484d 100644
--- a/src/components/__tests__/FABExtended.test.tsx
+++ b/src/components/__tests__/FABExtended.test.tsx
@@ -1,9 +1,30 @@
-import { expect, it, jest } from '@jest/globals';
+import { Platform } from 'react-native';
+
+import { afterEach, expect, it, jest } from '@jest/globals';
 import { fireEvent, userEvent } from '@testing-library/react-native';
+import * as Reanimated from 'react-native-reanimated';
 
 import { render, screen } from '../../test-utils';
 import FAB from '../FAB';
 
+jest.mock('react-native-reanimated', () => {
+  const ReanimatedModule = jest.requireActual<
+    typeof import('react-native-reanimated')
+  >('react-native-reanimated');
+
+  return {
+    __esModule: true,
+    ...ReanimatedModule,
+    default: ReanimatedModule.default,
+    measure: jest.fn(),
+  };
+});
+
+afterEach(() => {
+  jest.mocked(Reanimated.measure).mockReset();
+  jest.restoreAllMocks();
+});
+
 it('renders extended FAB expanded', async () => {
   const tree = (
     await render(<FAB.Extended icon="plus" label="New message" expanded />)
@@ -11,6 +32,33 @@ it('renders extended FAB expanded', async () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('expands to fit the measured label width', async () => {
+  jest.replaceProperty(Platform, 'OS', 'web');
+  jest.mocked(Reanimated.measure).mockReturnValue({
+    x: 0,
+    y: 0,
+    width: 80,
+    height: 20,
+    pageX: 0,
+    pageY: 0,
+  });
+
+  await render(
+    <FAB.Extended
+      icon="plus"
+      label="New message"
+      expanded
+      style={{}}
+      testID="extended-fab"
+    />
+  );
+  await jest.runAllTimersAsync();
+
+  expect(
+    Reanimated.getAnimatedStyle(screen.getByTestId('extended-fab-container'))
+  ).toMatchObject({ width: 144 });
+});
+
 it('renders extended FAB collapsed', async () => {
   const tree = (
     await render(
diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx
index b28456c5ce..a8bc540aa9 100644
--- a/src/components/__tests__/IconButton.test.tsx
+++ b/src/components/__tests__/IconButton.test.tsx
@@ -1,7 +1,6 @@
-import { Animated, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-import { describe, expect, it, jest } from '@jest/globals';
-import { act } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
 import { getTheme } from '../../core/theming';
 import { render, screen } from '../../test-utils';
@@ -318,30 +317,3 @@ describe('getIconButtonColor - border color', () => {
     });
   });
 });
-
-it('action animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <IconButton
-      icon="menu"
-      style={[{ transform: [{ scale: value }] }]}
-      testID="icon-button"
-    />
-  );
-  expect(screen.getByTestId('icon-button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('icon-button-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx
index bd14689f70..5fdc76f64d 100644
--- a/src/components/__tests__/Menu.test.tsx
+++ b/src/components/__tests__/Menu.test.tsx
@@ -1,4 +1,4 @@
-import { Animated, Dimensions, StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 
 import { expect, it, jest } from '@jest/globals';
 import { act, screen, waitFor } from '@testing-library/react-native';
@@ -10,13 +10,6 @@ import Button from '../Button/Button';
 import Menu from '../Menu/Menu';
 import Portal from '../Portal/Portal';
 
-const styles = StyleSheet.create({
-  contentStyle: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-});
-
 it('renders visible menu', async () => {
   const tree = (
     await render(
@@ -55,31 +48,12 @@ it('renders not visible menu', async () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders menu with content styles', async () => {
-  const tree = (
-    await render(
-      <Portal.Host>
-        <Menu
-          visible
-          onDismiss={jest.fn()}
-          anchor={<Button mode="outlined">Open menu</Button>}
-          contentStyle={styles.contentStyle}
-        >
-          <Menu.Item onPress={jest.fn()} title="Undo" />
-          <Menu.Item onPress={jest.fn()} title="Redo" />
-        </Menu>
-      </Portal.Host>
-    )
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
 const elevations: Elevation[] = [0, 1, 2, 3, 4, 5];
 
 elevations.forEach((elevation) =>
   it(`renders menu with background color based on elevation value = ${elevation}`, async () => {
     const theme = getTheme();
+    const testID = 'menu-with-elevation';
 
     await render(
       <Portal.Host>
@@ -88,6 +62,8 @@ elevations.forEach((elevation) =>
           onDismiss={jest.fn()}
           anchor={<Button mode="outlined">Open menu</Button>}
           elevation={elevation}
+          mode="flat"
+          testID={testID}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -95,13 +71,14 @@ elevations.forEach((elevation) =>
       </Portal.Host>
     );
 
-    expect(screen.getByTestId('menu-surface')).toHaveStyle({
+    expect(screen.getByTestId(`${testID}-surface`)).toHaveStyle({
       backgroundColor: theme.colors.elevation[`level${elevation}`],
     });
   })
 );
 
 it('uses the default anchorPosition of top', async () => {
+  const testID = 'top-positioned-menu';
   const dimensionsSpy = jest.spyOn(Dimensions, 'get').mockReturnValue({
     width: 400,
     height: 800,
@@ -123,7 +100,7 @@ it('uses the default anchorPosition of top', async () => {
               Open menu
             </Button>
           }
-          contentStyle={styles.contentStyle}
+          testID={testID}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -145,7 +122,7 @@ it('uses the default anchorPosition of top', async () => {
   });
 
   await waitFor(() => {
-    const menu = screen.getByTestId('menu-view');
+    const menu = screen.getByTestId(`${testID}-view`);
     expect(menu).toHaveStyle({
       position: 'absolute',
       left: 100,
@@ -158,6 +135,7 @@ it('uses the default anchorPosition of top', async () => {
 });
 
 it('respects anchorPosition bottom', async () => {
+  const testID = 'bottom-positioned-menu';
   const dimensionsSpy = jest.spyOn(Dimensions, 'get').mockReturnValue({
     width: 400,
     height: 800,
@@ -180,7 +158,7 @@ it('respects anchorPosition bottom', async () => {
             </Button>
           }
           anchorPosition="bottom"
-          contentStyle={styles.contentStyle}
+          testID={testID}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -198,7 +176,7 @@ it('respects anchorPosition bottom', async () => {
   });
 
   await waitFor(() => {
-    const menu = screen.getByTestId('menu-view');
+    const menu = screen.getByTestId(`${testID}-view`);
     expect(menu).toHaveStyle({
       position: 'absolute',
       left: 100,
@@ -210,40 +188,9 @@ it('respects anchorPosition bottom', async () => {
   dimensionsSpy.mockRestore();
 });
 
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <Portal.Host>
-      <Menu
-        visible
-        onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
-        testID="menu"
-        contentStyle={[{ transform: [{ scale: value }] }]}
-      >
-        <Menu.Item onPress={jest.fn()} title="Test" />
-      </Menu>
-    </Portal.Host>
-  );
-  expect(screen.getByTestId('menu-surface-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('menu-surface-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
-
 it('renders menu with mode "elevated"', async () => {
+  const testID = 'elevated-menu';
+
   await render(
     <Portal.Host>
       <Menu
@@ -251,6 +198,7 @@ it('renders menu with mode "elevated"', async () => {
         onDismiss={jest.fn()}
         anchor={<Button mode="outlined">Open menu</Button>}
         mode="elevated"
+        testID={testID}
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -258,7 +206,7 @@ it('renders menu with mode "elevated"', async () => {
     </Portal.Host>
   );
 
-  const menuSurface = screen.getByTestId('menu-surface');
+  const menuSurface = screen.getByTestId(`${testID}-surface`);
 
   // Get flattened styles
   // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
@@ -269,6 +217,8 @@ it('renders menu with mode "elevated"', async () => {
 });
 
 it('renders menu with mode "flat"', async () => {
+  const testID = 'flat-menu';
+
   await render(
     <Portal.Host>
       <Menu
@@ -276,6 +226,7 @@ it('renders menu with mode "flat"', async () => {
         onDismiss={jest.fn()}
         anchor={<Button mode="outlined">Open menu</Button>}
         mode="flat"
+        testID={testID}
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -283,7 +234,7 @@ it('renders menu with mode "flat"', async () => {
     </Portal.Host>
   );
 
-  const menuSurface = screen.getByTestId('menu-surface');
+  const menuSurface = screen.getByTestId(`${testID}-surface`);
 
   // Get flattened styles
   // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx
index ff4cf2fd41..83d644e0e1 100644
--- a/src/components/__tests__/Modal.test.tsx
+++ b/src/components/__tests__/Modal.test.tsx
@@ -1,4 +1,4 @@
-import { Animated, BackHandler as RNBackHandler, Text } from 'react-native';
+import { BackHandler as RNBackHandler, Text } from 'react-native';
 import type { BackHandlerStatic as RNBackHandlerStatic } from 'react-native';
 
 import { afterAll, beforeAll, describe, expect, it, jest } from '@jest/globals';
@@ -111,7 +111,7 @@ describe('Modal', () => {
 
         expect(onDismiss).toHaveBeenCalled();
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -123,7 +123,7 @@ describe('Modal', () => {
           opacity: scrimAlpha,
         });
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -138,7 +138,7 @@ describe('Modal', () => {
         </Modal>
       );
 
-      expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+      expect(screen.getByTestId('modal-surface')).toHaveStyle({
         opacity: 1,
       });
 
@@ -150,7 +150,7 @@ describe('Modal', () => {
         </Modal>
       );
 
-      expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+      expect(screen.getByTestId('modal-surface')).toHaveStyle({
         opacity: 1,
       });
 
@@ -158,7 +158,7 @@ describe('Modal', () => {
         opacity: scrimAlpha,
       });
 
-      expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+      expect(screen.getByTestId('modal-surface')).toHaveStyle({
         opacity: 1,
       });
 
@@ -166,9 +166,7 @@ describe('Modal', () => {
         jest.runAllTimers();
       });
 
-      expect(
-        screen.queryByTestId('modal-surface-outer-layer')
-      ).not.toBeOnTheScreen();
+      expect(screen.queryByTestId('modal-surface')).not.toBeOnTheScreen();
 
       expect(screen.queryByTestId('modal-backdrop')).not.toBeOnTheScreen();
     });
@@ -182,7 +180,7 @@ describe('Modal', () => {
           </Modal>
         );
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -190,7 +188,7 @@ describe('Modal', () => {
           BackHandler.mockPressBack();
         });
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -202,7 +200,7 @@ describe('Modal', () => {
           opacity: scrimAlpha,
         });
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -225,13 +223,13 @@ describe('Modal', () => {
           </Modal>
         );
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
         await userEvent.press(screen.getByTestId('modal-backdrop'));
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -243,7 +241,7 @@ describe('Modal', () => {
           opacity: scrimAlpha,
         });
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -288,7 +286,7 @@ describe('Modal', () => {
           </Modal>
         );
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -296,7 +294,7 @@ describe('Modal', () => {
           BackHandler.mockPressBack();
         });
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -308,7 +306,7 @@ describe('Modal', () => {
           opacity: scrimAlpha,
         });
 
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -364,7 +362,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 0,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 0,
         });
 
@@ -375,7 +373,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -392,7 +390,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -405,7 +403,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -452,7 +450,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -465,7 +463,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -490,7 +488,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -503,7 +501,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
 
@@ -526,7 +524,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: scrimAlpha,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -551,7 +549,7 @@ describe('Modal', () => {
         expect(screen.getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 0,
         });
-        expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
+        expect(screen.getByTestId('modal-surface')).toHaveStyle({
           opacity: 0,
         });
 
@@ -577,34 +575,4 @@ describe('Modal', () => {
       });
     });
   });
-
-  it('animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
-    await render(
-      <Modal
-        visible={true}
-        testID="modal"
-        contentContainerStyle={[{ transform: [{ scale: value }] }]}
-      >
-        {null}
-      </Modal>
-    );
-    expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
-
-    Animated.timing(value, {
-      toValue: 1.5,
-      useNativeDriver: false,
-      duration: 200,
-    }).start();
-
-    await act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
-  });
 });
diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx
index 0671263277..5fea2800ed 100644
--- a/src/components/__tests__/Searchbar.test.tsx
+++ b/src/components/__tests__/Searchbar.test.tsx
@@ -1,7 +1,5 @@
-import { Animated } from 'react-native';
-
 import { expect, it, jest } from '@jest/globals';
-import { act, userEvent } from '@testing-library/react-native';
+import { userEvent } from '@testing-library/react-native';
 
 import { render, screen } from '../../test-utils';
 import * as Avatar from '../Avatar/Avatar';
@@ -72,33 +70,6 @@ it('renders clear icon wrapper, which is never target of touch events, if search
   ).toBe('none');
 });
 
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <Searchbar
-      testID="search-bar"
-      value=""
-      style={[{ transform: [{ scale: value }] }]}
-    />
-  );
-  expect(screen.getByTestId('search-bar-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('search-bar-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
-
 it('defines onClearIconPress action and checks if it is called when close button is pressed', async () => {
   const onClearIconPressMock = jest.fn();
   await render(
diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx
index 16b118da09..5c30f7cc6e 100644
--- a/src/components/__tests__/Snackbar.test.tsx
+++ b/src/components/__tests__/Snackbar.test.tsx
@@ -1,9 +1,8 @@
-import { Animated, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { expect, it, jest } from '@jest/globals';
-import { act } from '@testing-library/react-native';
 
-import { render, screen } from '../../test-utils';
+import { render } from '../../test-utils';
 import { red200, white } from '../../theme/colors';
 import Snackbar from '../Snackbar';
 
@@ -92,33 +91,3 @@ it('renders snackbar with View & Text as a child', async () => {
 
   expect(tree).toMatchSnapshot();
 });
-
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <Snackbar
-      visible
-      onDismiss={jest.fn()}
-      testID="snack-bar"
-      style={[{ transform: [{ scale: value }] }]}
-    >
-      Snackbar content
-    </Snackbar>
-  );
-  expect(screen.getByTestId('snack-bar-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('snack-bar-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
-});
diff --git a/src/components/__tests__/Surface.test.tsx b/src/components/__tests__/Surface.test.tsx
index d0a0437f65..889e51a25a 100644
--- a/src/components/__tests__/Surface.test.tsx
+++ b/src/components/__tests__/Surface.test.tsx
@@ -1,6 +1,9 @@
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Platform } from 'react-native';
+import {
+  DynamicColorIOS,
+  Platform,
+  PlatformColor,
+  Pressable,
+} from 'react-native';
 
 import {
   afterEach,
@@ -10,34 +13,77 @@ import {
   it,
   jest,
 } from '@jest/globals';
+import { userEvent } from '@testing-library/react-native';
+import {
+  getAnimatedStyle,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import { getTheme } from '../../core/theming';
 import { render, screen } from '../../test-utils';
 import Surface from '../Surface';
 
-type StyleCase = {
-  property: keyof ViewStyle;
-  value: ViewStyle[keyof ViewStyle];
-};
-
 const SPOT_SHADOW_OPACITY = 0.19;
 const AMBIENT_SHADOW_OPACITY = 0.039;
 
+const AnimatedSurface = () => {
+  const opacity = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  return (
+    <>
+      <Pressable
+        testID="animate-surface"
+        onPress={() => {
+          opacity.value = 1;
+        }}
+      />
+      <Surface testID="animated-surface" style={animatedStyle}>
+        {null}
+      </Surface>
+    </>
+  );
+};
+
+const AnimatedVisualSurface = () => {
+  const borderRadius = useSharedValue(4);
+
+  return (
+    <>
+      <Pressable
+        testID="animate-visual-props"
+        onPress={() => {
+          borderRadius.value = 8;
+        }}
+      />
+      <Surface
+        mode="flat"
+        testID="animated-visual-surface"
+        backgroundColor="red"
+        borderRadius={borderRadius}
+      >
+        {null}
+      </Surface>
+    </>
+  );
+};
+
 afterEach(() => {
   jest.restoreAllMocks();
 });
 
 describe('Surface', () => {
-  it('should properly render passed props', async () => {
-    await render(
-      <Surface pointerEvents="box-none" testID="surface-container">
-        {null}
-      </Surface>
-    );
-    // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion.
-    expect(screen.getByTestId('surface-container').props.pointerEvents).toBe(
-      'box-none'
-    );
+  it('updates styles when a Reanimated shared value changes', async () => {
+    await render(<AnimatedSurface />);
+
+    const surface = screen.getByTestId('animated-surface');
+    expect(getAnimatedStyle(surface)).toMatchObject({ opacity: 0 });
+
+    await userEvent.press(screen.getByTestId('animate-surface'));
+    await jest.runAllTimersAsync();
+
+    expect(getAnimatedStyle(surface)).toMatchObject({ opacity: 1 });
   });
 
   describe('on iOS', () => {
@@ -45,42 +91,13 @@ describe('Surface', () => {
       jest.replaceProperty(Platform, 'OS', 'ios');
     });
 
-    const styles = StyleSheet.create({
-      absoluteStyles: {
-        bottom: 10,
-        end: 20,
-        left: 30,
-        position: 'absolute',
-        right: 40,
-        start: 50,
-        top: 60,
-      },
-      innerLayerViewStyle: {
-        padding: 13,
-      },
-      restStyle: {
-        padding: 10,
-        flexDirection: 'row',
-        alignContent: 'center',
-      },
-    });
-
     it('should render Surface with appropriate bg color but without shadow, if mode is set to "flat"', async () => {
       await render(
-        <Surface
-          mode="flat"
-          elevation={5}
-          pointerEvents="box-none"
-          testID={'surface-test'}
-        >
+        <Surface mode="flat" elevation={5} testID={'surface-test'}>
           {null}
         </Surface>
       );
 
-      // @ts-expect-error
-      expect(screen.getByTestId('surface-test-outer-layer')).not.toHaveStyle({
-        shadowOpacity: expect.any(Number),
-      });
       // @ts-expect-error
       expect(screen.getByTestId('surface-test')).not.toHaveStyle({
         shadowOpacity: expect.any(Number),
@@ -90,192 +107,70 @@ describe('Surface', () => {
       });
     });
 
-    it('should render a spot shadow over an ambient shadow, if mode is elevated', async () => {
+    it('should render a spot shadow if mode is elevated', async () => {
       await render(
         <Surface elevation={5} testID={'surface-test'}>
           {null}
         </Surface>
       );
 
-      expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle({
+      expect(screen.getByTestId('surface-test')).toHaveStyle({
         shadowOpacity: SPOT_SHADOW_OPACITY,
       });
+    });
+
+    it('applies background and shape props in flat mode', async () => {
+      const backgroundColor = 'rgba(1, 2, 3, 0.5)';
+      await render(
+        <Surface
+          mode="flat"
+          testID="surface-test"
+          backgroundColor={backgroundColor}
+          borderRadius={4}
+          borderTopLeftRadius={8}
+        >
+          {null}
+        </Surface>
+      );
+
       expect(screen.getByTestId('surface-test')).toHaveStyle({
-        shadowOpacity: AMBIENT_SHADOW_OPACITY,
+        backgroundColor,
+        borderRadius: 4,
+        borderTopLeftRadius: 8,
       });
     });
 
-    it.each([
-      { property: 'opacity', value: 0.7 },
-      { property: 'transform', value: [{ scale: 1.02 }] },
-      { property: 'width', value: '42%' },
-      { property: 'height', value: '32.5%' },
-      { property: 'margin', value: 13 },
-      { property: 'marginLeft', value: 13.1 },
-      { property: 'marginRight', value: 13.2 },
-      { property: 'marginTop', value: 13.3 },
-      { property: 'marginBottom', value: 13.4 },
-      { property: 'marginHorizontal', value: 13.5 },
-      { property: 'marginVertical', value: 13.6 },
-      { property: 'position', value: 'absolute' },
-      { property: 'alignSelf', value: 'flex-start' },
-      { property: 'top', value: 1.1 },
-      { property: 'right', value: 1.2 },
-      { property: 'bottom', value: 1.3 },
-      { property: 'left', value: 1.4 },
-      { property: 'start', value: 1.5 },
-      { property: 'end', value: 1.6 },
-      { property: 'flex', value: 6 },
-    ] satisfies StyleCase[])(
-      'applies $property to outer layer only',
-      async ({ property, value }) => {
-        const style = { [property]: value };
-
-        await render(
-          <Surface testID="surface-test" style={style}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(
-          style
-        );
-        expect(screen.getByTestId('surface-test')).not.toHaveStyle(style);
-      }
-    );
-
-    it.each([
-      { property: 'padding', value: 12 },
-      { property: 'paddingLeft', value: 12.1 },
-      { property: 'paddingRight', value: 12.2 },
-      { property: 'paddingTop', value: 12.3 },
-      { property: 'paddingBottom', value: 12.4 },
-      { property: 'paddingHorizontal', value: 12.5 },
-      { property: 'paddingVertical', value: 12.6 },
-      { property: 'borderWidth', value: 2 },
-      { property: 'borderColor', value: 'black' },
-    ] satisfies StyleCase[])(
-      'applies $property to inner layer only',
-      async ({ property, value }) => {
-        const style = { [property]: value };
-
-        await render(
-          <Surface testID="surface-test" style={style}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test-outer-layer')).not.toHaveStyle(
-          style
-        );
-        expect(screen.getByTestId('surface-test')).toHaveStyle(style);
-      }
-    );
-
-    it.each([
-      { property: 'borderRadius', value: 3 },
-      { property: 'borderTopLeftRadius', value: 1 },
-      { property: 'borderTopRightRadius', value: 2 },
-      { property: 'borderBottomLeftRadius', value: 3 },
-      { property: 'borderBottomRightRadius', value: 4 },
-      { property: 'backgroundColor', value: 'rgb(4, 5, 6)' },
-    ] satisfies StyleCase[])(
-      'applies $property to every layer',
-      async ({ property, value }) => {
-        const style = { [property]: value };
-
-        await render(
-          <Surface testID="surface-test" style={style}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(
-          style
-        );
-        expect(screen.getByTestId('surface-test')).toHaveStyle(style);
-      }
-    );
-
-    describe('outer layer', () => {
-      it('should not render rest style', async () => {
-        await render(
-          <Surface testID="surface-test" style={styles.restStyle}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test-outer-layer')).not.toHaveStyle(
-          styles.restStyle
-        );
-      });
+    it('updates the animated corner radius', async () => {
+      await render(<AnimatedVisualSurface />);
 
-      it('should render absolute position properties on outer layer', async () => {
-        await render(
-          <Surface testID="surface-test" style={styles.absoluteStyles}>
-            {null}
-          </Surface>
-        );
+      const surface = screen.getByTestId('animated-visual-surface');
 
-        expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(
-          styles.absoluteStyles
-        );
+      expect(getAnimatedStyle(surface)).toMatchObject({
+        borderRadius: 4,
       });
 
-      it('should render absolute position properties on the outer layer', async () => {
-        await render(
-          <Surface testID="surface-test" style={styles.absoluteStyles}>
-            {null}
-          </Surface>
-        );
+      await userEvent.press(screen.getByTestId('animate-visual-props'));
+      await jest.runAllTimersAsync();
 
-        expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(
-          styles.absoluteStyles
-        );
+      expect(getAnimatedStyle(surface)).toMatchObject({
+        borderRadius: 8,
       });
     });
 
-    describe('inner layer', () => {
-      it('should render inner layer styles on the inner layer', async () => {
-        await render(
-          <Surface testID="surface-test" style={styles.innerLayerViewStyle}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test')).toHaveStyle(
-          styles.innerLayerViewStyle
-        );
-      });
-    });
-
-    it('applies backgroundColor to every layer', async () => {
-      const backgroundColor = 'rgb(1, 2, 3)';
+    it('does not transition a DynamicColorIOS background', async () => {
       await render(
         <Surface
           testID="surface-test"
-          theme={{ colors: { elevation: { level1: backgroundColor } } }}
+          backgroundColor={DynamicColorIOS({ light: 'white', dark: 'black' })}
         >
           {null}
         </Surface>
       );
 
-      const style = { backgroundColor };
-      expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(style);
-      expect(screen.getByTestId('surface-test')).toHaveStyle(style);
-    });
-
-    describe('children wrapper', () => {
-      it('should render rest styles', async () => {
-        const combinedStyles = [styles.innerLayerViewStyle, styles.restStyle];
-
-        await render(
-          <Surface testID="surface-test" style={combinedStyles}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test')).toHaveStyle(combinedStyles);
+      expect(
+        getAnimatedStyle(screen.getByTestId('surface-test'))
+      ).toMatchObject({
+        transitionProperty: expect.not.arrayContaining(['backgroundColor']),
       });
     });
   });
@@ -287,12 +182,7 @@ describe('Surface', () => {
 
     it('should render Surface with appropriate bg color but without shadow, if mode is set to "flat"', async () => {
       await render(
-        <Surface
-          mode="flat"
-          elevation={5}
-          pointerEvents="box-none"
-          testID="surface-container"
-        >
+        <Surface mode="flat" elevation={5} testID="surface-container">
           {null}
         </Surface>
       );
@@ -317,6 +207,23 @@ describe('Surface', () => {
         elevation: 12,
       });
     });
+
+    it('does not transition a PlatformColor background', async () => {
+      await render(
+        <Surface
+          testID="surface-container"
+          backgroundColor={PlatformColor('systemBlue')}
+        >
+          {null}
+        </Surface>
+      );
+
+      expect(
+        getAnimatedStyle(screen.getByTestId('surface-container'))
+      ).toMatchObject({
+        transitionProperty: expect.not.arrayContaining(['backgroundColor']),
+      });
+    });
   });
 
   describe('on Web', () => {
diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx
index 1ea9e20bae..bd798e8180 100644
--- a/src/components/__tests__/ToggleButton.test.tsx
+++ b/src/components/__tests__/ToggleButton.test.tsx
@@ -1,10 +1,7 @@
-import { Animated } from 'react-native';
-
-import { describe, expect, it, jest } from '@jest/globals';
-import { act } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
 import { getTheme } from '../../core/theming';
-import { render, screen } from '../../test-utils';
+import { render } from '../../test-utils';
 import ToggleButton from '../ToggleButton';
 import { getToggleButtonColor } from '../ToggleButton/utils';
 
@@ -55,36 +52,3 @@ describe('getToggleButtonColor', () => {
     );
   });
 });
-
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
-  await render(
-    <ToggleButton
-      disabled
-      status="unchecked"
-      icon="heart"
-      testID="toggle-button"
-      style={[{ transform: [{ scale: value }] }]}
-    />
-  );
-  expect(screen.getByTestId('toggle-button-container-outer-layer')).toHaveStyle(
-    {
-      transform: [{ scale: 1 }],
-    }
-  );
-
-  Animated.timing(value, {
-    toValue: 1.5,
-    useNativeDriver: false,
-    duration: 200,
-  }).start();
-
-  await act(() => {
-    jest.advanceTimersByTime(200);
-  });
-  expect(screen.getByTestId('toggle-button-container-outer-layer')).toHaveStyle(
-    {
-      transform: [{ scale: 1.5 }],
-    }
-  );
-});
diff --git a/src/components/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
index 0090bbfbc0..3ffc31ac78 100644
--- a/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`renders badge 1`] = `
 <Text
   allowFontScaling={false}
+  collapsable={false}
   numberOfLines={1}
   style={
     [
@@ -14,8 +15,6 @@ exports[`renders badge 1`] = `
       },
       {
         "opacity": 1,
-        "transitionDuration": 150,
-        "transitionProperty": "opacity",
       },
       {
         "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -34,6 +33,7 @@ exports[`renders badge 1`] = `
 exports[`renders badge as hidden 1`] = `
 <Text
   allowFontScaling={false}
+  collapsable={false}
   numberOfLines={1}
   style={
     [
@@ -45,8 +45,6 @@ exports[`renders badge as hidden 1`] = `
       },
       {
         "opacity": 0,
-        "transitionDuration": 150,
-        "transitionProperty": "opacity",
       },
       {
         "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -55,20 +53,18 @@ exports[`renders badge as hidden 1`] = `
         "height": 16,
         "minWidth": 16,
       },
-      [
-        {
-          "fontFamily": "System",
-          "fontSize": 11,
-          "fontWeight": "500",
-          "letterSpacing": 0.5,
-          "lineHeight": 16,
-        },
-        {
-          "lineHeight": 16,
-          "maxWidth": 36,
-          "paddingHorizontal": 4,
-        },
-      ],
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
       undefined,
     ]
   }
@@ -80,6 +76,7 @@ exports[`renders badge as hidden 1`] = `
 exports[`renders badge in different color 1`] = `
 <Text
   allowFontScaling={false}
+  collapsable={false}
   numberOfLines={1}
   style={
     [
@@ -91,8 +88,6 @@ exports[`renders badge in different color 1`] = `
       },
       {
         "opacity": 1,
-        "transitionDuration": 150,
-        "transitionProperty": "opacity",
       },
       {
         "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -101,20 +96,18 @@ exports[`renders badge in different color 1`] = `
         "height": 16,
         "minWidth": 16,
       },
-      [
-        {
-          "fontFamily": "System",
-          "fontSize": 11,
-          "fontWeight": "500",
-          "letterSpacing": 0.5,
-          "lineHeight": 16,
-        },
-        {
-          "lineHeight": 16,
-          "maxWidth": 36,
-          "paddingHorizontal": 4,
-        },
-      ],
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
       {
         "backgroundColor": "#f44336",
       },
@@ -128,6 +121,7 @@ exports[`renders badge in different color 1`] = `
 exports[`renders badge with content 1`] = `
 <Text
   allowFontScaling={false}
+  collapsable={false}
   numberOfLines={1}
   style={
     [
@@ -139,8 +133,6 @@ exports[`renders badge with content 1`] = `
       },
       {
         "opacity": 1,
-        "transitionDuration": 150,
-        "transitionProperty": "opacity",
       },
       {
         "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -149,20 +141,18 @@ exports[`renders badge with content 1`] = `
         "height": 16,
         "minWidth": 16,
       },
-      [
-        {
-          "fontFamily": "System",
-          "fontSize": 11,
-          "fontWeight": "500",
-          "letterSpacing": 0.5,
-          "lineHeight": 16,
-        },
-        {
-          "lineHeight": 16,
-          "maxWidth": 36,
-          "paddingHorizontal": 4,
-        },
-      ],
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
       undefined,
     ]
   }
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 4e75db8cc7..94a5339bab 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -4,126 +4,220 @@ exports[`render visible banner, with custom theme 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {},
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0.039,
-        "shadowRadius": 0.25,
-      }
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
-        <View
+        <Text
+          aria-live="polite"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            aria-live="polite"
-            role="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                  "writingDirection": "ltr",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "flex": 1,
+                    "margin": 8,
+                  },
+                  {
+                    "color": "#00f",
                   },
-                  [
-                    {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    {
-                      "color": "#00f",
-                    },
-                  ],
                 ],
-              ]
-            }
-          >
-            Custom theme
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
         >
-          <View
-            collapsable={false}
-            style={
+          Custom theme
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
                 "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
@@ -131,21 +225,47 @@ exports[`render visible banner, with custom theme 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
-            }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
                 {
                   "backgroundColor": "transparent",
-                  "borderColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
                   "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
@@ -153,120 +273,118 @@ exports[`render visible banner, with custom theme 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-              testID="button-container"
-            >
-              <View
-                accessibilityState={
+            }
+            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]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+            testID="button"
+          >
+            <View
+              style={
+                [
                   {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
                   {
-                    "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]}
-                role="button"
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                      },
-                      {
-                        "opacity": 1,
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
+                        },
+                        {
+                          "marginHorizontal": 8,
                         },
+                        false,
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "color": "#043",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "#043",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    first
-                  </Text>
-                </View>
-              </View>
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+                testID="button-text"
+              >
+                first
+              </Text>
             </View>
           </View>
         </View>
@@ -280,132 +398,193 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 0,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {},
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0.039,
-        "shadowRadius": 0.25,
-      }
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "height": 0,
-          }
-        }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
           {
-            "opacity": 0,
             "position": "absolute",
             "top": 0,
+            "width": "100%",
+          },
+          {
             "transform": [
               {
                 "translateY": -0,
               },
             ],
-            "width": "100%",
+          },
+          {
+            "opacity": 0,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
       >
-        <View
+        <Text
+          aria-live="off"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            aria-live="off"
-            role="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                  "writingDirection": "ltr",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "flex": 1,
+                    "margin": 8,
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
                   },
-                  [
-                    {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                    },
-                  ],
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      />
     </View>
   </View>
 </View>
@@ -415,148 +594,242 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {},
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0.039,
-        "shadowRadius": 0.25,
-      }
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
         <View
           style={
             {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
+              "margin": 8,
             }
           }
         >
-          <View
-            style={
+          <Image
+            accessibilityIgnoresInvertColors={true}
+            source={
               {
-                "margin": 8,
+                "uri": "https://callstack.com/images/team/Satya.png",
               }
             }
-          >
-            <Image
-              accessibilityIgnoresInvertColors={true}
-              source={
-                {
-                  "uri": "https://callstack.com/images/team/Satya.png",
-                }
-              }
-              style={
-                {
-                  "height": 40,
-                  "width": 40,
-                }
-              }
-            />
-          </View>
-          <Text
-            aria-live="polite"
-            role="alert"
             style={
+              {
+                "height": 40,
+                "width": 40,
+              }
+            }
+          />
+        </View>
+        <Text
+          aria-live="polite"
+          role="alert"
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                  "writingDirection": "ltr",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "flex": 1,
+                    "margin": 8,
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
                   },
-                  [
-                    {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                    },
-                  ],
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
         >
-          <View
-            collapsable={false}
-            style={
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
                 "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
@@ -564,21 +837,47 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
-            }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
                 {
                   "backgroundColor": "transparent",
-                  "borderColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
                   "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
@@ -586,120 +885,118 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-              testID="button-container"
-            >
-              <View
-                accessibilityState={
+            }
+            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]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+            testID="button"
+          >
+            <View
+              style={
+                [
                   {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
                   {
-                    "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]}
-                role="button"
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      {
-                        "opacity": 1,
-                      },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
+                        },
+                        {
+                          "marginHorizontal": 8,
                         },
+                        false,
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "rgba(103, 80, 164, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    first
-                  </Text>
-                </View>
-              </View>
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+                testID="button-text"
+              >
+                first
+              </Text>
             </View>
           </View>
         </View>
@@ -713,126 +1010,220 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {},
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0.039,
-        "shadowRadius": 0.25,
-      }
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
-        <View
+        <Text
+          aria-live="polite"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            aria-live="polite"
-            role="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                  "writingDirection": "ltr",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "flex": 1,
+                    "margin": 8,
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
                   },
-                  [
-                    {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                    },
-                  ],
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
         >
-          <View
-            collapsable={false}
-            style={
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
                 "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
@@ -840,21 +1231,47 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
-            }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
                 {
                   "backgroundColor": "transparent",
-                  "borderColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
                   "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
@@ -862,129 +1279,161 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-              testID="button-container"
-            >
-              <View
-                accessibilityState={
+            }
+            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]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+            testID="button"
+          >
+            <View
+              style={
+                [
                   {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
                   {
-                    "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]}
-                role="button"
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                      },
-                      {
-                        "opacity": 1,
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
+                        },
+                        {
+                          "marginHorizontal": 8,
                         },
+                        false,
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "rgba(103, 80, 164, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    first
-                  </Text>
-                </View>
-              </View>
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+                testID="button-text"
+              >
+                first
+              </Text>
             </View>
           </View>
-          <View
-            collapsable={false}
-            style={
+        </View>
+        <View
+          collapsable={false}
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "margin": 4,
+              },
+              {},
               {
                 "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "margin": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
                 "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
@@ -992,21 +1441,47 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
-            }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {},
                 {
                   "backgroundColor": "transparent",
-                  "borderColor": "transparent",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 20,
-                  "borderStyle": "solid",
-                  "borderWidth": 0,
-                  "flex": undefined,
-                  "minWidth": "auto",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
                   "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
@@ -1014,120 +1489,118 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
-              testID="button-container"
-            >
-              <View
-                accessibilityState={
+            }
+            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]}
+            role="button"
+            style={
+              [
+                {
+                  "overflow": "hidden",
+                },
+                {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+            testID="button"
+          >
+            <View
+              style={
+                [
                   {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
                   {
-                    "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]}
-                role="button"
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "textAlign": "left",
                     },
                     {
-                      "borderRadius": 20,
+                      "color": "rgba(29, 27, 32, 1)",
+                      "writingDirection": "ltr",
                     },
-                  ]
-                }
-                testID="button"
-              >
-                <View
-                  style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                      },
-                      {
-                        "opacity": 1,
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
                       [
                         {
-                          "textAlign": "left",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        {
+                          "marginHorizontal": 12,
+                        },
+                        {
+                          "marginHorizontal": 8,
                         },
+                        false,
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          [
-                            {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            {
-                              "marginHorizontal": 12,
-                            },
-                            {
-                              "marginHorizontal": 8,
-                            },
-                            false,
-                            {
-                              "color": "rgba(103, 80, 164, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="button-text"
-                  >
-                    second
-                  </Text>
-                </View>
-              </View>
+                        undefined,
+                      ],
+                    ],
+                  ]
+                }
+                testID="button-text"
+              >
+                second
+              </Text>
             </View>
           </View>
         </View>
@@ -1141,142 +1614,202 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {},
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0.039,
-        "shadowRadius": 0.25,
-      }
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
         <View
           style={
             {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
+              "margin": 8,
             }
           }
         >
-          <View
-            style={
+          <Image
+            accessibilityIgnoresInvertColors={true}
+            source={
               {
-                "margin": 8,
+                "uri": "https://callstack.com/images/team/Satya.png",
               }
             }
-          >
-            <Image
-              accessibilityIgnoresInvertColors={true}
-              source={
-                {
-                  "uri": "https://callstack.com/images/team/Satya.png",
-                }
-              }
-              style={
-                {
-                  "height": 40,
-                  "width": 40,
-                }
-              }
-            />
-          </View>
-          <Text
-            aria-live="polite"
-            role="alert"
             style={
+              {
+                "height": 40,
+                "width": 40,
+              }
+            }
+          />
+        </View>
+        <Text
+          aria-live="polite"
+          role="alert"
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                  "writingDirection": "ltr",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "flex": 1,
+                    "margin": 8,
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
                   },
-                  [
-                    {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                    },
-                  ],
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      />
     </View>
   </View>
 </View>
@@ -1286,120 +1819,180 @@ exports[`renders visible banner, without action buttons and without image 1`] =
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+    [
+      {},
+      {
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
-    }
-  }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+      undefined,
+      {},
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
-          "height": 0,
+          "height": 0.55,
           "width": 0,
         },
-        "shadowOpacity": 0.039,
-        "shadowRadius": 0.25,
-      }
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
-    testID="surface"
   >
     <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      style={
+        [
+          null,
+          null,
         ]
       }
     >
       <View
-        collapsable={false}
         style={
           {
-            "height": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={{}}
       >
-        <View
+        <Text
+          aria-live="polite"
+          role="alert"
           style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "marginBottom": 0,
-              "marginHorizontal": 8,
-              "marginTop": 16,
-            }
-          }
-        >
-          <Text
-            aria-live="polite"
-            role="alert"
-            style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
               [
                 {
-                  "textAlign": "left",
-                },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                  "writingDirection": "ltr",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.25,
+                  "lineHeight": 20,
                 },
                 [
                   {
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.25,
-                    "lineHeight": 20,
+                    "flex": 1,
+                    "margin": 8,
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
                   },
-                  [
-                    {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                    },
-                  ],
                 ],
-              ]
-            }
-          >
-            Two line text string with two actions. One to two lines is preferable on mobile.
-          </Text>
-        </View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
-            }
+              ],
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      />
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index 33855bb467..6cf569a0c5 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -74,42 +74,102 @@ exports[`allows customizing Route's type via generics 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -264,6 +324,7 @@ exports[`allows customizing Route's type via generics 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -275,8 +336,6 @@ exports[`allows customizing Route's type via generics 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -525,6 +584,7 @@ exports[`allows customizing Route's type via generics 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -536,8 +596,6 @@ exports[`allows customizing Route's type via generics 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -757,42 +815,102 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -1008,6 +1126,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -1019,8 +1138,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -1209,6 +1326,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -1220,8 +1338,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -1410,6 +1526,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -1421,8 +1538,6 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -1521,42 +1636,102 @@ exports[`hides labels in shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -1772,6 +1947,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -1783,8 +1959,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -1973,6 +2147,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -1984,8 +2159,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -2174,6 +2347,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -2185,8 +2359,6 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -2423,42 +2595,102 @@ exports[`renders bottom navigation with getLazy 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -2673,6 +2905,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -2684,8 +2917,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -2994,6 +3225,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -3005,8 +3237,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -3315,6 +3545,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -3326,8 +3557,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -3636,6 +3865,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -3647,8 +3877,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -3957,6 +4185,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -3968,8 +4197,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -4189,42 +4416,102 @@ exports[`renders bottom navigation with scene animation 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -4444,6 +4731,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -4455,8 +4743,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -4714,6 +5000,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -4725,8 +5012,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -4984,6 +5269,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -4995,8 +5281,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -5254,6 +5538,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -5265,8 +5550,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -5524,6 +5807,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -5535,8 +5819,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -5700,42 +5982,102 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -5890,6 +6232,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -5901,8 +6244,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -6086,6 +6427,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -6097,8 +6439,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -6282,6 +6622,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -6293,8 +6634,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -6449,42 +6788,102 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -6644,6 +7043,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -6655,8 +7055,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -6822,6 +7220,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -6833,8 +7232,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -7000,6 +7397,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -7011,8 +7409,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -7178,6 +7574,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -7189,8 +7586,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -7356,6 +7751,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -7367,8 +7763,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -7500,42 +7894,102 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -7750,6 +8204,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -7761,8 +8216,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -8071,6 +8524,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -8082,8 +8536,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -8392,6 +8844,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -8403,8 +8856,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -8624,42 +9075,102 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -8879,6 +9390,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -8890,8 +9402,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -9149,6 +9659,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -9160,8 +9671,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -9419,6 +9928,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -9430,8 +9940,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -9595,42 +10103,102 @@ exports[`renders non-shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -9845,6 +10413,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -9856,8 +10425,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -10166,6 +10733,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -10177,8 +10745,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -10487,6 +11053,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -10498,8 +11065,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -10719,42 +11284,102 @@ exports[`renders shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
+        "pointerEvents": "none",
         "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
       }
     }
-    testID="bottom-navigation-bar-outer-layer"
+    testID="bottom-navigation-bar"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {},
+          undefined,
+          {},
+          {
+            "backgroundColor": "transparent",
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
       }
-      testID="bottom-navigation-bar"
     >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+      />
       <View
         collapsable={false}
         style={
@@ -10974,6 +11599,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -10985,8 +11611,6 @@ exports[`renders shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -11244,6 +11868,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -11255,8 +11880,6 @@ exports[`renders shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -11514,6 +12137,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -11525,8 +12149,6 @@ exports[`renders shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -11784,6 +12406,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -11795,8 +12418,6 @@ exports[`renders shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -12054,6 +12675,7 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
                     numberOfLines={1}
                     style={
                       [
@@ -12065,8 +12687,6 @@ exports[`renders shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index bbc1fff1be..ff911ae1d0 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -4,31 +4,39 @@ exports[`renders button with an accessibility hint 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -36,118 +44,165 @@ exports[`renders button with an accessibility hint 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityHint="hint"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityHint="hint"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Button with accessibility hint
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Button with accessibility hint
+      </Text>
     </View>
   </View>
 </View>
@@ -155,34 +210,42 @@ exports[`renders button with an accessibility hint 1`] = `
 
 exports[`renders button with an accessibility label 1`] = `
 <View
+  accessibilityLabel="label"
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    accessibilityLabel="label"
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -190,117 +253,164 @@ exports[`renders button with an accessibility label 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Button with accessibility label
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Button with accessibility label
+      </Text>
     </View>
   </View>
 </View>
@@ -310,31 +420,39 @@ exports[`renders button with button color 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "#e91e63",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "#e91e63",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "#e91e63",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -342,119 +460,166 @@ exports[`renders button with button color 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "#e91e63",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Custom Button
-        </Text>
-      </View>
-    </View>
-  </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Custom Button
+      </Text>
+    </View>
+  </View>
 </View>
 `;
 
@@ -462,31 +627,39 @@ exports[`renders button with color 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -494,117 +667,164 @@ exports[`renders button with color 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "#e91e63",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "#e91e63",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Custom Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Custom Button
+      </Text>
     </View>
   </View>
 </View>
@@ -614,31 +834,39 @@ exports[`renders button with custom testID 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="custom:testID-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -646,117 +874,164 @@ exports[`renders button with custom testID 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="custom:testID-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="custom:testID-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="custom:testID"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="custom:testID"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="custom:testID-text"
-        >
-          Button with custom testID
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="custom:testID-text"
+      >
+        Button with custom testID
+      </Text>
     </View>
   </View>
 </View>
@@ -766,31 +1041,39 @@ exports[`renders button with icon 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -798,166 +1081,213 @@ exports[`renders button with icon 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": 12,
+              "marginRight": -4,
             },
             {
-              "opacity": 1,
+              "marginLeft": 16,
+              "marginRight": -16,
+            },
+            {
+              "marginLeft": 12,
+              "marginRight": -8,
             },
-            undefined,
           ]
         }
+        testID="button-icon-container"
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "marginLeft": 12,
-                "marginRight": -4,
-              },
-              {
-                "marginLeft": 16,
-                "marginRight": -16,
-              },
-              {
-                "marginLeft": 12,
-                "marginRight": -8,
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
-            ]
-          }
-          testID="button-icon-container"
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            camera
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          camera
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 16,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Icon Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Icon Button
+      </Text>
     </View>
   </View>
 </View>
@@ -967,31 +1297,39 @@ exports[`renders button with icon in reverse order 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -999,168 +1337,215 @@ exports[`renders button with icon in reverse order 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "opacity": 1,
           },
           {
-            "borderRadius": 20,
+            "flexDirection": "row-reverse",
           },
         ]
       }
-      testID="button"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "marginLeft": -4,
+              "marginRight": 12,
             },
             {
-              "opacity": 1,
+              "marginLeft": -16,
+              "marginRight": 16,
             },
             {
-              "flexDirection": "row-reverse",
+              "marginLeft": -8,
+              "marginRight": 12,
             },
           ]
         }
+        testID="button-icon-container"
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "marginLeft": -4,
-                "marginRight": 12,
-              },
-              {
-                "marginLeft": -16,
-                "marginRight": 16,
-              },
-              {
-                "marginLeft": -8,
-                "marginRight": 12,
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
-            ]
-          }
-          testID="button-icon-container"
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            chevron-right
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          chevron-right
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 16,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Right Icon
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Right Icon
+      </Text>
     </View>
   </View>
 </View>
@@ -1170,31 +1555,39 @@ exports[`renders contained contained with mode 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(103, 80, 164, 1)",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "rgba(103, 80, 164, 1)",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -1202,118 +1595,165 @@ exports[`renders contained contained with mode 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-            },
-            {
-              "opacity": 1,
-            },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(255, 255, 255, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 24,
-                    "marginVertical": 10,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(255, 255, 255, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Contained Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Contained Button
+      </Text>
     </View>
   </View>
 </View>
@@ -1323,31 +1763,39 @@ exports[`renders disabled button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -1355,117 +1803,164 @@ exports[`renders disabled button 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 0.38,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 0.38,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Disabled Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Disabled Button
+      </Text>
     </View>
   </View>
 </View>
@@ -1475,31 +1970,39 @@ exports[`renders loading button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -1507,102 +2010,164 @@ exports[`renders loading button 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
       <View
+        accessible={true}
+        aria-busy={true}
+        role="progressbar"
         style={
           [
             {
               "alignItems": "center",
-              "flexDirection": "row",
               "justifyContent": "center",
             },
-            {
-              "opacity": 1,
-            },
-            undefined,
+            [
+              {
+                "marginLeft": 12,
+                "marginRight": -4,
+              },
+              {
+                "marginLeft": 16,
+                "marginRight": -16,
+              },
+              {
+                "marginLeft": 12,
+                "marginRight": -8,
+              },
+            ],
           ]
         }
       >
         <View
-          accessible={true}
-          aria-busy={true}
-          role="progressbar"
+          collapsable={false}
           style={
-            [
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-              },
-              [
-                {
-                  "marginLeft": 12,
-                  "marginRight": -4,
-                },
-                {
-                  "marginLeft": 16,
-                  "marginRight": -16,
-                },
-                {
-                  "marginLeft": 12,
-                  "marginRight": -8,
-                },
-              ],
-            ]
+            {
+              "height": 18,
+              "opacity": 1,
+              "width": 18,
+            }
           }
         >
           <View
             collapsable={false}
             style={
               {
-                "height": 18,
-                "opacity": 1,
-                "width": 18,
+                "alignItems": "center",
+                "bottom": 0,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
               }
             }
           >
@@ -1610,13 +2175,13 @@ exports[`renders loading button 1`] = `
               collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 18,
+                  "transform": [
+                    {
+                      "rotate": "45deg",
+                    },
+                  ],
+                  "width": 18,
                 }
               }
             >
@@ -1624,12 +2189,8 @@ exports[`renders loading button 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
+                    "height": 9,
+                    "overflow": "hidden",
                     "width": 18,
                   }
                 }
@@ -1638,8 +2199,15 @@ exports[`renders loading button 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 9,
-                      "overflow": "hidden",
+                      "height": 18,
+                      "transform": [
+                        {
+                          "translateY": 0,
+                        },
+                        {
+                          "rotate": "-165deg",
+                        },
+                      ],
                       "width": 18,
                     }
                   }
@@ -1648,15 +2216,8 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": 0,
-                          },
-                          {
-                            "rotate": "-165deg",
-                          },
-                        ],
+                        "height": 9,
+                        "overflow": "hidden",
                         "width": 18,
                       }
                     }
@@ -1665,40 +2226,44 @@ exports[`renders loading button 1`] = `
                       collapsable={false}
                       style={
                         {
-                          "height": 9,
-                          "overflow": "hidden",
+                          "borderColor": "rgba(103, 80, 164, 1)",
+                          "borderRadius": 9,
+                          "borderWidth": 1.8,
+                          "height": 18,
                           "width": 18,
                         }
                       }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(103, 80, 164, 1)",
-                            "borderRadius": 9,
-                            "borderWidth": 1.8,
-                            "height": 18,
-                            "width": 18,
-                          }
-                        }
-                      />
-                    </View>
+                    />
                   </View>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              {
+                "alignItems": "center",
+                "bottom": 0,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+          >
             <View
               collapsable={false}
               style={
                 {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 18,
+                  "transform": [
+                    {
+                      "rotate": "45deg",
+                    },
+                  ],
+                  "width": 18,
                 }
               }
             >
@@ -1706,12 +2271,9 @@ exports[`renders loading button 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
+                    "height": 9,
+                    "overflow": "hidden",
+                    "top": 9,
                     "width": 18,
                   }
                 }
@@ -1720,9 +2282,15 @@ exports[`renders loading button 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 9,
-                      "overflow": "hidden",
-                      "top": 9,
+                      "height": 18,
+                      "transform": [
+                        {
+                          "translateY": -9,
+                        },
+                        {
+                          "rotate": "345deg",
+                        },
+                      ],
                       "width": 18,
                     }
                   }
@@ -1731,15 +2299,8 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": -9,
-                          },
-                          {
-                            "rotate": "345deg",
-                          },
-                        ],
+                        "height": 9,
+                        "overflow": "hidden",
                         "width": 18,
                       }
                     }
@@ -1748,114 +2309,111 @@ exports[`renders loading button 1`] = `
                       collapsable={false}
                       style={
                         {
-                          "height": 9,
-                          "overflow": "hidden",
+                          "borderColor": "rgba(103, 80, 164, 1)",
+                          "borderRadius": 9,
+                          "borderWidth": 1.8,
+                          "height": 18,
                           "width": 18,
                         }
                       }
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          {
-                            "borderColor": "rgba(103, 80, 164, 1)",
-                            "borderRadius": 9,
-                            "borderWidth": 1.8,
-                            "height": 18,
-                            "width": 18,
-                          }
-                        }
-                      />
-                    </View>
+                    />
                   </View>
                 </View>
               </View>
             </View>
           </View>
         </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 16,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Loading Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Loading Button
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders outlined button with mode 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+exports[`renders outlined button with mode 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(202, 196, 208, 1)",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderWidth": 1,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -1863,118 +2421,165 @@ exports[`renders outlined button with mode 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 19,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 19,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 24,
-                    "marginVertical": 10,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Outlined Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Outlined Button
+      </Text>
     </View>
   </View>
 </View>
@@ -1984,31 +2589,39 @@ exports[`renders text button by default 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -2016,117 +2629,164 @@ exports[`renders text button by default 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Text Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Text Button
+      </Text>
     </View>
   </View>
 </View>
@@ -2136,31 +2796,39 @@ exports[`renders text button with mode 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
         "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
         "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -2168,117 +2836,164 @@ exports[`renders text button with mode 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 20,
+        },
+      ]
+    }
+    testID="button"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
           },
           {
-            "borderRadius": 20,
+            "opacity": 1,
           },
+          undefined,
         ]
       }
-      testID="button"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
+              "textAlign": "left",
             },
             {
-              "opacity": 1,
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
+                undefined,
               ],
-            ]
-          }
-          testID="button-text"
-        >
-          Text Button
-        </Text>
-      </View>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Text Button
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 7bf18dde0e..04359a41f9 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -4,31 +4,41 @@ exports[`renders chip with close button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
         "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -36,316 +46,239 @@ exports[`renders chip with close button 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+    testID="chip"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 34,
           },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
-            },
-            {
-              "opacity": 1,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
-              "paddingRight": 34,
+              "paddingLeft": 8,
+              "paddingRight": 0,
             },
+            null,
           ]
         }
       >
-        <View
-          style={
-            [
-              {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
-              },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
-                },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            information
-          </Text>
-        </View>
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 0,
-                  },
-                  undefined,
-                ],
               ],
             ]
           }
         >
-          Example Chip
+          information
         </Text>
       </View>
-    </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "position": "absolute",
-          "right": 0,
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Close"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "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]}
-        role="button"
-      >
-        <View
-          style={
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "marginRight": 4,
-              },
-              {
-                "marginRight": 8,
-                "padding": 0,
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
+                {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
                 {
                   "color": "rgba(29, 25, 43, 1)",
-                  "fontSize": 18,
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            close
-          </Text>
-        </View>
-      </View>
+                {
+                  "marginLeft": 8,
+                  "marginRight": 0,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
-</View>
-`;
-
-exports[`renders chip with custom close button 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
-        "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 0,
       }
     }
-    testID="chip-container"
   >
     <View
+      accessibilityLabel="Close"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": true,
+          "disabled": false,
           "expanded": undefined,
-          "selected": false,
+          "selected": undefined,
         }
       }
       accessibilityValue={
@@ -369,262 +302,98 @@ exports[`renders chip with custom close button 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       role="button"
-      style={
-        [
-          {
-            "overflow": "hidden",
-          },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
-        ]
-      }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
-              "opacity": 1,
+              "marginRight": 4,
             },
             {
-              "paddingRight": 34,
+              "marginRight": 8,
+              "padding": 0,
             },
           ]
         }
       >
-        <View
-          style={
-            [
-              {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
-              },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
-                },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            information
-          </Text>
-        </View>
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 0,
-                  },
-                  undefined,
-                ],
               ],
             ]
           }
         >
-          Example Chip
+          close
         </Text>
       </View>
     </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "height": "100%",
-          "justifyContent": "center",
-          "position": "absolute",
-          "right": 0,
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Close"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "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]}
-        role="button"
-      >
-        <View
-          style={
-            [
-              {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "marginRight": 4,
-              },
-              {
-                "marginRight": 8,
-                "padding": 0,
-              },
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "rgba(29, 25, 43, 1)",
-                  "fontSize": 18,
-                },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            arrow-down
-          </Text>
-        </View>
-      </View>
-    </View>
   </View>
 </View>
 `;
 
-exports[`renders chip with icon 1`] = `
+exports[`renders chip with custom close button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
         "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -632,223 +401,239 @@ exports[`renders chip with icon 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+    testID="chip"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 34,
           },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
-            },
-            {
-              "opacity": 1,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
+              "paddingLeft": 8,
               "paddingRight": 0,
             },
+            null,
           ]
         }
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(103, 80, 164, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            information
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          information
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
+                {
+                  "marginLeft": 8,
+                  "marginRight": 0,
+                },
+                undefined,
               ],
-            ]
-          }
-        >
-          Example Chip
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
-</View>
-`;
-
-exports[`renders chip with onPress 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
   <View
-    collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
-        "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
-        "flexDirection": "column",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 0,
       }
     }
-    testID="chip-container"
   >
     <View
+      accessibilityLabel="Close"
       accessibilityState={
         {
           "busy": undefined,
           "checked": undefined,
           "disabled": false,
           "expanded": undefined,
-          "selected": false,
+          "selected": undefined,
         }
       }
       accessibilityValue={
@@ -872,88 +657,52 @@ exports[`renders chip with onPress 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       role="button"
-      style={
-        [
-          {
-            "overflow": "hidden",
-          },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
-        ]
-      }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
-              "opacity": 1,
+              "marginRight": 4,
             },
             {
-              "paddingRight": 0,
+              "marginRight": 8,
+              "padding": 0,
             },
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
               [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 16,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
               ],
             ]
           }
         >
-          Example Chip
+          arrow-down
         </Text>
       </View>
     </View>
@@ -961,35 +710,45 @@ exports[`renders chip with onPress 1`] = `
 </View>
 `;
 
-exports[`renders outlined disabled chip 1`] = `
+exports[`renders chip with icon 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(243, 237, 247, 1)",
-        "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
+        "borderWidth": 0.5,
         "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -997,159 +756,478 @@ exports[`renders outlined disabled chip 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": 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]}
-      role="button"
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+    testID="chip"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 0,
           },
-          [
-            {
-              "borderRadius": 8,
-            },
-            {
-              "width": "100%",
-            },
-          ],
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
-            },
-            {
-              "opacity": 0.38,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
+              "paddingLeft": 8,
               "paddingRight": 0,
             },
+            null,
           ]
         }
       >
         <Text
-          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
           selectable={false}
           style={
             [
               {
-                "textAlign": "left",
+                "color": "rgba(103, 80, 164, 1)",
+                "fontSize": 18,
               },
+              [
+                {
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          information
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
               {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 16,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
+                {
+                  "marginLeft": 8,
+                  "marginRight": 16,
+                },
+                undefined,
               ],
-            ]
-          }
-        >
-          Example Chip
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`renders selected chip 1`] = `
+exports[`renders chip with onPress 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
   }
-  testID="chip-container-outer-layer"
+  testID="chip-container"
 >
   <View
     collapsable={false}
     style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": false,
+      }
+    }
+    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]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+    testID="chip"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 0,
+          },
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                {
+                  "marginLeft": 16,
+                  "marginRight": 16,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders outlined disabled chip 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
-        "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 1,
-        "flex": undefined,
+        "borderWidth": 0.5,
         "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "rgba(243, 237, 247, 1)",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "transparent",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -1157,170 +1235,434 @@ exports[`renders selected chip 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "transparent",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": true,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "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]}
-      role="button"
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+    testID="chip"
+  >
+    <View
       style={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
           },
+          {
+            "opacity": 0.38,
+          },
+          {
+            "paddingRight": 0,
+          },
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
           [
             {
-              "borderRadius": 8,
+              "textAlign": "left",
             },
             {
-              "width": "100%",
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
             },
-          ],
+            [
+              {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                {
+                  "marginLeft": 16,
+                  "marginRight": 16,
+                },
+                undefined,
+              ],
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders selected chip 1`] = `
+<View
+  collapsable={false}
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "borderWidth": 0.5,
+        "flexDirection": "column",
+      },
+      {
+        "borderWidth": 1,
+      },
+      {
+        "borderColor": "transparent",
+      },
+      undefined,
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": true,
+      }
+    }
+    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]}
+    role="button"
+    style={
+      [
+        {
+          "overflow": "hidden",
+        },
+        [
+          {
+            "borderRadius": 8,
+          },
+          {
+            "width": "100%",
+          },
+        ],
+      ]
+    }
+    testID="chip"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
+          },
+          {
+            "paddingRight": 0,
+          },
         ]
       }
-      testID="chip"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
-            },
-            {
-              "paddingLeft": 0,
-            },
-            {
-              "opacity": 1,
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
+              "paddingLeft": 8,
               "paddingRight": 0,
             },
+            null,
           ]
         }
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "alignSelf": "center",
-                "padding": 4,
-              },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
               },
-              null,
-            ]
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
-            style={
               [
                 {
-                  "color": "rgba(29, 25, 43, 1)",
-                  "fontSize": 18,
+                  "lineHeight": 18,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 18,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-              ]
-            }
-          >
-            check
-          </Text>
-        </View>
-        <Text
-          numberOfLines={1}
-          selectable={false}
-          style={
+                {
+                  "backgroundColor": "transparent",
+                },
+              ],
+            ]
+          }
+        >
+          check
+        </Text>
+      </View>
+      <Text
+        numberOfLines={1}
+        selectable={false}
+        style={
+          [
+            {
+              "textAlign": "left",
+            },
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "writingDirection": "ltr",
+            },
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               [
                 {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                [
-                  {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  {
-                    "marginLeft": 8,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
+                {
+                  "marginLeft": 8,
+                  "marginRight": 16,
+                },
+                undefined,
               ],
-            ]
-          }
-        >
-          Example Chip
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Example Chip
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
index e9bc774f78..349fa1d224 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -382,280 +382,240 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-left"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-left"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-left
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-left
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-right"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-right"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-right
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-right
+          </Text>
         </View>
       </View>
     </View>
@@ -720,560 +680,480 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
       }
-      testID="icon-button-container-outer-layer"
+      testID="icon-button-container"
     >
       <View
+        accessibilityLabel="page-first"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
         collapsable={false}
-        style={
+        focusable={true}
+        hitSlop={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="icon-button-container"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
       >
         <View
-          accessibilityLabel="page-first"
-          accessibilityState={
+          style={
             {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+              "opacity": 1,
             }
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
-            [
-              {
-                "overflow": "hidden",
-              },
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
               [
                 {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
                 },
-                undefined,
-              ],
-            ]
-          }
-          testID="icon-button"
-        >
-          <View
-            style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              page-first
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            page-first
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-left"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-left"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-left
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-left
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-right"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-right"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-right
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-right
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="page-last"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="page-last"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              page-last
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            page-last
+          </Text>
         </View>
       </View>
     </View>
@@ -1338,280 +1218,240 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-left"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-left"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-left
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-left
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-right"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-right"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-right
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-right
+          </Text>
         </View>
       </View>
     </View>
@@ -1684,200 +1524,256 @@ exports[`DataTable.Pagination renders data table pagination with options select
       <View
         collapsable={false}
         style={
-          {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "marginRight": 16,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
+          [
+            {},
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
             },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
-        }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+            undefined,
             {
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
-              "borderRadius": 20,
-              "borderStyle": "solid",
               "borderWidth": 1,
-              "flex": undefined,
-              "minWidth": 64,
+            },
+            {
+              "marginRight": 16,
+              "textAlign": "center",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
               "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
-              "textAlign": "center",
-            }
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        testID="button-container"
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "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]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              {
+                "borderRadius": 19,
+              },
+            ]
           }
-          testID="button-container"
+          testID="button"
         >
           <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "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]}
-            role="button"
             style={
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                },
+                {
+                  "opacity": 1,
                 },
                 {
-                  "borderRadius": 19,
+                  "flexDirection": "row-reverse",
                 },
               ]
             }
-            testID="button"
           >
             <View
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                  },
-                  {
-                    "opacity": 1,
+                    "marginLeft": -4,
+                    "marginRight": 12,
                   },
                   {
-                    "flexDirection": "row-reverse",
+                    "marginLeft": -16,
+                    "marginRight": 16,
                   },
+                  false,
                 ]
               }
+              testID="button-icon-container"
             >
-              <View
+              <Text
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                selectable={false}
                 style={
                   [
                     {
-                      "marginLeft": -4,
-                      "marginRight": 12,
-                    },
-                    {
-                      "marginLeft": -16,
-                      "marginRight": 16,
+                      "color": "rgba(103, 80, 164, 1)",
+                      "fontSize": 18,
                     },
-                    false,
-                  ]
-                }
-                testID="button-icon-container"
-              >
-                <Text
-                  accessibilityElementsHidden={true}
-                  importantForAccessibility="no-hide-descendants"
-                  pointerEvents="none"
-                  selectable={false}
-                  style={
                     [
                       {
-                        "color": "rgba(103, 80, 164, 1)",
-                        "fontSize": 18,
+                        "lineHeight": 18,
+                        "transform": [
+                          {
+                            "scaleX": 1,
+                          },
+                        ],
                       },
-                      [
-                        {
-                          "lineHeight": 18,
-                          "transform": [
-                            {
-                              "scaleX": 1,
-                            },
-                          ],
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  menu-down
-                </Text>
-              </View>
-              <Text
-                numberOfLines={1}
-                selectable={false}
-                style={
+                      {
+                        "backgroundColor": "transparent",
+                      },
+                    ],
+                  ]
+                }
+              >
+                menu-down
+              </Text>
+            </View>
+            <Text
+              numberOfLines={1}
+              selectable={false}
+              style={
+                [
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
+                  },
                   [
                     {
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                      "writingDirection": "ltr",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
                     },
                     [
                       {
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      {
+                        "marginHorizontal": 24,
+                        "marginVertical": 10,
+                      },
+                      undefined,
+                      false,
+                      {
+                        "color": "rgba(103, 80, 164, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
                         "letterSpacing": 0.1,
                         "lineHeight": 20,
                       },
-                      [
-                        {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
-                  ]
-                }
-                testID="button-text"
-              >
-                2
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+              testID="button-text"
+            >
+              2
+            </Text>
           </View>
         </View>
       </View>
@@ -1924,560 +1820,480 @@ exports[`DataTable.Pagination renders data table pagination with options select
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="page-first"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="page-first"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              page-first
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            page-first
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-left"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-left"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
-            [
-              {
-                "overflow": "hidden",
-              },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-left
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-left
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="chevron-right"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-right"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              chevron-right
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            chevron-right
+          </Text>
         </View>
       </View>
     </View>
     <View
       collapsable={false}
       style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-          "width": 40,
-        }
-      }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
           {
-            "backgroundColor": "transparent",
             "borderColor": "rgba(202, 196, 208, 1)",
             "borderRadius": 20,
             "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="icon-button-container"
+    >
+      <View
+        accessibilityLabel="page-last"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
           }
         }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="page-last"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
+        }
+        accessible={true}
+        centered={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
             {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
-          style={
+              "overflow": "hidden",
+            },
             [
               {
-                "overflow": "hidden",
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
               },
-              [
-                {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
-                },
-                undefined,
-              ],
-            ]
+              undefined,
+            ],
+          ]
+        }
+        testID="icon-button"
+      >
+        <View
+          style={
+            {
+              "opacity": 1,
+            }
           }
-          testID="icon-button"
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                  "fontSize": 24,
+                },
                 [
                   {
-                    "color": "rgba(29, 27, 32, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              page-last
-            </Text>
-          </View>
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            page-last
+          </Text>
         </View>
       </View>
     </View>
diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
index cec33bb556..391413183a 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -2,15 +2,15 @@
 
 exports[`renders FAB large size 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 28,
         "height": 96,
         "opacity": 1,
         "transform": [
@@ -20,6 +20,29 @@ exports[`renders FAB large size 1`] = `
         ],
         "width": 96,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -29,14 +52,59 @@ exports[`renders FAB large size 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -148,6 +216,7 @@ exports[`renders FAB large size 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -174,15 +243,15 @@ exports[`renders FAB large size 1`] = `
 
 exports[`renders FAB medium size 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 20,
         "height": 80,
         "opacity": 1,
         "transform": [
@@ -192,6 +261,29 @@ exports[`renders FAB medium size 1`] = `
         ],
         "width": 80,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -201,14 +293,59 @@ exports[`renders FAB medium size 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -320,6 +457,7 @@ exports[`renders FAB medium size 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -346,41 +484,109 @@ exports[`renders FAB medium size 1`] = `
 
 exports[`renders FAB transitioning to not visible 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
         "height": 56,
-        "opacity": 0,
+        "opacity": 1,
         "transform": [
           {
-            "scale": 0,
+            "scale": 1,
           },
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "none",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 3.33,
           "width": 0,
         },
-        "shadowOpacity": 0,
+        "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "none",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -492,6 +698,7 @@ exports[`renders FAB transitioning to not visible 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -518,24 +725,47 @@ exports[`renders FAB transitioning to not visible 1`] = `
 
 exports[`renders FAB transitioning to visible 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
         "height": 56,
-        "opacity": 1,
+        "opacity": 0,
         "transform": [
           {
-            "scale": 1,
+            "scale": 0,
           },
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -545,14 +775,59 @@ exports[`renders FAB transitioning to visible 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -664,6 +939,7 @@ exports[`renders FAB transitioning to visible 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -690,15 +966,15 @@ exports[`renders FAB transitioning to visible 1`] = `
 
 exports[`renders FAB with aria-label 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -708,6 +984,29 @@ exports[`renders FAB with aria-label 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -717,14 +1016,59 @@ exports[`renders FAB with aria-label 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -837,6 +1181,7 @@ exports[`renders FAB with aria-label 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -863,15 +1208,15 @@ exports[`renders FAB with aria-label 1`] = `
 
 exports[`renders FAB with containerColor and contentColor overrides 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "#ff5722",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -881,6 +1226,29 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "#ff5722",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -890,14 +1258,59 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "#ff5722",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -1009,6 +1422,7 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1035,15 +1449,15 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
 
 exports[`renders FAB with containerColor override 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "#ff5722",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1053,6 +1467,29 @@ exports[`renders FAB with containerColor override 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "#ff5722",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -1062,14 +1499,59 @@ exports[`renders FAB with containerColor override 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "#ff5722",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -1181,6 +1663,7 @@ exports[`renders FAB with containerColor override 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1207,15 +1690,15 @@ exports[`renders FAB with containerColor override 1`] = `
 
 exports[`renders FAB with default props 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1225,6 +1708,29 @@ exports[`renders FAB with default props 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -1234,14 +1740,59 @@ exports[`renders FAB with default props 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -1353,6 +1904,7 @@ exports[`renders FAB with default props 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1379,15 +1931,15 @@ exports[`renders FAB with default props 1`] = `
 
 exports[`renders FAB with primary variant 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(103, 80, 164, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1397,6 +1949,29 @@ exports[`renders FAB with primary variant 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -1406,14 +1981,59 @@ exports[`renders FAB with primary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -1525,6 +2145,7 @@ exports[`renders FAB with primary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1551,15 +2172,15 @@ exports[`renders FAB with primary variant 1`] = `
 
 exports[`renders FAB with secondary variant 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(98, 91, 113, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1569,6 +2190,29 @@ exports[`renders FAB with secondary variant 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(98, 91, 113, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -1578,14 +2222,59 @@ exports[`renders FAB with secondary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -1697,6 +2386,7 @@ exports[`renders FAB with secondary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1723,15 +2413,15 @@ exports[`renders FAB with secondary variant 1`] = `
 
 exports[`renders FAB with tertiary variant 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(125, 82, 96, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1741,6 +2431,29 @@ exports[`renders FAB with tertiary variant 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(125, 82, 96, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -1750,14 +2463,59 @@ exports[`renders FAB with tertiary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(125, 82, 96, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -1869,6 +2627,7 @@ exports[`renders FAB with tertiary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1895,15 +2654,15 @@ exports[`renders FAB with tertiary variant 1`] = `
 
 exports[`renders FAB with tonalSecondary variant 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1913,6 +2672,29 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -1922,14 +2704,59 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -2041,6 +2868,7 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -2067,15 +2895,15 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
 
 exports[`renders FAB with tonalTertiary variant 1`] = `
 <View
+  collapsable={false}
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(255, 216, 228, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -2085,6 +2913,29 @@ exports[`renders FAB with tonalTertiary variant 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {},
+      {
+        "backgroundColor": "rgba(255, 216, 228, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -2094,14 +2945,59 @@ exports[`renders FAB with tonalTertiary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(255, 216, 228, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
     style={
       [
         {
@@ -2213,6 +3109,7 @@ exports[`renders FAB with tonalTertiary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
diff --git a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
index d159f82912..07197c92c7 100644
--- a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
@@ -3,15 +3,15 @@
 exports[`renders extended FAB collapsed 1`] = `
 <>
   <View
+    collapsable={false}
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 1,
           "transform": [
@@ -21,6 +21,29 @@ exports[`renders extended FAB collapsed 1`] = `
           ],
           "width": 56,
         },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
@@ -30,14 +53,59 @@ exports[`renders extended FAB collapsed 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
       style={
         [
           {
@@ -143,6 +211,7 @@ exports[`renders extended FAB collapsed 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -183,6 +252,7 @@ exports[`renders extended FAB collapsed 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
           {
@@ -207,14 +277,18 @@ exports[`renders extended FAB collapsed 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
     style={
-      {
-        "alignSelf": "flex-start",
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-      }
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
     }
   >
     <Text
@@ -242,15 +316,15 @@ exports[`renders extended FAB collapsed 1`] = `
 exports[`renders extended FAB expanded 1`] = `
 <>
   <View
+    collapsable={false}
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 1,
           "transform": [
@@ -260,6 +334,29 @@ exports[`renders extended FAB expanded 1`] = `
           ],
           "width": 56,
         },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
@@ -269,14 +366,59 @@ exports[`renders extended FAB expanded 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
       style={
         [
           {
@@ -382,6 +524,7 @@ exports[`renders extended FAB expanded 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -422,6 +565,7 @@ exports[`renders extended FAB expanded 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
           {
@@ -446,14 +590,18 @@ exports[`renders extended FAB expanded 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
     style={
-      {
-        "alignSelf": "flex-start",
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-      }
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
     }
   >
     <Text
@@ -481,15 +629,15 @@ exports[`renders extended FAB expanded 1`] = `
 exports[`renders extended FAB large size 1`] = `
 <>
   <View
+    collapsable={false}
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 28,
           "height": 96,
           "opacity": 1,
           "transform": [
@@ -499,6 +647,29 @@ exports[`renders extended FAB large size 1`] = `
           ],
           "width": 96,
         },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
@@ -508,14 +679,59 @@ exports[`renders extended FAB large size 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 28,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
       style={
         [
           {
@@ -621,6 +837,7 @@ exports[`renders extended FAB large size 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -661,6 +878,7 @@ exports[`renders extended FAB large size 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
           {
@@ -685,14 +903,18 @@ exports[`renders extended FAB large size 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
     style={
-      {
-        "alignSelf": "flex-start",
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-      }
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
     }
   >
     <Text
@@ -720,15 +942,15 @@ exports[`renders extended FAB large size 1`] = `
 exports[`renders extended FAB medium size 1`] = `
 <>
   <View
+    collapsable={false}
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 20,
           "height": 80,
           "opacity": 1,
           "transform": [
@@ -738,6 +960,29 @@ exports[`renders extended FAB medium size 1`] = `
           ],
           "width": 80,
         },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
@@ -747,14 +992,59 @@ exports[`renders extended FAB medium size 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 20,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
       style={
         [
           {
@@ -860,6 +1150,7 @@ exports[`renders extended FAB medium size 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -900,6 +1191,7 @@ exports[`renders extended FAB medium size 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
           {
@@ -924,14 +1216,18 @@ exports[`renders extended FAB medium size 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
     style={
-      {
-        "alignSelf": "flex-start",
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-      }
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
     }
   >
     <Text
@@ -959,15 +1255,15 @@ exports[`renders extended FAB medium size 1`] = `
 exports[`renders extended FAB not visible 1`] = `
 <>
   <View
+    collapsable={false}
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 0,
           "transform": [
@@ -977,23 +1273,91 @@ exports[`renders extended FAB not visible 1`] = `
           ],
           "width": 56,
         },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 3.33,
             "width": 0,
           },
-          "shadowOpacity": 0,
+          "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "none",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
       style={
         [
           {
@@ -1099,6 +1463,7 @@ exports[`renders extended FAB not visible 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1139,6 +1504,7 @@ exports[`renders extended FAB not visible 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
           {
@@ -1163,14 +1529,18 @@ exports[`renders extended FAB not visible 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
     style={
-      {
-        "alignSelf": "flex-start",
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-      }
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
     }
   >
     <Text
@@ -1198,15 +1568,15 @@ exports[`renders extended FAB not visible 1`] = `
 exports[`renders extended FAB transitioning to collapsed 1`] = `
 <>
   <View
+    collapsable={false}
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 1,
           "transform": [
@@ -1216,6 +1586,29 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
           ],
           "width": 56,
         },
+        {
+          "pointerEvents": "auto",
+        },
+        {},
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
@@ -1225,14 +1618,59 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+    />
+    <View
+      collapsable={false}
       style={
         [
           {
@@ -1338,13 +1776,14 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
             style={
               [
                 {
                   "marginStart": 8,
                 },
                 {
-                  "opacity": 0,
+                  "opacity": 1,
                 },
                 {
                   "pointerEvents": "none",
@@ -1378,6 +1817,7 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
           {
@@ -1402,14 +1842,18 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
     style={
-      {
-        "alignSelf": "flex-start",
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-      }
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
     }
   >
     <Text
diff --git a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
index d48d6e3666..dcbdf08ee2 100644
--- a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
@@ -56,6 +56,7 @@ exports[`renders FAB.Menu closed 1`] = `
     >
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -162,6 +163,7 @@ exports[`renders FAB.Menu closed 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -196,6 +198,7 @@ exports[`renders FAB.Menu closed 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -221,6 +224,7 @@ exports[`renders FAB.Menu closed 1`] = `
       </View>
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -327,6 +331,7 @@ exports[`renders FAB.Menu closed 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -361,6 +366,7 @@ exports[`renders FAB.Menu closed 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -403,23 +409,46 @@ exports[`renders FAB.Menu closed 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           [
+            {},
             undefined,
             {
               "transformOrigin": "center",
             },
             {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
+              "height": 56,
               "opacity": 1,
               "transform": [
                 {
                   "scale": 1,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 16,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
@@ -430,14 +459,59 @@ exports[`renders FAB.Menu closed 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 16,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
           style={
             [
               {
@@ -447,12 +521,13 @@ exports[`renders FAB.Menu closed 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 16,
               },
             ]
           }
         >
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -473,6 +548,7 @@ exports[`renders FAB.Menu closed 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -549,6 +625,7 @@ exports[`renders FAB.Menu closed 1`] = `
               }
             >
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -561,10 +638,10 @@ exports[`renders FAB.Menu closed 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -602,6 +679,7 @@ exports[`renders FAB.Menu closed 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -614,10 +692,10 @@ exports[`renders FAB.Menu closed 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -658,6 +736,7 @@ exports[`renders FAB.Menu closed 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
           style={
             [
               {
@@ -673,7 +752,7 @@ exports[`renders FAB.Menu closed 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 21,
                 "opacity": 0,
               },
             ]
@@ -741,6 +820,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
     >
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -847,6 +927,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -881,6 +962,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -906,6 +988,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
       </View>
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
         style={
           [
@@ -1012,6 +1095,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -1046,6 +1130,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1088,23 +1173,46 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           [
+            {},
             undefined,
             {
               "transformOrigin": "center",
             },
             {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
+              "height": 56,
               "opacity": 0,
               "transform": [
                 {
                   "scale": 0,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 16,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
@@ -1112,17 +1220,62 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 "height": 3.33,
                 "width": 0,
               },
-              "shadowOpacity": 0,
+              "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "none",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 16,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
           style={
             [
               {
@@ -1132,12 +1285,13 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 16,
               },
             ]
           }
         >
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1158,6 +1312,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1234,6 +1389,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
               }
             >
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -1246,10 +1402,10 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -1287,6 +1443,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -1299,10 +1456,10 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -1343,6 +1500,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
           style={
             [
               {
@@ -1358,7 +1516,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 21,
                 "opacity": 0,
               },
             ]
@@ -1426,6 +1584,7 @@ exports[`renders FAB.Menu open 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -1532,6 +1691,7 @@ exports[`renders FAB.Menu open 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -1566,6 +1726,7 @@ exports[`renders FAB.Menu open 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1591,6 +1752,7 @@ exports[`renders FAB.Menu open 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -1697,6 +1859,7 @@ exports[`renders FAB.Menu open 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -1731,6 +1894,7 @@ exports[`renders FAB.Menu open 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1773,23 +1937,46 @@ exports[`renders FAB.Menu open 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           [
+            {},
             undefined,
             {
               "transformOrigin": "center",
             },
             {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
+              "height": 56,
               "opacity": 1,
               "transform": [
                 {
                   "scale": 1,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
@@ -1800,14 +1987,59 @@ exports[`renders FAB.Menu open 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
           style={
             [
               {
@@ -1817,12 +2049,13 @@ exports[`renders FAB.Menu open 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1843,6 +2076,7 @@ exports[`renders FAB.Menu open 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -1919,6 +2153,7 @@ exports[`renders FAB.Menu open 1`] = `
               }
             >
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -1931,10 +2166,10 @@ exports[`renders FAB.Menu open 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -1972,6 +2207,7 @@ exports[`renders FAB.Menu open 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -1984,10 +2220,10 @@ exports[`renders FAB.Menu open 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -2028,6 +2264,7 @@ exports[`renders FAB.Menu open 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
           style={
             [
               {
@@ -2043,7 +2280,7 @@ exports[`renders FAB.Menu open 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -2111,6 +2348,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2217,6 +2455,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -2251,6 +2490,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -2276,6 +2516,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2382,6 +2623,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -2416,6 +2658,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -2441,6 +2684,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2547,6 +2791,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -2581,6 +2826,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -2606,6 +2852,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2712,6 +2959,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -2746,6 +2994,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -2771,6 +3020,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -2877,6 +3127,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -2911,6 +3162,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -2936,6 +3188,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -3042,6 +3295,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -3076,6 +3330,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -3118,23 +3373,46 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           [
+            {},
             undefined,
             {
               "transformOrigin": "center",
             },
             {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
+              "height": 56,
               "opacity": 1,
               "transform": [
                 {
                   "scale": 1,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
@@ -3145,14 +3423,59 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
           style={
             [
               {
@@ -3162,12 +3485,13 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -3188,6 +3512,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -3264,6 +3589,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               }
             >
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -3276,10 +3602,10 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -3317,6 +3643,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -3329,10 +3656,10 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -3373,6 +3700,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
           style={
             [
               {
@@ -3388,7 +3716,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -3457,6 +3785,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -3563,6 +3892,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -3597,6 +3927,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -3622,6 +3953,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -3728,6 +4060,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -3762,6 +4095,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -3804,23 +4138,46 @@ exports[`renders FAB.Menu with center alignment 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           [
+            {},
             undefined,
             {
               "transformOrigin": "center",
             },
             {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
+              "height": 56,
               "opacity": 1,
               "transform": [
                 {
                   "scale": 1,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
@@ -3831,14 +4188,59 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
           style={
             [
               {
@@ -3848,12 +4250,13 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -3874,6 +4277,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -3950,6 +4354,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               }
             >
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -3962,10 +4367,10 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -4003,6 +4408,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -4015,10 +4421,10 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -4059,6 +4465,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
           style={
             [
               {
@@ -4074,7 +4481,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -4142,6 +4549,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -4276,6 +4684,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                   email
                 </Text>
                 <View
+                  collapsable={false}
                   style={
                     [
                       {
@@ -4311,6 +4720,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -4336,6 +4746,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -4470,6 +4881,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                   bell
                 </Text>
                 <View
+                  collapsable={false}
                   style={
                     [
                       {
@@ -4505,6 +4917,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -4547,23 +4960,46 @@ exports[`renders FAB.Menu with items having icons 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           [
+            {},
             undefined,
             {
               "transformOrigin": "center",
             },
             {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
+              "height": 56,
               "opacity": 1,
               "transform": [
                 {
                   "scale": 1,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
@@ -4574,14 +5010,59 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
           style={
             [
               {
@@ -4591,12 +5072,13 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -4617,6 +5099,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -4693,6 +5176,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               }
             >
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -4705,10 +5189,10 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -4746,6 +5230,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -4758,10 +5243,10 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -4802,6 +5287,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
           style={
             [
               {
@@ -4817,7 +5303,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -4885,6 +5371,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -4991,6 +5478,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -5025,6 +5513,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -5050,6 +5539,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
         style={
           [
@@ -5156,6 +5646,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
                   style={
                     [
                       null,
@@ -5190,6 +5681,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -5232,23 +5724,46 @@ exports[`renders FAB.Menu with start alignment 1`] = `
       }
     >
       <View
+        collapsable={false}
         style={
           [
+            {},
             undefined,
             {
               "transformOrigin": "center",
             },
             {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
+              "height": 56,
               "opacity": 1,
               "transform": [
                 {
                   "scale": 1,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+            {
+              "pointerEvents": "auto",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
@@ -5259,14 +5774,59 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+        />
+        <View
+          collapsable={false}
           style={
             [
               {
@@ -5276,12 +5836,13 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -5302,6 +5863,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             }
           />
           <View
+            collapsable={false}
             style={
               [
                 {
@@ -5378,6 +5940,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               }
             >
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -5390,10 +5953,10 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -5431,6 +5994,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
                 style={
                   [
                     {
@@ -5443,10 +6007,10 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -5487,6 +6051,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
           style={
             [
               {
@@ -5502,7 +6067,7 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
index 731830ff73..e383e7d05b 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -4,139 +4,119 @@ exports[`renders disabled icon button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "transparent",
         "borderColor": "rgba(202, 196, 208, 1)",
         "borderRadius": 20,
         "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      undefined,
+    ]
+  }
+  testID="icon-button-container"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      style={
+        {
+          "opacity": 0.38,
+        }
       }
-      testID="icon-button"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
-          {
-            "opacity": 0.38,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
+          [
+            {
+              "color": "rgba(29, 27, 32, 1)",
+              "fontSize": 24,
+            },
             [
               {
-                "color": "rgba(29, 27, 32, 1)",
-                "fontSize": 24,
+                "lineHeight": 24,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
               },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          camera
-        </Text>
-      </View>
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        camera
+      </Text>
     </View>
   </View>
 </View>
@@ -146,139 +126,119 @@ exports[`renders icon button by default 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "transparent",
         "borderColor": "rgba(202, 196, 208, 1)",
         "borderRadius": 20,
         "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      undefined,
+    ]
+  }
+  testID="icon-button-container"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
       }
-      testID="icon-button"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
-          {
-            "opacity": 1,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
+          [
+            {
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 24,
+            },
             [
               {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontSize": 24,
+                "lineHeight": 24,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
               },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          camera
-        </Text>
-      </View>
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        camera
+      </Text>
     </View>
   </View>
 </View>
@@ -288,139 +248,119 @@ exports[`renders icon button with color 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "transparent",
         "borderColor": "rgba(202, 196, 208, 1)",
         "borderRadius": 20,
         "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      undefined,
+    ]
+  }
+  testID="icon-button-container"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
       }
-      testID="icon-button"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
-          {
-            "opacity": 1,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
+          [
+            {
+              "color": "#e91e63",
+              "fontSize": 24,
+            },
             [
               {
-                "color": "#e91e63",
-                "fontSize": 24,
+                "lineHeight": 24,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
               },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          camera
-        </Text>
-      </View>
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        camera
+      </Text>
     </View>
   </View>
 </View>
@@ -430,139 +370,119 @@ exports[`renders icon button with size 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 23,
-      "height": 46,
-      "margin": 6,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 46,
+        "width": 46,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 46,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "transparent",
         "borderColor": "rgba(202, 196, 208, 1)",
         "borderRadius": 23,
         "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      undefined,
+    ]
+  }
+  testID="icon-button-container"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
-          [
-            {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
-            },
-            undefined,
-          ],
-        ]
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
       }
-      testID="icon-button"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
-          {
-            "opacity": 1,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
+          [
+            {
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 30,
+            },
             [
               {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontSize": 30,
+                "lineHeight": 30,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
               },
-              [
-                {
-                  "lineHeight": 30,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          camera
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        camera
+      </Text>
     </View>
   </View>
 </View>
@@ -572,172 +492,152 @@ exports[`renders icon change animated 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "height": 40,
-      "margin": 6,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 40,
-    }
-  }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
       {
-        "backgroundColor": "transparent",
         "borderColor": "rgba(202, 196, 208, 1)",
         "borderRadius": 20,
         "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      undefined,
+    ]
+  }
+  testID="icon-button-container"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
-    testID="icon-button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+    }
+    accessible={true}
+    centered={true}
+    collapsable={false}
+    focusable={true}
+    hitSlop={
+      {
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
-        }
-      }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
+          "overflow": "hidden",
+        },
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
           },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
           [
             {
               "alignItems": "center",
-              "flexGrow": 1,
               "justifyContent": "center",
             },
-            undefined,
-          ],
-        ]
-      }
-      testID="icon-button"
-    >
-      <View
-        style={
-          {
-            "opacity": 1,
-          }
+            {
+              "height": 24,
+              "width": 24,
+            },
+          ]
         }
       >
         <View
+          collapsable={false}
           style={
-            [
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-              },
-              {
-                "height": 24,
-                "width": 24,
-              },
-            ]
+            {
+              "bottom": 0,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": [
+                {
+                  "rotate": "0deg",
+                },
+              ],
+            }
           }
+          testID="cross-fade-icon-current"
         >
-          <View
-            collapsable={false}
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
+                },
+                [
                   {
-                    "rotate": "0deg",
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
                   },
                 ],
-              }
+              ]
             }
-            testID="cross-fade-icon-current"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              camera
-            </Text>
-          </View>
+            camera
+          </Text>
         </View>
       </View>
     </View>
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index f06b87045f..032971c85e 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -120,31 +120,41 @@ exports[`renders list item with custom description 1`] = `
           <View
             collapsable={false}
             style={
-              {
-                "backgroundColor": "rgba(232, 222, 248, 1)",
-                "borderRadius": 8,
-                "shadowColor": "rgba(0, 0, 0, 1)",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
+              [
+                {},
+                {
+                  "borderStyle": "solid",
+                  "borderWidth": 0.5,
+                  "flexDirection": "column",
+                },
+                {
+                  "borderWidth": 1,
                 },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
-              }
-            }
-            testID="chip-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "rgba(232, 222, 248, 1)",
                   "borderColor": "transparent",
+                },
+                undefined,
+                {},
+                {
+                  "backgroundColor": "rgba(232, 222, 248, 1)",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 8,
-                  "borderStyle": "solid",
-                  "borderWidth": 1,
-                  "flex": undefined,
-                  "flexDirection": "column",
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
                   "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
@@ -152,170 +162,217 @@ exports[`renders list item with custom description 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
+                },
+              ]
+            }
+            testID="chip-container"
+          >
+            <View
+              collapsable={false}
+              style={
+                [
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  {
+                    "pointerEvents": "none",
+                  },
+                  {},
+                  {},
+                  {
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                  },
+                  {
+                    "borderBottomEndRadius": undefined,
+                    "borderBottomLeftRadius": undefined,
+                    "borderBottomRightRadius": undefined,
+                    "borderBottomStartRadius": undefined,
+                    "borderCurve": "continuous",
+                    "borderEndEndRadius": undefined,
+                    "borderEndStartRadius": undefined,
+                    "borderRadius": 8,
+                    "borderStartEndRadius": undefined,
+                    "borderStartStartRadius": undefined,
+                    "borderTopEndRadius": undefined,
+                    "borderTopLeftRadius": undefined,
+                    "borderTopRightRadius": undefined,
+                    "borderTopStartRadius": undefined,
+                  },
+                  {
+                    "shadowColor": "rgba(0, 0, 0, 1)",
+                    "shadowOffset": {
+                      "height": 0,
+                      "width": 0,
+                    },
+                    "shadowOpacity": 0,
+                    "shadowRadius": 0,
+                  },
+                ]
+              }
+            />
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": false,
                 }
               }
-              testID="chip-container"
-            >
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": false,
-                  }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
                 }
-                accessibilityValue={
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              role="button"
+              style={
+                [
                   {
-                    "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]}
-                role="button"
+                    "overflow": "hidden",
+                  },
+                  [
+                    {
+                      "borderRadius": 8,
+                    },
+                    {
+                      "width": "100%",
+                    },
+                  ],
+                ]
+              }
+              testID="chip"
+            >
+              <View
                 style={
                   [
                     {
-                      "overflow": "hidden",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "paddingLeft": 4,
+                      "position": "relative",
+                    },
+                    {
+                      "paddingLeft": 0,
+                    },
+                    {
+                      "opacity": 1,
+                    },
+                    {
+                      "paddingRight": 0,
                     },
-                    [
-                      {
-                        "borderRadius": 8,
-                      },
-                      {
-                        "width": "100%",
-                      },
-                    ],
                   ]
                 }
-                testID="chip"
               >
                 <View
                   style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "paddingLeft": 4,
-                        "position": "relative",
-                      },
-                      {
-                        "paddingLeft": 0,
-                      },
-                      {
-                        "opacity": 1,
+                        "alignSelf": "center",
+                        "padding": 4,
                       },
                       {
+                        "paddingLeft": 8,
                         "paddingRight": 0,
                       },
+                      null,
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       [
                         {
-                          "alignSelf": "center",
-                          "padding": 4,
+                          "color": "rgba(103, 80, 164, 1)",
+                          "fontSize": 18,
                         },
-                        {
-                          "paddingLeft": 8,
-                          "paddingRight": 0,
-                        },
-                        null,
-                      ]
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
                         [
                           {
-                            "color": "rgba(103, 80, 164, 1)",
-                            "fontSize": 18,
+                            "lineHeight": 18,
+                            "transform": [
+                              {
+                                "scaleX": 1,
+                              },
+                            ],
                           },
-                          [
-                            {
-                              "lineHeight": 18,
-                              "transform": [
-                                {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      file-pdf-box
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
+                          {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    file-pdf-box
+                  </Text>
+                </View>
+                <Text
+                  numberOfLines={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
                         [
                           {
+                            "marginVertical": 6,
+                            "textAlignVertical": "center",
+                          },
+                          {
+                            "color": "rgba(29, 25, 43, 1)",
                             "fontFamily": "System",
                             "fontSize": 14,
                             "fontWeight": "500",
                             "letterSpacing": 0.1,
                             "lineHeight": 20,
                           },
-                          [
-                            {
-                              "marginVertical": 6,
-                              "textAlignVertical": "center",
-                            },
-                            {
-                              "color": "rgba(29, 25, 43, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            {
-                              "marginLeft": 8,
-                              "marginRight": 16,
-                            },
-                            undefined,
-                          ],
+                          {
+                            "marginLeft": 8,
+                            "marginRight": 16,
+                          },
+                          undefined,
                         ],
-                      ]
-                    }
-                  >
-                    DOCS.pdf
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  DOCS.pdf
+                </Text>
               </View>
             </View>
           </View>
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index 3e027106ae..afcd649f4f 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -1,25 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders menu with content styles 1`] = `
-<>
+exports[`renders not visible menu 1`] = `
+<View
+  collapsable={false}
+  pointerEvents="box-none"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     collapsable={false}
-    pointerEvents="box-none"
-    style={
-      {
-        "flex": 1,
-      }
-    }
   >
     <View
       collapsable={false}
-    >
-      <View
-        collapsable={false}
-        style={
+      style={
+        [
+          {},
+          {
+            "borderStyle": "solid",
+            "minWidth": 64,
+          },
+          undefined,
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderWidth": 1,
+          },
+          undefined,
+          {},
           {
             "backgroundColor": "transparent",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
             "borderRadius": 20,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
             "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
@@ -27,21 +56,47 @@ exports[`renders menu with content styles 1`] = `
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
-          }
-        }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          },
+        ]
+      }
+      testID="button-container"
+    >
+      <View
+        collapsable={false}
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {},
             {
               "backgroundColor": "transparent",
-              "borderColor": "rgba(202, 196, 208, 1)",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
               "borderRadius": 20,
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "flex": undefined,
-              "minWidth": 64,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
               "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
@@ -49,573 +104,233 @@ exports[`renders menu with content styles 1`] = `
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
-            }
-          }
-          testID="button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "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]}
-            role="button"
-            style={
-              [
-                {
-                  "overflow": "hidden",
-                },
-                {
-                  "borderRadius": 19,
-                },
-              ]
-            }
-            testID="button"
-          >
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                  },
-                  {
-                    "opacity": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                numberOfLines={1}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                      "writingDirection": "ltr",
-                    },
-                    [
-                      {
-                        "fontFamily": "System",
-                        "fontSize": 14,
-                        "fontWeight": "500",
-                        "letterSpacing": 0.1,
-                        "lineHeight": 20,
-                      },
-                      [
-                        {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                    ],
-                  ]
-                }
-                testID="button-text"
-              >
-                Open menu
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    pointerEvents="box-none"
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      accessibilityLabel="Close menu"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "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]}
-      pointerEvents="auto"
-      role="button"
-      style={
-        {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": "100%",
+            },
+          ]
         }
-      }
-    />
-    <View
-      aria-modal={true}
-      collapsable={false}
-      onAccessibilityEscape={[MockFunction]}
-      pointerEvents="box-none"
-      style={
-        [
+      />
+      <View
+        accessibilityState={
           {
-            "position": "absolute",
-          },
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
           {
-            "left": 8,
-            "top": 8,
-          },
-          undefined,
-        ]
-      }
-      testID="menu-view"
-    >
-      <View
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         collapsable={false}
-        pointerEvents="box-none"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
         style={
-          {
-            "transform": [
-              {
-                "translateX": -0,
-              },
-              {
-                "translateY": -0,
-              },
-            ],
-          }
+          [
+            {
+              "overflow": "hidden",
+            },
+            {
+              "borderRadius": 19,
+            },
+          ]
         }
+        testID="button"
       >
         <View
-          collapsable={false}
           style={
-            {
-              "backgroundColor": "rgba(243, 237, 247, 1)",
-              "borderRadius": 4,
-              "borderTopLeftRadius": 0,
-              "borderTopRightRadius": 0,
-              "opacity": 0,
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 1.66,
-                "width": 0,
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
               },
-              "shadowOpacity": 0.19,
-              "shadowRadius": 2.36,
-              "transform": [
-                {
-                  "scaleX": 0,
-                },
-                {
-                  "scaleY": 0,
-                },
-              ],
-            }
+              {
+                "opacity": 1,
+              },
+              undefined,
+            ]
           }
-          testID="menu-surface-outer-layer"
         >
-          <View
-            collapsable={false}
-            pointerEvents="box-none"
+          <Text
+            numberOfLines={1}
+            selectable={false}
             style={
-              {
-                "backgroundColor": "rgba(243, 237, 247, 1)",
-                "borderRadius": 4,
-                "borderTopLeftRadius": 0,
-                "borderTopRightRadius": 0,
-                "flex": undefined,
-                "paddingVertical": 8,
-                "shadowColor": "rgba(0, 0, 0, 1)",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.039,
-                "shadowRadius": 0.75,
-              }
-            }
-            testID="menu-surface"
-          >
-            <View
-              accessibilityState={
+              [
                 {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": false,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
+                  "textAlign": "left",
+                },
                 {
-                  "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]}
-              role="menuitem"
-              style={
+                  "color": "rgba(29, 27, 32, 1)",
+                  "writingDirection": "ltr",
+                },
                 [
-                  false,
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
                   [
                     {
-                      "height": 48,
-                      "justifyContent": "center",
-                      "maxWidth": 280,
-                      "minWidth": 112,
+                      "marginHorizontal": 16,
+                      "marginVertical": 9,
+                      "textAlign": "center",
                     },
                     {
-                      "paddingHorizontal": 12,
+                      "marginHorizontal": 24,
+                      "marginVertical": 10,
                     },
                     undefined,
-                    undefined,
-                  ],
-                ]
-              }
-              testID="menu-item"
-            >
-              <View
-                style={
-                  [
+                    false,
                     {
-                      "flexDirection": "row",
-                    },
-                    {
-                      "opacity": 1,
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <View
-                  pointerEvents="none"
-                  style={
-                    [
-                      {
-                        "justifyContent": "center",
-                      },
-                      {
-                        "maxWidth": 268,
-                        "minWidth": 100,
-                      },
-                      {
-                        "marginLeft": 4,
-                      },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1.5}
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 24,
-                          },
-                          [
-                            {
-                              "color": "rgba(29, 27, 32, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="menu-item-title"
-                  >
-                    Undo
-                  </Text>
-                </View>
-              </View>
-            </View>
-            <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "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]}
-              role="menuitem"
-              style={
-                [
-                  false,
-                  [
-                    {
-                      "height": 48,
-                      "justifyContent": "center",
-                      "maxWidth": 280,
-                      "minWidth": 112,
-                    },
-                    {
-                      "paddingHorizontal": 12,
+                      "color": "rgba(103, 80, 164, 1)",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
                     },
                     undefined,
-                    undefined,
                   ],
-                ]
-              }
-              testID="menu-item"
-            >
-              <View
-                style={
-                  [
-                    {
-                      "flexDirection": "row",
-                    },
-                    {
-                      "opacity": 1,
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <View
-                  pointerEvents="none"
-                  style={
-                    [
-                      {
-                        "justifyContent": "center",
-                      },
-                      {
-                        "maxWidth": 268,
-                        "minWidth": 100,
-                      },
-                      {
-                        "marginLeft": 4,
-                      },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1.5}
-                    numberOfLines={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 16,
-                            "fontWeight": "400",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 24,
-                          },
-                          [
-                            {
-                              "color": "rgba(29, 27, 32, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                        ],
-                      ]
-                    }
-                    testID="menu-item-title"
-                  >
-                    Redo
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
+                ],
+              ]
+            }
+            testID="button-text"
+          >
+            Open menu
+          </Text>
         </View>
       </View>
     </View>
-  </View>
-</>
-`;
-
-exports[`renders not visible menu 1`] = `
-<View
-  collapsable={false}
-  pointerEvents="box-none"
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
+  </View>
+</View>
+`;
+
+exports[`renders visible menu 1`] = `
+<>
   <View
     collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
   >
     <View
       collapsable={false}
-      style={
-        {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="button-container-outer-layer"
     >
       <View
         collapsable={false}
         style={
-          {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
-            "borderRadius": 20,
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "flex": undefined,
-            "minWidth": 64,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
+          [
+            {},
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
             },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
+            undefined,
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderWidth": 1,
+            },
+            undefined,
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
         }
         testID="button-container"
       >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
+              {
+                "backgroundColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+        />
         <View
           accessibilityState={
             {
@@ -728,175 +443,6 @@ exports[`renders not visible menu 1`] = `
       </View>
     </View>
   </View>
-</View>
-`;
-
-exports[`renders visible menu 1`] = `
-<>
-  <View
-    collapsable={false}
-    pointerEvents="box-none"
-    style={
-      {
-        "flex": 1,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
-        }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(202, 196, 208, 1)",
-              "borderRadius": 20,
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "flex": undefined,
-              "minWidth": 64,
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
-            }
-          }
-          testID="button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "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]}
-            role="button"
-            style={
-              [
-                {
-                  "overflow": "hidden",
-                },
-                {
-                  "borderRadius": 19,
-                },
-              ]
-            }
-            testID="button"
-          >
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                  },
-                  {
-                    "opacity": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                numberOfLines={1}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "rgba(29, 27, 32, 1)",
-                      "writingDirection": "ltr",
-                    },
-                    [
-                      {
-                        "fontFamily": "System",
-                        "fontSize": 14,
-                        "fontWeight": "500",
-                        "letterSpacing": 0.1,
-                        "lineHeight": 20,
-                      },
-                      [
-                        {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        undefined,
-                      ],
-                    ],
-                  ]
-                }
-                testID="button-text"
-              >
-                Open menu
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
   <View
     collapsable={false}
     pointerEvents="box-none"
@@ -977,63 +523,134 @@ exports[`renders visible menu 1`] = `
         collapsable={false}
         pointerEvents="box-none"
         style={
-          {
-            "transform": [
-              {
-                "translateX": -0,
-              },
-              {
-                "translateY": -0,
-              },
-            ],
-          }
+          [
+            {
+              "transform": [
+                {
+                  "translateX": -0,
+                },
+                {
+                  "translateY": -0,
+                },
+              ],
+            },
+          ]
         }
       >
         <View
           collapsable={false}
           style={
-            {
-              "backgroundColor": "rgba(243, 237, 247, 1)",
-              "borderRadius": 4,
-              "opacity": 0,
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 1.66,
-                "width": 0,
+            [
+              {},
+              {
+                "opacity": 0,
               },
-              "shadowOpacity": 0.19,
-              "shadowRadius": 2.36,
-              "transform": [
+              {
+                "pointerEvents": "box-none",
+              },
+              {},
+              {
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
+              },
+              {},
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 1.66,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 2.36,
+              },
+            ]
+          }
+          testID="menu-surface"
+        >
+          <View
+            collapsable={false}
+            style={
+              [
                 {
-                  "scaleX": 0,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 {
-                  "scaleY": 0,
+                  "pointerEvents": "none",
                 },
-              ],
+                {},
+                {},
+                {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                },
+                {
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": "continuous",
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 4,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.75,
+                },
+              ]
             }
-          }
-          testID="menu-surface-outer-layer"
-        >
+          />
           <View
             collapsable={false}
-            pointerEvents="box-none"
             style={
-              {
-                "backgroundColor": "rgba(243, 237, 247, 1)",
-                "borderRadius": 4,
-                "flex": undefined,
-                "paddingVertical": 8,
-                "shadowColor": "rgba(0, 0, 0, 1)",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
+              [
+                {
+                  "paddingVertical": 8,
                 },
-                "shadowOpacity": 0.039,
-                "shadowRadius": 0.75,
-              }
+                false,
+                undefined,
+              ]
             }
-            testID="menu-surface"
           >
             <View
               accessibilityState={
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index 29b660cbd9..c324b1874c 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -4,29 +4,34 @@ exports[`activity indicator snapshot test 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(236, 230, 240, 1)",
-      "borderRadius": 28,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
         "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+      {},
+      {
         "backgroundColor": "rgba(236, 230, 240, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 28,
-        "flex": undefined,
-        "flexDirection": "row",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -34,18 +39,47 @@ exports[`activity indicator snapshot test 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+      },
+    ]
+  }
+  testID="search-bar-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -53,191 +87,204 @@ exports[`activity indicator snapshot test 1`] = `
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="search-bar-icon-container"
+  >
+    <View
+      accessibilityLabel="search"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="search-bar-icon-container-outer-layer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="search-bar-icon"
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="search-bar-icon-container"
       >
-        <View
-          accessibilityLabel="search"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "overflow": "hidden",
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
               },
               [
                 {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                undefined,
               ],
             ]
           }
-          testID="search-bar-icon"
         >
-          <View
-            style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              magnify
-            </Text>
-          </View>
-        </View>
+          magnify
+        </Text>
       </View>
     </View>
-    <TextInput
-      keyboardAppearance="light"
-      placeholder=""
-      placeholderTextColor="rgba(29, 27, 32, 1)"
-      returnKeyType="search"
-      role="searchbox"
-      selectionColor="rgba(103, 80, 164, 1)"
-      style={
-        [
-          {
-            "alignSelf": "stretch",
-            "flex": 1,
-            "fontSize": 18,
-            "minWidth": 0,
-            "paddingLeft": 8,
-          },
-          {
-            "color": "rgba(73, 69, 79, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": "400",
-            "letterSpacing": 0.5,
-            "lineHeight": 0,
-            "textAlign": "left",
-          },
-          {
-            "minHeight": 56,
-            "paddingLeft": 0,
-          },
-          undefined,
-        ]
-      }
-      testID="search-bar"
-      underlineColorAndroid="transparent"
-      value=""
-    />
+  </View>
+  <TextInput
+    keyboardAppearance="light"
+    placeholder=""
+    placeholderTextColor="rgba(29, 27, 32, 1)"
+    returnKeyType="search"
+    role="searchbox"
+    selectionColor="rgba(103, 80, 164, 1)"
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flex": 1,
+          "fontSize": 18,
+          "minWidth": 0,
+          "paddingLeft": 8,
+        },
+        {
+          "color": "rgba(73, 69, 79, 1)",
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "letterSpacing": 0.5,
+          "lineHeight": 0,
+          "textAlign": "left",
+        },
+        {
+          "minHeight": 56,
+          "paddingLeft": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="search-bar"
+    underlineColorAndroid="transparent"
+    value=""
+  />
+  <View
+    accessible={true}
+    aria-busy={true}
+    role="progressbar"
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+        },
+        {
+          "marginHorizontal": 16,
+        },
+      ]
+    }
+    testID="activity-indicator"
+  >
     <View
-      accessible={true}
-      aria-busy={true}
-      role="progressbar"
+      collapsable={false}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          {
-            "marginHorizontal": 16,
-          },
-        ]
+        {
+          "height": 24,
+          "opacity": 1,
+          "width": 24,
+        }
       }
-      testID="activity-indicator"
     >
       <View
         collapsable={false}
         style={
           {
-            "height": 24,
-            "opacity": 1,
-            "width": 24,
+            "alignItems": "center",
+            "bottom": 0,
+            "justifyContent": "center",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
           }
         }
       >
@@ -245,13 +292,13 @@ exports[`activity indicator snapshot test 1`] = `
           collapsable={false}
           style={
             {
-              "alignItems": "center",
-              "bottom": 0,
-              "justifyContent": "center",
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
+              "height": 24,
+              "transform": [
+                {
+                  "rotate": "45deg",
+                },
+              ],
+              "width": 24,
             }
           }
         >
@@ -259,12 +306,8 @@ exports[`activity indicator snapshot test 1`] = `
             collapsable={false}
             style={
               {
-                "height": 24,
-                "transform": [
-                  {
-                    "rotate": "45deg",
-                  },
-                ],
+                "height": 12,
+                "overflow": "hidden",
                 "width": 24,
               }
             }
@@ -273,8 +316,15 @@ exports[`activity indicator snapshot test 1`] = `
               collapsable={false}
               style={
                 {
-                  "height": 12,
-                  "overflow": "hidden",
+                  "height": 24,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "rotate": "-165deg",
+                    },
+                  ],
                   "width": 24,
                 }
               }
@@ -283,15 +333,8 @@ exports[`activity indicator snapshot test 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 24,
-                    "transform": [
-                      {
-                        "translateY": 0,
-                      },
-                      {
-                        "rotate": "-165deg",
-                      },
-                    ],
+                    "height": 12,
+                    "overflow": "hidden",
                     "width": 24,
                   }
                 }
@@ -300,40 +343,44 @@ exports[`activity indicator snapshot test 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 12,
-                      "overflow": "hidden",
+                      "borderColor": "rgba(103, 80, 164, 1)",
+                      "borderRadius": 12,
+                      "borderWidth": 2.4,
+                      "height": 24,
                       "width": 24,
                     }
                   }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "borderColor": "rgba(103, 80, 164, 1)",
-                        "borderRadius": 12,
-                        "borderWidth": 2.4,
-                        "height": 24,
-                        "width": 24,
-                      }
-                    }
-                  />
-                </View>
+                />
               </View>
             </View>
           </View>
         </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "bottom": 0,
+            "justifyContent": "center",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
         <View
           collapsable={false}
           style={
             {
-              "alignItems": "center",
-              "bottom": 0,
-              "justifyContent": "center",
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
+              "height": 24,
+              "transform": [
+                {
+                  "rotate": "45deg",
+                },
+              ],
+              "width": 24,
             }
           }
         >
@@ -341,12 +388,9 @@ exports[`activity indicator snapshot test 1`] = `
             collapsable={false}
             style={
               {
-                "height": 24,
-                "transform": [
-                  {
-                    "rotate": "45deg",
-                  },
-                ],
+                "height": 12,
+                "overflow": "hidden",
+                "top": 12,
                 "width": 24,
               }
             }
@@ -355,9 +399,15 @@ exports[`activity indicator snapshot test 1`] = `
               collapsable={false}
               style={
                 {
-                  "height": 12,
-                  "overflow": "hidden",
-                  "top": 12,
+                  "height": 24,
+                  "transform": [
+                    {
+                      "translateY": -12,
+                    },
+                    {
+                      "rotate": "345deg",
+                    },
+                  ],
                   "width": 24,
                 }
               }
@@ -366,15 +416,8 @@ exports[`activity indicator snapshot test 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 24,
-                    "transform": [
-                      {
-                        "translateY": -12,
-                      },
-                      {
-                        "rotate": "345deg",
-                      },
-                    ],
+                    "height": 12,
+                    "overflow": "hidden",
                     "width": 24,
                   }
                 }
@@ -383,25 +426,14 @@ exports[`activity indicator snapshot test 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 12,
-                      "overflow": "hidden",
+                      "borderColor": "rgba(103, 80, 164, 1)",
+                      "borderRadius": 12,
+                      "borderWidth": 2.4,
+                      "height": 24,
                       "width": 24,
                     }
                   }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "borderColor": "rgba(103, 80, 164, 1)",
-                        "borderRadius": 12,
-                        "borderWidth": 2.4,
-                        "height": 24,
-                        "width": 24,
-                      }
-                    }
-                  />
-                </View>
+                />
               </View>
             </View>
           </View>
@@ -416,29 +448,34 @@ exports[`renders with placeholder 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(236, 230, 240, 1)",
-      "borderRadius": 28,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
         "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+      {},
+      {
         "backgroundColor": "rgba(236, 230, 240, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 28,
-        "flex": undefined,
-        "flexDirection": "row",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -446,338 +483,345 @@ exports[`renders with placeholder 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+      },
+    ]
+  }
+  testID="search-bar-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="search-bar-icon-container"
+  >
+    <View
+      accessibilityLabel="search"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="search-bar-icon-container-outer-layer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="search-bar-icon"
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="search-bar-icon-container"
       >
-        <View
-          accessibilityLabel="search"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "overflow": "hidden",
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
               },
               [
                 {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                undefined,
               ],
             ]
           }
-          testID="search-bar-icon"
         >
-          <View
-            style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              magnify
-            </Text>
-          </View>
-        </View>
+          magnify
+        </Text>
       </View>
     </View>
-    <TextInput
-      keyboardAppearance="light"
-      placeholder="Search"
-      placeholderTextColor="rgba(29, 27, 32, 1)"
-      returnKeyType="search"
-      role="searchbox"
-      selectionColor="rgba(103, 80, 164, 1)"
+  </View>
+  <TextInput
+    keyboardAppearance="light"
+    placeholder="Search"
+    placeholderTextColor="rgba(29, 27, 32, 1)"
+    returnKeyType="search"
+    role="searchbox"
+    selectionColor="rgba(103, 80, 164, 1)"
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flex": 1,
+          "fontSize": 18,
+          "minWidth": 0,
+          "paddingLeft": 8,
+        },
+        {
+          "color": "rgba(73, 69, 79, 1)",
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "letterSpacing": 0.5,
+          "lineHeight": 0,
+          "textAlign": "left",
+        },
+        {
+          "minHeight": 56,
+          "paddingLeft": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="search-bar"
+    underlineColorAndroid="transparent"
+    value=""
+  />
+  <View
+    pointerEvents="none"
+    style={
+      [
+        {
+          "marginLeft": 16,
+          "position": "absolute",
+          "right": 0,
+        },
+        false,
+      ]
+    }
+    testID="search-bar-icon-wrapper"
+  >
+    <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "stretch",
-            "flex": 1,
-            "fontSize": 18,
-            "minWidth": 0,
-            "paddingLeft": 8,
+            "margin": 6,
+            "overflow": "hidden",
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": "400",
-            "letterSpacing": 0.5,
-            "lineHeight": 0,
-            "textAlign": "left",
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
           },
           {
-            "minHeight": 56,
-            "paddingLeft": 0,
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
           },
           undefined,
         ]
       }
-      testID="search-bar"
-      underlineColorAndroid="transparent"
-      value=""
-    />
-    <View
-      pointerEvents="none"
-      style={
-        [
-          {
-            "marginLeft": 16,
-            "position": "absolute",
-            "right": 0,
-          },
-          false,
-        ]
-      }
-      testID="search-bar-icon-wrapper"
+      testID="search-bar-clear-icon-container"
     >
       <View
+        accessibilityLabel="clear"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
         collapsable={false}
-        style={
+        focusable={true}
+        hitSlop={
           {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 40,
-            "margin": 6,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 40,
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="search-bar-clear-icon-container-outer-layer"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="search-bar-clear-icon"
       >
         <View
-          collapsable={false}
           style={
             {
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(202, 196, 208, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "opacity": 1,
             }
           }
-          testID="search-bar-clear-icon-container"
         >
-          <View
-            accessibilityLabel="clear"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
-              {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               [
                 {
-                  "overflow": "hidden",
+                  "color": "rgba(255, 255, 255, 0)",
+                  "fontSize": 24,
                 },
                 [
                   {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
                   },
-                  undefined,
                 ],
               ]
             }
-            testID="search-bar-clear-icon"
           >
-            <View
-              style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "rgba(255, 255, 255, 0)",
-                      "fontSize": 24,
-                    },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                close
-              </Text>
-            </View>
-          </View>
+            close
+          </Text>
         </View>
       </View>
     </View>
@@ -789,29 +833,34 @@ exports[`renders with text 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(236, 230, 240, 1)",
-      "borderRadius": 28,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
-  }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+    [
+      {},
       {
         "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+      {},
+      {
         "backgroundColor": "rgba(236, 230, 240, 1)",
+      },
+      {
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": "continuous",
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 28,
-        "flex": undefined,
-        "flexDirection": "row",
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+      {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -819,18 +868,47 @@ exports[`renders with text 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
-      }
-    }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+      },
+    ]
+  }
+  testID="search-bar-container"
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {},
+        {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "height": 40,
-          "margin": 6,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -838,315 +916,293 @@ exports[`renders with text 1`] = `
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="search-bar-icon-container"
+  >
+    <View
+      accessibilityLabel="search"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
-      testID="search-bar-icon-container-outer-layer"
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="button"
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          [
+            {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="search-bar-icon"
     >
       <View
-        collapsable={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
-            "borderRadius": 20,
-            "borderWidth": 0,
-            "elevation": 0,
-            "flex": 1,
-            "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "opacity": 1,
           }
         }
-        testID="search-bar-icon-container"
       >
-        <View
-          accessibilityLabel="search"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          centered={true}
-          collapsable={false}
-          focusable={true}
-          hitSlop={
-            {
-              "bottom": 6,
-              "left": 6,
-              "right": 6,
-              "top": 6,
-            }
-          }
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          role="button"
+        <Text
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
           style={
             [
               {
-                "overflow": "hidden",
+                "color": "rgba(73, 69, 79, 1)",
+                "fontSize": 24,
               },
               [
                 {
-                  "alignItems": "center",
-                  "flexGrow": 1,
-                  "justifyContent": "center",
+                  "lineHeight": 24,
+                  "transform": [
+                    {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                {
+                  "backgroundColor": "transparent",
                 },
-                undefined,
               ],
             ]
           }
-          testID="search-bar-icon"
         >
-          <View
-            style={
-              {
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                ]
-              }
-            >
-              magnify
-            </Text>
-          </View>
-        </View>
+          magnify
+        </Text>
       </View>
     </View>
-    <TextInput
-      keyboardAppearance="light"
-      placeholder="Search"
-      placeholderTextColor="rgba(29, 27, 32, 1)"
-      returnKeyType="search"
-      role="searchbox"
-      selectionColor="rgba(103, 80, 164, 1)"
+  </View>
+  <TextInput
+    keyboardAppearance="light"
+    placeholder="Search"
+    placeholderTextColor="rgba(29, 27, 32, 1)"
+    returnKeyType="search"
+    role="searchbox"
+    selectionColor="rgba(103, 80, 164, 1)"
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flex": 1,
+          "fontSize": 18,
+          "minWidth": 0,
+          "paddingLeft": 8,
+        },
+        {
+          "color": "rgba(73, 69, 79, 1)",
+          "fontFamily": "System",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "letterSpacing": 0.5,
+          "lineHeight": 0,
+          "textAlign": "left",
+        },
+        {
+          "minHeight": 56,
+          "paddingLeft": 0,
+        },
+        undefined,
+      ]
+    }
+    testID="search-bar"
+    underlineColorAndroid="transparent"
+    value="query"
+  />
+  <View
+    pointerEvents="auto"
+    style={
+      [
+        false,
+        false,
+      ]
+    }
+    testID="search-bar-icon-wrapper"
+  >
+    <View
+      collapsable={false}
       style={
         [
           {
-            "alignSelf": "stretch",
-            "flex": 1,
-            "fontSize": 18,
-            "minWidth": 0,
-            "paddingLeft": 8,
+            "margin": 6,
+            "overflow": "hidden",
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
-            "fontFamily": "System",
-            "fontSize": 16,
-            "fontWeight": "400",
-            "letterSpacing": 0.5,
-            "lineHeight": 0,
-            "textAlign": "left",
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
           },
           {
-            "minHeight": 56,
-            "paddingLeft": 0,
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
           },
           undefined,
         ]
       }
-      testID="search-bar"
-      underlineColorAndroid="transparent"
-      value="query"
-    />
-    <View
-      pointerEvents="auto"
-      style={
-        [
-          false,
-          false,
-        ]
-      }
-      testID="search-bar-icon-wrapper"
+      testID="search-bar-clear-icon-container"
     >
       <View
+        accessibilityLabel="clear"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        centered={true}
         collapsable={false}
-        style={
+        focusable={true}
+        hitSlop={
           {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 40,
-            "margin": 6,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 40,
+            "bottom": 6,
+            "left": 6,
+            "right": 6,
+            "top": 6,
           }
         }
-        testID="search-bar-clear-icon-container-outer-layer"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        role="button"
+        style={
+          [
+            {
+              "overflow": "hidden",
+            },
+            [
+              {
+                "alignItems": "center",
+                "flexGrow": 1,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="search-bar-clear-icon"
       >
         <View
-          collapsable={false}
           style={
             {
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(202, 196, 208, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "opacity": 1,
             }
           }
-          testID="search-bar-clear-icon-container"
         >
-          <View
-            accessibilityLabel="clear"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
-              {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               [
                 {
-                  "overflow": "hidden",
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
                 },
                 [
                   {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
                   },
-                  undefined,
                 ],
               ]
             }
-            testID="search-bar-clear-icon"
           >
-            <View
-              style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "rgba(73, 69, 79, 1)",
-                      "fontSize": 24,
-                    },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                close
-              </Text>
-            </View>
-          </View>
+            close
+          </Text>
         </View>
       </View>
     </View>
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index 76d4857c89..095b214bb2 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -21,69 +21,122 @@ exports[`renders snackbar with Text as a child 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
-        },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
-          {
-            "scale": 0.9,
-          },
-        ],
-      }
-    }
-    testID="surface-outer-layer"
-  >
-    <View
-      aria-live="polite"
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
+      [
+        {},
         {
-          "backgroundColor": "rgba(50, 47, 53, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
           "flexDirection": "row",
           "justifyContent": "space-between",
+          "margin": 8,
           "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
-            "height": 0,
+            "height": 1.66,
             "width": 0,
           },
-          "shadowOpacity": 0.039,
-          "shadowRadius": 0.75,
-        }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "flex": 1,
+            "marginHorizontal": 16,
+            "marginVertical": 14,
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "marginHorizontal": 16,
-              "marginVertical": 14,
-            },
-            undefined,
-          ]
-        }
-      >
-        <View>
-          <Text>
-            Snackbar content
-          </Text>
-        </View>
+      <View>
+        <Text>
+          Snackbar content
+        </Text>
       </View>
     </View>
   </View>
@@ -109,94 +162,147 @@ exports[`renders snackbar with View & Text as a child 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
-        },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
-          {
-            "scale": 0.9,
-          },
-        ],
-      }
-    }
-    testID="surface-outer-layer"
-  >
-    <View
-      aria-live="polite"
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
+      [
+        {},
         {
-          "backgroundColor": "rgba(50, 47, 53, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
           "flexDirection": "row",
           "justifyContent": "space-between",
+          "margin": 8,
           "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
-            "height": 0,
+            "height": 1.66,
             "width": 0,
           },
-          "shadowOpacity": 0.039,
-          "shadowRadius": 0.75,
-        }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "flex": 1,
+            "marginHorizontal": 16,
+            "marginVertical": 14,
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
-      <View
-        style={
-          [
+      <View>
+        <View
+          style={
             {
-              "flex": 1,
-              "marginHorizontal": 16,
-              "marginVertical": 14,
-            },
-            undefined,
-          ]
-        }
-      >
-        <View>
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
           <View
             style={
               {
-                "alignItems": "center",
-                "flexDirection": "row",
+                "backgroundColor": "#ef9a9a",
+                "padding": 15,
               }
             }
-          >
-            <View
-              style={
-                {
-                  "backgroundColor": "#ef9a9a",
-                  "padding": 15,
-                }
-              }
-            />
-            <Text
-              style={
-                {
-                  "color": "#ffffff",
-                  "flexShrink": 1,
-                  "flexWrap": "wrap",
-                  "marginLeft": 10,
-                }
+          />
+          <Text
+            style={
+              {
+                "color": "#ffffff",
+                "flexShrink": 1,
+                "flexWrap": "wrap",
+                "marginLeft": 10,
               }
-            >
-              Error Message which is veryyyyyyyyyyyy longggggggg Error Message which is veryyyyyyyyyyyy longggggggg
-            </Text>
-          </View>
+            }
+          >
+            Error Message which is veryyyyyyyyyyyy longggggggg Error Message which is veryyyyyyyyyyyy longggggggg
+          </Text>
         </View>
       </View>
     </View>
@@ -223,109 +329,195 @@ exports[`renders snackbar with action button 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
-        },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
-          {
-            "scale": 0.9,
-          },
-        ],
-      }
-    }
-    testID="surface-outer-layer"
-  >
-    <View
-      aria-live="polite"
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
+      [
+        {},
         {
-          "backgroundColor": "rgba(50, 47, 53, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
           "flexDirection": "row",
           "justifyContent": "space-between",
+          "margin": 8,
           "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
-            "height": 0,
+            "height": 1.66,
             "width": 0,
           },
-          "shadowOpacity": 0.039,
-          "shadowRadius": 0.75,
-        }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
       }
-      testID="surface"
-    >
-      <Text
-        style={
+    />
+    <Text
+      style={
+        [
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
           [
             {
-              "textAlign": "left",
-            },
-            {
-              "color": "rgba(29, 27, 32, 1)",
-              "writingDirection": "ltr",
+              "fontFamily": "System",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0.25,
+              "lineHeight": 20,
             },
             [
               {
-                "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "flex": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 14,
+              },
+              {
+                "color": "rgba(245, 239, 247, 1)",
               },
-              [
-                {
-                  "flex": 1,
-                  "marginHorizontal": 16,
-                  "marginVertical": 14,
-                },
-                {
-                  "color": "rgba(245, 239, 247, 1)",
-                },
-              ],
             ],
-          ]
-        }
-      >
-        Snackbar content
-      </Text>
+          ],
+        ]
+      }
+    >
+      Snackbar content
+    </Text>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "minHeight": 48,
+          },
+          {
+            "marginLeft": -12,
+          },
+        ]
+      }
+    >
       <View
+        collapsable={false}
         style={
           [
+            {},
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "minHeight": 48,
+              "borderStyle": "solid",
+              "minWidth": 64,
             },
+            false,
             {
-              "marginLeft": -12,
+              "borderColor": "transparent",
+              "borderWidth": 0,
             },
-          ]
-        }
-      >
-        <View
-          collapsable={false}
-          style={
             {
-              "backgroundColor": "transparent",
-              "borderRadius": 20,
               "marginLeft": 4,
               "marginRight": 8,
+            },
+            undefined,
+            {},
+            {
+              "backgroundColor": "transparent",
+            },
+            {
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": "continuous",
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+            {
               "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
@@ -333,21 +525,47 @@ exports[`renders snackbar with action button 1`] = `
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
-            }
-          }
-          testID="button-container-outer-layer"
-        >
-          <View
-            collapsable={false}
-            style={
+            },
+          ]
+        }
+        testID="button-container"
+      >
+        <View
+          collapsable={false}
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {},
               {
                 "backgroundColor": "transparent",
-                "borderColor": "transparent",
+              },
+              {
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": "continuous",
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
-                "borderStyle": "solid",
-                "borderWidth": 0,
-                "flex": undefined,
-                "minWidth": 64,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+              {
                 "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
@@ -355,118 +573,116 @@ exports[`renders snackbar with action button 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
             }
-            testID="button-container"
-          >
-            <View
-              accessibilityState={
+          }
+          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]}
+          role="button"
+          style={
+            [
+              {
+                "overflow": "hidden",
+              },
+              {
+                "borderRadius": 20,
+              },
+            ]
+          }
+          testID="button"
+        >
+          <View
+            style={
+              [
                 {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": false,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                },
                 {
-                  "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]}
-              role="button"
+                  "opacity": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              numberOfLines={1}
+              selectable={false}
               style={
                 [
                   {
-                    "overflow": "hidden",
+                    "textAlign": "left",
                   },
                   {
-                    "borderRadius": 20,
+                    "color": "rgba(29, 27, 32, 1)",
+                    "writingDirection": "ltr",
                   },
-                ]
-              }
-              testID="button"
-            >
-              <View
-                style={
                   [
                     {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                    },
-                    {
-                      "opacity": 1,
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
                     },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  numberOfLines={1}
-                  selectable={false}
-                  style={
                     [
                       {
-                        "textAlign": "left",
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
                       },
                       {
-                        "color": "rgba(29, 27, 32, 1)",
-                        "writingDirection": "ltr",
+                        "marginHorizontal": 12,
                       },
-                      [
-                        {
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        [
-                          {
-                            "marginHorizontal": 16,
-                            "marginVertical": 9,
-                            "textAlign": "center",
-                          },
-                          {
-                            "marginHorizontal": 12,
-                          },
-                          false,
-                          false,
-                          {
-                            "color": "rgba(208, 188, 255, 1)",
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          undefined,
-                        ],
-                      ],
-                    ]
-                  }
-                  testID="button-text"
-                >
-                  Undo
-                </Text>
-              </View>
-            </View>
+                      false,
+                      false,
+                      {
+                        "color": "rgba(208, 188, 255, 1)",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
+                      },
+                      undefined,
+                    ],
+                  ],
+                ]
+              }
+              testID="button-text"
+            >
+              Undo
+            </Text>
           </View>
         </View>
       </View>
@@ -494,87 +710,140 @@ exports[`renders snackbar with content 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
     style={
-      {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
-        },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
-          {
-            "scale": 0.9,
-          },
-        ],
-      }
-    }
-    testID="surface-outer-layer"
-  >
-    <View
-      aria-live="polite"
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
+      [
+        {},
         {
-          "backgroundColor": "rgba(50, 47, 53, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
           "flexDirection": "row",
           "justifyContent": "space-between",
+          "margin": 8,
           "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {},
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+        },
+        {
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": "continuous",
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+        {
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
-            "height": 0,
+            "height": 1.66,
             "width": 0,
           },
-          "shadowOpacity": 0.039,
-          "shadowRadius": 0.75,
-        }
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {},
+          {},
+          {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+          },
+          {
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": "continuous",
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
       }
-      testID="surface"
-    >
-      <Text
-        style={
+    />
+    <Text
+      style={
+        [
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
           [
             {
-              "textAlign": "left",
-            },
-            {
-              "color": "rgba(29, 27, 32, 1)",
-              "writingDirection": "ltr",
+              "fontFamily": "System",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0.25,
+              "lineHeight": 20,
             },
             [
               {
-                "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "flex": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 14,
+              },
+              {
+                "color": "rgba(245, 239, 247, 1)",
               },
-              [
-                {
-                  "flex": 1,
-                  "marginHorizontal": 16,
-                  "marginVertical": 14,
-                },
-                {
-                  "color": "rgba(245, 239, 247, 1)",
-                },
-              ],
             ],
-          ]
-        }
-      >
-        Snackbar content
-      </Text>
-    </View>
+          ],
+        ]
+      }
+    >
+      Snackbar content
+    </Text>
   </View>
 </View>
 `;
diff --git a/src/components/__tests__/__snapshots__/Switch.test.tsx.snap b/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
index 3589a26ee9..e38a5145e1 100644
--- a/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -96,6 +96,7 @@ exports[`Switch render renders disabled off 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -124,6 +125,7 @@ exports[`Switch render renders disabled off 1`] = `
     }
   />
   <View
+    collapsable={false}
     style={
       [
         {
@@ -166,6 +168,7 @@ exports[`Switch render renders disabled off 1`] = `
       }
     />
     <View
+      collapsable={false}
       style={
         [
           {
@@ -187,6 +190,7 @@ exports[`Switch render renders disabled off 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -287,6 +291,7 @@ exports[`Switch render renders disabled on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -315,6 +320,7 @@ exports[`Switch render renders disabled on 1`] = `
     }
   />
   <View
+    collapsable={false}
     style={
       [
         {
@@ -357,6 +363,7 @@ exports[`Switch render renders disabled on 1`] = `
       }
     />
     <View
+      collapsable={false}
       style={
         [
           {
@@ -378,6 +385,7 @@ exports[`Switch render renders disabled on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -498,6 +506,7 @@ exports[`Switch render renders off 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -526,6 +535,7 @@ exports[`Switch render renders off 1`] = `
     }
   />
   <View
+    collapsable={false}
     style={
       [
         {
@@ -551,6 +561,7 @@ exports[`Switch render renders off 1`] = `
     }
   >
     <View
+      collapsable={false}
       style={
         [
           {
@@ -572,6 +583,7 @@ exports[`Switch render renders off 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -672,6 +684,7 @@ exports[`Switch render renders on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -700,6 +713,7 @@ exports[`Switch render renders on 1`] = `
     }
   />
   <View
+    collapsable={false}
     style={
       [
         {
@@ -725,6 +739,7 @@ exports[`Switch render renders on 1`] = `
     }
   >
     <View
+      collapsable={false}
       style={
         [
           {
@@ -746,6 +761,7 @@ exports[`Switch render renders on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -846,6 +862,7 @@ exports[`Switch render renders with checked icon 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -874,6 +891,7 @@ exports[`Switch render renders with checked icon 1`] = `
     }
   />
   <View
+    collapsable={false}
     style={
       [
         {
@@ -899,6 +917,7 @@ exports[`Switch render renders with checked icon 1`] = `
     }
   >
     <View
+      collapsable={false}
       style={
         [
           {
@@ -920,6 +939,7 @@ exports[`Switch render renders with checked icon 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -990,6 +1010,7 @@ exports[`Switch render renders with checked icon 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1090,6 +1111,7 @@ exports[`Switch render renders with per-state icons 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1118,6 +1140,7 @@ exports[`Switch render renders with per-state icons 1`] = `
     }
   />
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1143,6 +1166,7 @@ exports[`Switch render renders with per-state icons 1`] = `
     }
   >
     <View
+      collapsable={false}
       style={
         [
           {
@@ -1164,6 +1188,7 @@ exports[`Switch render renders with per-state icons 1`] = `
     />
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
@@ -1234,6 +1259,7 @@ exports[`Switch render renders with per-state icons 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
     style={
       [
         {
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index c955c943e2..9a4edcd5c1 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -70,6 +70,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
       }
     />
     <View
+      collapsable={false}
       style={
         [
           {
@@ -96,6 +97,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
     />
     <View
       aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
@@ -106,12 +108,13 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
             "left": 52,
           },
           {
-            "top": undefined,
+            "top": 16,
           },
         ]
       }
     >
       <Text
+        collapsable={false}
         style={
           [
             {
@@ -124,7 +127,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -144,160 +147,146 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginStart": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "#49454F",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "#49454F",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                magnify
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+            >
+              magnify
+            </Text>
           </View>
         </View>
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
-          [
-            {
-              "alignItems": "flex-end",
-              "flex": 1,
-              "flexDirection": "row",
-              "paddingHorizontal": 16,
-            },
-            false,
-          ],
+          {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -349,144 +338,131 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginEnd": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "#49454F",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "#49454F",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                close
-              </Text>
-            </View>
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
           </View>
         </View>
       </View>
@@ -572,6 +548,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
       }
     />
     <View
+      collapsable={false}
       style={
         [
           {
@@ -598,6 +575,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
     />
     <View
       aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
@@ -608,12 +586,13 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
             "left": 52,
           },
           {
-            "top": undefined,
+            "top": 16,
           },
         ]
       }
     >
       <Text
+        collapsable={false}
         style={
           [
             {
@@ -626,7 +605,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
               "color": "rgba(179, 38, 30, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -646,160 +625,146 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginStart": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "rgba(179, 38, 30, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                magnify
-              </Text>
-            </View>
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              magnify
+            </Text>
           </View>
         </View>
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
-          [
-            {
-              "alignItems": "flex-end",
-              "flex": 1,
-              "flexDirection": "row",
-              "paddingHorizontal": 16,
-            },
-            false,
-          ],
+          {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -851,144 +816,131 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginEnd": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "rgba(179, 38, 30, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                close
-              </Text>
-            </View>
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
           </View>
         </View>
       </View>
@@ -1074,6 +1026,7 @@ exports[`renders filled TextInput with label and value 1`] = `
       }
     />
     <View
+      collapsable={false}
       style={
         [
           {
@@ -1100,6 +1053,7 @@ exports[`renders filled TextInput with label and value 1`] = `
     />
     <View
       aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
@@ -1110,12 +1064,13 @@ exports[`renders filled TextInput with label and value 1`] = `
             "left": 16,
           },
           {
-            "top": undefined,
+            "top": 16,
           },
         ]
       }
     >
       <Text
+        collapsable={false}
         style={
           [
             {
@@ -1128,7 +1083,7 @@ exports[`renders filled TextInput with label and value 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -1138,17 +1093,16 @@ exports[`renders filled TextInput with label and value 1`] = `
       </Text>
     </View>
     <View
+      collapsable={false}
       style={
         [
-          [
-            {
-              "alignItems": "flex-end",
-              "flex": 1,
-              "flexDirection": "row",
-              "paddingHorizontal": 16,
-            },
-            false,
-          ],
+          {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -1270,6 +1224,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
     />
     <View
       aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
@@ -1282,10 +1237,10 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
             "left": 48,
           },
           {
-            "top": undefined,
+            "top": -12,
             "transform": [
               {
-                "translateX": undefined,
+                "translateX": -36,
               },
             ],
           },
@@ -1293,6 +1248,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
       }
     >
       <Text
+        collapsable={false}
         style={
           [
             {
@@ -1305,7 +1261,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -1325,160 +1281,146 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginStart": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "#49454F",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "#49454F",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                magnify
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+            >
+              magnify
+            </Text>
           </View>
         </View>
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
-          [
-            {
-              "alignItems": "center",
-              "flex": 1,
-              "flexDirection": "row",
-              "paddingHorizontal": 16,
-            },
-            false,
-          ],
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -1530,144 +1472,131 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginEnd": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "#49454F",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "#49454F",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                close
-              </Text>
-            </View>
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
           </View>
         </View>
       </View>
@@ -1753,6 +1682,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
     />
     <View
       aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
@@ -1765,10 +1695,10 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
             "left": 48,
           },
           {
-            "top": undefined,
+            "top": -12,
             "transform": [
               {
-                "translateX": undefined,
+                "translateX": -36,
               },
             ],
           },
@@ -1776,6 +1706,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
       }
     >
       <Text
+        collapsable={false}
         style={
           [
             {
@@ -1788,7 +1719,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
               "color": "rgba(179, 38, 30, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -1808,160 +1739,146 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginStart": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "rgba(179, 38, 30, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                magnify
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+            >
+              magnify
+            </Text>
           </View>
         </View>
       </View>
     </View>
     <View
+      collapsable={false}
       style={
         [
-          [
-            {
-              "alignItems": "center",
-              "flex": 1,
-              "flexDirection": "row",
-              "paddingHorizontal": 16,
-            },
-            false,
-          ],
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -2013,144 +1930,131 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
       <View
         collapsable={false}
         style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "height": 24,
-            "margin": 0,
-            "marginEnd": 12,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-            "width": 24,
-          }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
               "borderColor": "rgba(202, 196, 208, 1)",
               "borderRadius": 20,
               "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
               "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "marginEnd": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessible={true}
-            centered={true}
-            collapsable={false}
-            focusable={true}
-            hitSlop={
+          }
+          multiline={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          role="button"
+          style={
+            [
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
-              }
-            }
-            multiline={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            role="button"
-            style={
+                "overflow": "hidden",
+              },
               [
                 {
-                  "overflow": "hidden",
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
                 },
-                [
-                  {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ],
-              ]
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <View
+            style={
+              {
+                "opacity": 1,
+              }
             }
-            testID="icon-button"
           >
-            <View
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                {
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                [
+                  {
+                    "color": "rgba(179, 38, 30, 1)",
+                    "fontSize": 24,
+                  },
                   [
                     {
-                      "color": "rgba(179, 38, 30, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                close
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
           </View>
         </View>
       </View>
@@ -2236,6 +2140,7 @@ exports[`renders outlined TextInput with label and value 1`] = `
     />
     <View
       aria-hidden={true}
+      collapsable={false}
       style={
         [
           {
@@ -2248,10 +2153,10 @@ exports[`renders outlined TextInput with label and value 1`] = `
             "left": 16,
           },
           {
-            "top": undefined,
+            "top": -12,
             "transform": [
               {
-                "translateX": undefined,
+                "translateX": -4,
               },
             ],
           },
@@ -2259,6 +2164,7 @@ exports[`renders outlined TextInput with label and value 1`] = `
       }
     >
       <Text
+        collapsable={false}
         style={
           [
             {
@@ -2271,7 +2177,7 @@ exports[`renders outlined TextInput with label and value 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -2281,17 +2187,16 @@ exports[`renders outlined TextInput with label and value 1`] = `
       </Text>
     </View>
     <View
+      collapsable={false}
       style={
         [
-          [
-            {
-              "alignItems": "center",
-              "flex": 1,
-              "flexDirection": "row",
-              "paddingHorizontal": 16,
-            },
-            false,
-          ],
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index 63257435ed..07f5de55eb 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -4,137 +4,127 @@ exports[`renders disabled toggle button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(230, 224, 233, 1)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+      },
+      {
+        "height": 42,
+        "margin": 0,
+        "width": 42,
+      },
+      {
+        "backgroundColor": "rgba(230, 224, 233, 1)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 4,
+      },
+      undefined,
+    ]
   }
-  testID="icon-button-container-outer-layer"
+  testID="icon-button-container"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    centered={true}
     collapsable={false}
-    style={
+    focusable={true}
+    hitSlop={
       {
-        "backgroundColor": "rgba(230, 224, 233, 1)",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
     }
-    testID="icon-button-container"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        false,
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
   >
     <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": true,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+      style={
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
+          "opacity": 0.38,
         }
       }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
-        [
-          false,
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
           [
             {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
+              "color": "rgba(29, 27, 32, 1)",
+              "fontSize": 24,
             },
-            undefined,
-          ],
-        ]
-      }
-      testID="icon-button"
-    >
-      <View
-        style={
-          {
-            "opacity": 0.38,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
             [
               {
-                "color": "rgba(29, 27, 32, 1)",
-                "fontSize": 24,
+                "lineHeight": 24,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "transparent",
               },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          heart
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        heart
+      </Text>
     </View>
   </View>
 </View>
@@ -144,137 +134,127 @@ exports[`renders toggle button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(230, 224, 233, 1)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+      },
+      {
+        "height": 42,
+        "margin": 0,
+        "width": 42,
+      },
+      {
+        "backgroundColor": "rgba(230, 224, 233, 1)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 4,
+      },
+      undefined,
+    ]
   }
-  testID="icon-button-container-outer-layer"
+  testID="icon-button-container"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": true,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    centered={true}
     collapsable={false}
-    style={
+    focusable={true}
+    hitSlop={
       {
-        "backgroundColor": "rgba(230, 224, 233, 1)",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
     }
-    testID="icon-button-container"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        false,
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
   >
     <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": false,
-          "expanded": undefined,
-          "selected": true,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+      style={
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
+          "opacity": 1,
         }
       }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
-        [
-          false,
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
           [
             {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 24,
             },
-            undefined,
-          ],
-        ]
-      }
-      testID="icon-button"
-    >
-      <View
-        style={
-          {
-            "opacity": 1,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
             [
               {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontSize": 24,
+                "lineHeight": 24,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
               },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          heart
-        </Text>
-      </View>
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        heart
+      </Text>
     </View>
   </View>
 </View>
@@ -284,137 +264,127 @@ exports[`renders unchecked toggle button 1`] = `
 <View
   collapsable={false}
   style={
-    {
-      "backgroundColor": "rgba(243, 237, 247, 1)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
-    }
+      {
+        "backgroundColor": undefined,
+        "height": 40,
+        "width": 40,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+      },
+      {
+        "height": 42,
+        "margin": 0,
+        "width": 42,
+      },
+      {
+        "backgroundColor": "rgba(243, 237, 247, 1)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 4,
+      },
+      undefined,
+    ]
   }
-  testID="icon-button-container-outer-layer"
+  testID="icon-button-container"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    centered={true}
     collapsable={false}
-    style={
+    focusable={true}
+    hitSlop={
       {
-        "backgroundColor": "rgba(243, 237, 247, 1)",
-        "borderColor": "rgba(121, 116, 126, 1)",
-        "borderRadius": 4,
-        "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
-        "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+        "bottom": 6,
+        "left": 6,
+        "right": 6,
+        "top": 6,
       }
     }
-    testID="icon-button-container"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      [
+        false,
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
   >
     <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      centered={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
+      style={
         {
-          "bottom": 6,
-          "left": 6,
-          "right": 6,
-          "top": 6,
+          "opacity": 0.38,
         }
       }
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      role="button"
-      style={
-        [
-          false,
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
+        style={
           [
             {
-              "alignItems": "center",
-              "flexGrow": 1,
-              "justifyContent": "center",
+              "color": "rgba(29, 27, 32, 1)",
+              "fontSize": 24,
             },
-            undefined,
-          ],
-        ]
-      }
-      testID="icon-button"
-    >
-      <View
-        style={
-          {
-            "opacity": 0.38,
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
             [
               {
-                "color": "rgba(29, 27, 32, 1)",
-                "fontSize": 24,
+                "lineHeight": 24,
+                "transform": [
+                  {
+                    "scaleX": 1,
+                  },
+                ],
               },
-              [
-                {
-                  "lineHeight": 24,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          heart
-        </Text>
-      </View>
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        heart
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/theme/tokens/sys/elevation.ts b/src/theme/tokens/sys/elevation.ts
index 18e92dcb63..9a1181ecbe 100644
--- a/src/theme/tokens/sys/elevation.ts
+++ b/src/theme/tokens/sys/elevation.ts
@@ -1,34 +1,11 @@
 // M3 elevation tokens and shadow builder per spec:
 // https://m3.material.io/styles/elevation/tokens
 
-import {
-  Animated,
-  Platform,
-  type ColorValue,
-  type ViewStyle,
-  type Animated as AnimatedNS,
-} from 'react-native';
+import { Platform, type ColorValue, type ViewStyle } from 'react-native';
 
 import color from 'color';
 
-import { isAnimatedValue } from '../../../utils/animations';
-import type { Elevation, ThemeElevation } from '../../types';
-
-type AnimatedNativeShadowStyle = {
-  shadowColor: ColorValue;
-  shadowOffset: {
-    width: AnimatedNS.Value;
-    height: AnimatedNS.AnimatedInterpolation<number>;
-  };
-  shadowOpacity: AnimatedNS.AnimatedInterpolation<number>;
-  shadowRadius: AnimatedNS.AnimatedInterpolation<number>;
-};
-
-type AnimatedBoxShadowStyle = {
-  boxShadow: AnimatedNS.AnimatedInterpolation<string | number>;
-};
-
-type AnimatedShadowStyle = AnimatedNativeShadowStyle | AnimatedBoxShadowStyle;
+import type { ThemeElevation } from '../../types';
 
 export const defaultElevation: ThemeElevation = {
   level0: 0,
@@ -39,8 +16,6 @@ export const defaultElevation: ThemeElevation = {
   level5: 5,
 };
 
-export const elevationInputRange: Elevation[] = Object.values(defaultElevation);
-
 export const androidElevationLevels = [0, 1, 3, 6, 8, 12];
 
 /**
@@ -110,7 +85,7 @@ const IOS_SHADOW_RADIUS_FACTOR = 0.5;
 const getShadowRadius = (blurRadius: number[]) =>
   blurRadius.map((radius) => round(radius * IOS_SHADOW_RADIUS_FACTOR));
 
-export const shadowLayers = [
+const shadowLayers = [
   {
     height: androidElevationLevels.map((dp) =>
       round(
@@ -130,94 +105,58 @@ export const shadowLayers = [
   },
 ];
 
-const getShadowColor = (shadowColor: ColorValue, shadowOpacity: number) => {
-  if (typeof shadowColor !== 'string') {
-    throw new Error(
-      `Expected a string shadow color on Web, but received a ${typeof shadowColor}.`
-    );
-  }
-
-  return color(shadowColor).alpha(shadowOpacity).rgb().string();
+type NativeShadowStyle = {
+  shadowColor: ColorValue;
+  shadowOpacity: number;
+  shadowOffset: {
+    width: number;
+    height: number;
+  };
+  shadowRadius: number;
 };
 
-const getBoxShadowValue = (elevation: number, layerColors: readonly string[]) =>
-  shadowLayers
-    .map(
-      (layer, index) =>
-        `0px ${layer.height[elevation]}px ${layer.blurRadius[elevation]}px ${layerColors[index]}`
-    )
-    .join(', ');
+type ShadowStyle =
+  | NativeShadowStyle
+  | { boxShadow: NonNullable<ViewStyle['boxShadow']> };
 
-export function shadow(elevation: number, shadowColor: ColorValue): ViewStyle;
-// eslint-disable-next-line no-redeclare
 export function shadow(
-  elevation: Animated.Value,
+  elevation: number,
   shadowColor: ColorValue
-): AnimatedShadowStyle;
-// eslint-disable-next-line no-redeclare
-export function shadow(
-  elevation: number | Animated.Value,
-  shadowColor: ColorValue
-): ViewStyle | AnimatedShadowStyle;
-// eslint-disable-next-line no-redeclare
-export function shadow(
-  elevation: number | Animated.Value = 0,
-  shadowColor: ColorValue
-): ViewStyle | AnimatedShadowStyle {
+): [ShadowStyle, NativeShadowStyle | undefined] {
   if (Platform.OS === 'web') {
-    const layerColors = shadowLayers.map((layer) =>
-      getShadowColor(shadowColor, layer.shadowOpacity)
-    );
-
-    if (isAnimatedValue(elevation)) {
-      return {
-        boxShadow: elevation.interpolate({
-          inputRange: elevationInputRange,
-          outputRange: elevationInputRange.map((value) =>
-            getBoxShadowValue(value, layerColors)
-          ),
-        }),
-      };
+    if (typeof shadowColor !== 'string') {
+      throw new Error(
+        `Expected a string shadow color on Web, but received a ${typeof shadowColor}.`
+      );
     }
 
-    return {
-      boxShadow: getBoxShadowValue(elevation, layerColors),
-    };
-  }
-
-  // For a single view, we can only draw one shadow
-  // So we pick the spot shadow, as it shows the depth
-  const [spotShadow] = shadowLayers;
-
-  if (isAnimatedValue(elevation)) {
-    return {
-      shadowColor,
-      shadowOffset: {
-        width: new Animated.Value(0),
-        height: elevation.interpolate({
-          inputRange: elevationInputRange,
-          outputRange: spotShadow.height,
-        }),
+    return [
+      {
+        boxShadow: shadowLayers
+          .map(
+            (layer) =>
+              `0px ${layer.height[elevation]}px ${layer.blurRadius[elevation]}px ${color(
+                shadowColor
+              )
+                .alpha(layer.shadowOpacity)
+                .rgb()
+                .string()}`
+          )
+          .join(', '),
       },
-      shadowOpacity: elevation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, spotShadow.shadowOpacity],
-        extrapolate: 'clamp',
-      }),
-      shadowRadius: elevation.interpolate({
-        inputRange: elevationInputRange,
-        outputRange: spotShadow.shadowRadius,
-      }),
-    };
+      undefined,
+    ];
   }
 
-  return {
+  const [spotShadow, ambientShadow] = shadowLayers.map((layer) => ({
     shadowColor,
-    shadowOpacity: elevation ? spotShadow.shadowOpacity : 0,
+    shadowOpacity: elevation ? layer.shadowOpacity : 0,
     shadowOffset: {
       width: 0,
-      height: spotShadow.height[elevation],
+      height: layer.height[elevation],
     },
-    shadowRadius: spotShadow.shadowRadius[elevation],
-  };
+    shadowRadius: layer.shadowRadius[elevation],
+  }));
+
+  return [spotShadow, ambientShadow];
 }
diff --git a/src/utils/animations.ts b/src/utils/animations.ts
deleted file mode 100644
index 7af142bbf3..0000000000
--- a/src/utils/animations.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Animated } from 'react-native';
-
-export const isAnimatedValue = (
-  it: number | string | Animated.AnimatedInterpolation<number | string>
-): it is Animated.Value => it instanceof Animated.Value;