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..37ac687703 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,123 @@ 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>
 
@@ -92,6 +204,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..d2661c8dec 100644
--- a/docs/6.x/docs/guides/migration.md
+++ b/docs/6.x/docs/guides/migration.md
@@ -4,8 +4,158 @@ 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 components no longer support overriding their background color or border radius with the `style` prop:
+
+- `Banner`
+- `Button`
+- `Card`
+- `Chip`
+- `Dialog`
+- `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.
+
+### Surface
+
+- The `elevation` prop no longer accepts a React Native `Animated.Value`. Any `elevation` changes are animated automatically.
+- The `style` prop no longer configures background and border radius. We have added new props for these:
+  - `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 border radius. 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..b322a31882 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,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "ViewStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<ViewStyle>"
             },
             "description": ""
           }
@@ -304,19 +302,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 +414,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 +692,13 @@
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
-                  "elements": [
-                    {
-                      "name": "ViewStyle"
-                    }
-                  ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "name": "ViewStyle"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<ViewStyle>"
             },
             "description": ""
           },
@@ -1032,10 +1024,16 @@
               "name": "StyleProp",
               "elements": [
                 {
-                  "name": "TextStyle"
+                  "name": "AnimatedStyle",
+                  "elements": [
+                    {
+                      "name": "TextStyle"
+                    }
+                  ],
+                  "raw": "AnimatedStyle<TextStyle>"
                 }
               ],
-              "raw": "StyleProp<TextStyle>"
+              "raw": "StyleProp<AnimatedStyle<TextStyle>>"
             },
             "description": ""
           },
@@ -1148,7 +1146,7 @@
             "required": false,
             "tsType": {
               "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+              "raw": "0 | 1 | 2 | 3 | 4 | 5",
               "elements": [
                 {
                   "name": "literal",
@@ -1173,9 +1171,6 @@
                 {
                   "name": "literal",
                   "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
                 }
               ]
             },
@@ -1195,19 +1190,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": ""
           },
@@ -1234,7 +1229,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 +1268,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 +3277,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": ""
           },
@@ -3450,7 +3501,7 @@
             "required": false,
             "tsType": {
               "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+              "raw": "0 | 1 | 2 | 3 | 4 | 5",
               "elements": [
                 {
                   "name": "literal",
@@ -3475,9 +3526,6 @@
                 {
                   "name": "literal",
                   "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
                 }
               ]
             },
@@ -3503,19 +3551,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": ""
           },
@@ -3543,6 +3591,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 +4651,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": ""
           },
@@ -4646,6 +4707,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 +5347,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": ""
           },
@@ -6124,10 +6198,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 +6419,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 +8015,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 +9145,19 @@
           "contentStyle": {
             "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": "Style of menu's inner content."
           },
@@ -9375,10 +9461,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 +9543,68 @@
           "contentContainerStyle": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "AnimatedStyle",
                   "elements": [
                     {
-                      "name": "ViewStyle"
+                      "name": "Omit",
+                      "elements": [
+                        {
+                          "name": "ViewStyle"
+                        },
+                        {
+                          "name": "union",
+                          "raw": "'backgroundColor' | 'borderRadius'",
+                          "elements": [
+                            {
+                              "name": "literal",
+                              "value": "'backgroundColor'"
+                            },
+                            {
+                              "name": "literal",
+                              "value": "'borderRadius'"
+                            }
+                          ]
+                        }
+                      ],
+                      "raw": "Omit<ViewStyle, 'backgroundColor' | 'borderRadius'>"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "AnimatedStyle<Omit<ViewStyle, 'backgroundColor' | 'borderRadius'>>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<\n  AnimatedStyle<Omit<ViewStyle, 'backgroundColor' | 'borderRadius'>>\n>"
+            },
+            "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": "Style for the content of the modal"
+            "description": "Elevation level of the modal content. Defaults to level 1."
           },
           "style": {
             "required": false,
@@ -10547,7 +10680,7 @@
             "required": false,
             "tsType": {
               "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+              "raw": "0 | 1 | 2 | 3 | 4 | 5",
               "elements": [
                 {
                   "name": "literal",
@@ -10572,9 +10705,6 @@
                 {
                   "name": "literal",
                   "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
                 }
               ]
             },
@@ -10600,19 +10730,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": ""
           },
@@ -11019,7 +11149,7 @@
             "required": false,
             "tsType": {
               "name": "union",
-              "raw": "0 | 1 | 2 | 3 | 4 | 5 | Animated.Value",
+              "raw": "0 | 1 | 2 | 3 | 4 | 5",
               "elements": [
                 {
                   "name": "literal",
@@ -11044,9 +11174,6 @@
                 {
                   "name": "literal",
                   "value": "5"
-                },
-                {
-                  "name": "Animated.Value"
                 }
               ]
             },
@@ -11092,19 +11219,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": ""
           },
@@ -11145,54 +11272,166 @@
     "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": "Extract['backgroundColor']",
+              "raw": "Extract<\n  AnimatedStyle<Required<Pick<ViewStyle, Key>>>,\n  Record<Key, unknown>\n>[Key]"
             },
-            "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."
           },
           "style": {
             "required": false,
             "tsType": {
-              "name": "Animated.WithAnimatedValue",
+              "name": "StyleProp",
               "elements": [
                 {
-                  "name": "StyleProp",
+                  "name": "AnimatedStyle",
                   "elements": [
                     {
-                      "name": "ViewStyle"
+                      "name": "Omit",
+                      "elements": [
+                        {
+                          "name": "ViewStyle"
+                        },
+                        {
+                          "name": "unknown"
+                        }
+                      ],
+                      "raw": "Omit<ViewStyle, keyof SurfaceVisualProps>"
                     }
                   ],
-                  "raw": "StyleProp<ViewStyle>"
+                  "raw": "AnimatedStyle<Omit<ViewStyle, keyof SurfaceVisualProps>>"
                 }
               ],
-              "raw": "Animated.WithAnimatedValue<StyleProp<ViewStyle>>"
+              "raw": "StyleProp<AnimatedStyle<Omit<ViewStyle, keyof SurfaceVisualProps>>>"
             },
-            "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 +11468,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 +11495,6 @@
               ]
             },
             "description": ""
-          },
-          "container": {
-            "required": false,
-            "tsType": {
-              "name": "boolean"
-            },
-            "description": "@internal"
           }
         }
       },
@@ -11780,19 +12016,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/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx
index fe420830ce..c8225e5a5e 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,9 @@ const styles = StyleSheet.create({
   },
   verticalSurface: {
     height: '48%',
+  },
+  verticalSurfaceContent: {
+    flex: 1,
     justifyContent: 'center',
   },
 
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/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
index 8ef9965819..69308ebc8a 100644
--- a/src/components/Appbar/Appbar.tsx
+++ b/src/components/Appbar/Appbar.tsx
@@ -1,19 +1,22 @@
 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 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 +54,7 @@ export type Props = Omit<Partial<ViewProps>, 'style'> & {
    * @optional
    */
   theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -145,30 +148,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 borderRadius = getAppbarBorders(restStyle);
+
   const isMode = (modeToCompare: AppbarModes) => {
     return mode === modeToCompare;
   };
@@ -210,23 +209,27 @@ const Appbar = ({
   const insets = {
     paddingBottom: safeAreaInsets?.bottom,
     paddingTop: safeAreaInsets?.top,
-    paddingLeft: safeAreaInsets?.left,
-    paddingRight: safeAreaInsets?.right,
+    paddingLeft: safeAreaInsets?.left
+      ? safeAreaInsets.left + APPBAR_HORIZONTAL_PADDING
+      : APPBAR_HORIZONTAL_PADDING,
+    paddingRight: safeAreaInsets?.right
+      ? safeAreaInsets.right + APPBAR_HORIZONTAL_PADDING
+      : APPBAR_HORIZONTAL_PADDING,
   };
 
   return (
     <Surface
+      {...borderRadius}
+      backgroundColor={backgroundColor}
       style={[
-        { backgroundColor },
-        styles.appbar,
         {
           height: modeAppbarHeight[mode],
         },
+        styles.appbar,
         insets,
         restStyle,
       ]}
-      elevation={elevation}
-      container
+      elevation={elevated ? 2 : 0}
       {...rest}
     >
       {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
@@ -308,7 +311,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..f9015d84c8 100644
--- a/src/components/Appbar/AppbarHeader.tsx
+++ b/src/components/Appbar/AppbarHeader.tsx
@@ -1,22 +1,17 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Appbar } from './Appbar';
-import {
-  getAppbarBackgroundColor,
-  modeAppbarHeight,
-  getAppbarBorders,
-} from './utils';
+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 +47,7 @@ export type Props = Omit<
    * @optional
    */
   theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -100,64 +95,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;
     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);
 
   return (
-    <View
-      testID={`${testID}-root-layer`}
+    <Appbar
+      testID={testID}
       style={[
         {
+          height: height + topInset,
           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..151485a589 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';
@@ -23,9 +23,8 @@ const borderStyleProperties = [
 
 export const getAppbarBackgroundColor = (
   theme: InternalTheme,
-  _elevation: number,
-  customBackground?: ColorValue,
-  elevated?: boolean
+  elevated: boolean,
+  customBackground?: ColorValue
 ) => {
   const { colors } = theme;
   if (customBackground) {
@@ -54,19 +53,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..13599d3130 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -1,8 +1,22 @@
 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,
+  type AnimatedStyle,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import Button from './Button/Button';
@@ -11,11 +25,13 @@ import type { IconSource } from './Icon';
 import Surface from './Surface';
 import Text from './Typography/Text';
 import { useInternalTheme } from '../core/theming';
-import type { $Omit, $RemoveChildren, ThemeProp } from '../types';
+import type { $RemoveChildren, 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?: 0 | 1 | 2 | 3 | 4 | 5;
   /**
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   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..86755a642a 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,10 +461,15 @@ const BottomNavigationBar = <Route extends BaseRoute>({
     bottom: safeAreaInsets?.bottom ?? bottom,
   };
 
+  const pointerEvents = layout.measured
+    ? keyboardHidesNavigationBar && keyboardVisible
+      ? 'none'
+      : 'auto'
+    : 'none';
+
   return (
-    <Surface
-      elevation={0}
-      testID={testID}
+    <Animated.View
+      testID={`${testID}-animated-wrapper`}
       style={[
         styles.bar,
         keyboardHidesNavigationBar // eslint-disable-next-line react-native/no-inline-styles
@@ -486,217 +490,151 @@ const BottomNavigationBar = <Route extends BaseRoute>({
           : null,
         style,
       ]}
-      pointerEvents={
-        layout.measured
-          ? keyboardHidesNavigationBar && keyboardVisible
-            ? 'none'
-            : 'auto'
-          : 'none'
-      }
-      onLayout={onLayout}
-      container
+      pointerEvents={pointerEvents}
     >
-      <Animated.View
-        style={[styles.barContent, { backgroundColor }]}
-        testID={`${testID}-content`}
+      <Surface
+        elevation={0}
+        testID={testID}
+        style={{ pointerEvents }}
+        onLayout={onLayout}
       >
-        <View
-          style={[
-            styles.items,
-            {
-              marginBottom: insets.bottom,
-              marginHorizontal: Math.max(insets.left, insets.right),
-            },
-            compact && {
-              maxWidth: maxTabBarWidth,
-            },
-          ]}
-          role={'tablist'}
-          testID={`${testID}-content-wrapper`}
+        <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 +642,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 +730,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..a3c377b248 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,13 +7,16 @@ import type {
   Role,
   StyleProp,
   TextStyle,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
+import type { AnimatedStyle } from 'react-native-reanimated';
+
 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';
@@ -24,7 +27,7 @@ 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 +125,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<AnimatedStyle<ViewStyle>>;
   /**
    * Style for the button text.
    */
@@ -192,15 +195,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,43 +216,27 @@ 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();
+      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();
+      setPressed(false);
     }
   };
 
@@ -321,9 +308,18 @@ const Button = ({
       {...rest}
       ref={ref}
       testID={`${testID}-container`}
-      style={[styles.button, compact && styles.compact, buttonStyle, style]}
+      backgroundColor={buttonStyle.backgroundColor}
+      {...touchableStyle}
+      style={[
+        styles.button,
+        compact && styles.compact,
+        {
+          borderColor,
+          borderWidth,
+        },
+        style,
+      ]}
       elevation={elevation}
-      container
     >
       {backgroundOpacity < 1 && (
         <View
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index f0fdc89407..ebaeee0565 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,7 +1,13 @@
 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 type { AnimatedStyle } from 'react-native-reanimated';
 import useLatestCallback from 'use-latest-callback';
 
 import CardActions from './CardActions';
@@ -10,7 +16,7 @@ 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 { ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import { splitStyles } from '../../utils/splitStyles';
 import Surface from '../Surface';
@@ -30,11 +36,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 +77,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?: 0 | 1 | 2 | 3 | 4 | 5;
   /**
    * Style of card's inner content.
    */
   contentStyle?: StyleProp<ViewStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
    * @optional
    */
@@ -91,6 +95,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 +149,7 @@ const Card = ({
   ...rest
 }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => {
   const theme = useInternalTheme(themeOverrides);
+
   const isMode = React.useCallback(
     (modeToCompare: Mode) => {
       return cardMode === modeToCompare;
@@ -155,34 +164,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);
@@ -232,15 +230,12 @@ const Card = ({
   return (
     <Surface
       ref={ref}
-      style={[
-        !isMode('elevated') && { backgroundColor },
-        borderRadiusCombinedStyles,
-        style,
-      ]}
+      {...borderRadiusCombinedStyles}
+      backgroundColor={!isMode('elevated') ? backgroundColor : undefined}
+      style={[{ borderColor }, style]}
       theme={theme}
-      elevation={isMode('elevated') ? elevation : 0}
+      elevation={elevation}
       testID={`${testID}-container`}
-      container
       {...rest}
     >
       {isMode('outlined') && (
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index b6482e9209..beeaaa29b3 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -1,21 +1,23 @@
 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,
+  ViewProps,
   ViewStyle,
 } from 'react-native';
 
+import type { AnimatedStyle } from 'react-native-reanimated';
 import useLatestCallback from 'use-latest-callback';
 
 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';
@@ -25,7 +27,7 @@ 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 +125,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<AnimatedStyle<ViewStyle>>;
   /**
    * Sets additional distance outside of element in which a press can be detected.
    */
@@ -144,6 +146,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 +207,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,25 +221,13 @@ 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 opacity = 0.38;
@@ -265,6 +257,7 @@ const Chip = ({
 
   const elevationStyle = elevation;
   const multiplier = compact ? 1.5 : 2;
+
   const labelSpacings = {
     marginRight: onClose ? 0 : 8 * multiplier,
     marginLeft:
@@ -272,30 +265,25 @@ 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,
-      ]}
+      backgroundColor={selected ? selectedBackgroundColor : backgroundColor}
+      borderRadius={borderRadius}
+      style={[styles.container, styles.md3Container, { borderColor }, style]}
       elevation={elevationStyle}
       {...rest}
       testID={`${testID}-container`}
       theme={theme}
-      container
     >
       <TouchableRipple
         borderless
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index a7b082fe89..1b68e971aa 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
+import type { AnimatedStyle } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import DialogActions from './DialogActions';
@@ -10,7 +11,7 @@ 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 { DialogChildProps } from './utils';
 
@@ -35,7 +36,7 @@ export type Props = {
    * Content of the `Dialog`.
    */
   children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
    * @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..11d8cc6902 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,17 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  type AnimatedStyle,
+} 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';
@@ -67,7 +75,7 @@ export type Props = {
   /**
    * Style of menu's inner content.
    */
-  contentStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  contentStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
   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,12 @@ 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,8 +218,10 @@ 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);
@@ -258,7 +269,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 +315,23 @@ const Menu = ({
     [anchor]
   );
 
+  const handleShowAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (finished) {
+      focusFirstDOMNode(menuRef.current);
+    }
+  });
+
+  const handleHideAnimationFinished = useLatestCallback((finished: boolean) => {
+    if (!finished) {
+      return;
+    }
+
+    setMenuLayout({ width: 0, height: 0 });
+    setRendered(false);
+    prevRendered.current = false;
+    focusFirstDOMNode(anchorRef.current);
+  });
+
   const show = React.useCallback(async () => {
     const windowLayoutResult = Dimensions.get('window');
     const [menuLayoutResult, anchorLayoutResult] = await Promise.all([
@@ -343,46 +374,51 @@ const Menu = ({
       width: windowLayoutResult.width,
     });
 
+    prevRendered.current = true;
     attachListeners();
+
     requestAnimationFrame(() => {
       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();
 
     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) => {
@@ -403,8 +439,6 @@ const Menu = ({
   );
 
   React.useEffect(() => {
-    const opacityAnimation = opacityAnimationRef.current;
-    const scaleAnimation = scaleAnimationRef.current;
     keyboardDidShowListenerRef.current = Keyboard.addListener(
       'keyboardDidShow',
       keyboardDidShow
@@ -418,26 +452,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 +484,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 +495,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 +583,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 +612,39 @@ const Menu = ({
     }
   }
 
-  const shadowMenuContainerStyle = {
-    opacity: opacityAnimationRef.current,
+  const shadowMenuContainerStyle: ViewStyle = {
+    borderRadius: theme.shapes.corner.extraSmall,
+    ...(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 +687,38 @@ const Menu = ({
           >
             <Animated.View
               pointerEvents={pointerEvents}
-              style={{
-                transform: positionTransforms,
-              }}
+              style={positionTransformsStyle}
             >
               <Surface
                 mode={mode}
-                pointerEvents={pointerEvents}
+                backgroundColor={md3Colors.elevation[`level${elevation}`]}
+                borderRadius={shadowMenuContainerStyle.borderRadius}
                 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
+                  testID={`${testID}-surface-content`}
+                  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 +736,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..8511bda46d 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 } 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,27 @@ 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<
+    AnimatedStyle<Omit<ViewStyle, 'backgroundColor' | 'borderRadius'>>
+  >;
+  /**
+   * 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 +99,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 +132,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 +191,26 @@ function Modal({
       'hardwareBackPress',
       onHardwareBackPress
     );
+
     return () => subscription.remove();
   }, [dismissable, dismissableBackButton, onDismissCallback, visible]);
 
-  if (!visibleInternal) {
+  const transitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionDuration: scale * DEFAULT_DURATION,
+    transitionProperty: 'opacity',
+    transitionTimingFunction: cubicBezier(1 / 3, 1, 2 / 3, 1),
+  };
+
+  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 +229,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, transitionStyle]}
         testID={`${testID}-backdrop`}
       />
       <View
@@ -218,8 +244,15 @@ function Modal({
         <Surface
           testID={`${testID}-surface`}
           theme={theme}
-          style={[{ opacity }, styles.content, contentContainerStyle]}
-          container
+          backgroundColor={contentBackgroundColor}
+          borderRadius={contentBorderRadius}
+          style={[
+            styles.content,
+            contentStyle,
+            transitionStyle,
+            contentContainerStyle,
+          ]}
+          elevation={contentElevation}
         >
           {children}
         </Surface>
@@ -238,9 +271,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..918cbcd398 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -1,5 +1,5 @@
 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,
@@ -9,6 +9,8 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import type { AnimatedStyle } from 'react-native-reanimated';
+
 import ActivityIndicator from './ActivityIndicator';
 import Divider from './Divider';
 import type { IconSource } from './Icon';
@@ -111,12 +113,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?: 0 | 1 | 2 | 3 | 4 | 5;
   /**
    * Set style of the TextInput component inside the searchbar
    */
   inputStyle?: StyleProp<TextStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   /**
    * Custom flag for replacing clear button with activity indicator.
    */
@@ -188,8 +190,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 +234,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..22ff78b0ba 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -1,8 +1,18 @@
 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,
+  type AnimatedStyle,
+} 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';
@@ -13,9 +23,9 @@ import Surface 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, 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?: 0 | 1 | 2 | 3 | 4 | 5;
   /**
    * 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<AnimatedStyle<ViewStyle>>;
   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,21 @@ const Snackbar = ({
       style={[styles.wrapper, wrapperPaddings, wrapperStyle]}
     >
       <Surface
-        pointerEvents="box-none"
         aria-live="polite"
         theme={theme}
+        backgroundColor={backgroundColor}
+        borderRadius={theme.shapes.corner.extraSmall}
         style={[
           styles.container,
-          {
-            backgroundColor,
-            borderRadius: theme.shapes.corner.extraSmall,
-            opacity: opacity,
-            transform: [
-              {
-                scale: visible
-                  ? opacity.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [0.9, 1],
-                    })
-                  : 1,
-              },
-            ],
-          },
+          styles.contentContainer,
+          animatedStyle,
           style,
         ]}
         testID={testID}
-        container
         elevation={elevation}
         {...rest}
       >
-        {renderChildrenWithWrapper()}
+        {content}
         {(action || isIconButton) && (
           <View style={[styles.actionsContainer, { marginLeft }]}>
             {action ? (
@@ -382,10 +375,13 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   container: {
+    margin: 8,
+    minHeight: 48,
+    pointerEvents: 'box-none',
+  },
+  contentContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    margin: 8,
-    borderRadius: 4,
     minHeight: 48,
   },
   content: {
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
index b0b0f0c4aa..7f1fce28c9 100644
--- a/src/components/Surface.tsx
+++ b/src/components/Surface.tsx
@@ -1,205 +1,137 @@
 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 { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import Animated, {
+  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?: AnimatedStyleProp<'backgroundColor'>;
+  /**
+   * 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;
+  /**
+   * Radius of the bottom-right corner of the Surface.
+   */
+  borderBottomRightRadius?: BorderRadius;
+  /**
+   * Radius of the bottom-start corner of the Surface.
+   */
+  borderBottomStartRadius?: BorderRadius;
+  /**
+   * Radius of the end-end corner of the Surface.
+   */
+  borderEndEndRadius?: BorderRadius;
+  /**
+   * Radius of the end-start corner of the Surface.
+   */
+  borderEndStartRadius?: BorderRadius;
+  /**
+   * Radius of the start-end corner of the Surface.
+   */
+  borderStartEndRadius?: BorderRadius;
   /**
-   * Content of the `Surface`.
+   * Radius of the start-start corner of the Surface.
    */
-  children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  borderStartStartRadius?: 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 top-end corner of the Surface.
    */
-  elevation?: SurfaceElevation;
+  borderTopEndRadius?: 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 top-left corner of the Surface.
    */
-  mode?: 'flat' | 'elevated';
+  borderTopLeftRadius?: BorderRadius;
   /**
-   * @optional
+   * Radius of the top-right corner of the Surface.
    */
-  theme?: ThemeProp;
+  borderTopRightRadius?: BorderRadius;
   /**
-   * TestID used for testing purposes
+   * Radius of the top-start corner of the Surface.
    */
-  testID?: string;
-  ref?: React.Ref<View>;
+  borderTopStartRadius?: BorderRadius;
   /**
-   * @internal
+   * Corner curve of the Surface on iOS.
    */
-  container?: boolean;
+  borderCurve?: ViewStyle['borderCurve'];
 };
 
-const outerLayerStyleProperties: (keyof ViewStyle)[] = [
-  'position',
-  'alignSelf',
-  'top',
-  'right',
-  'bottom',
-  'left',
-  'start',
-  'end',
-  'flex',
-  'flexShrink',
-  'flexGrow',
-  'width',
-  'height',
-  'transform',
-  'opacity',
-];
-
-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 & {
+    /**
+     * 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<AnimatedStyle<Omit<ViewStyle, keyof SurfaceVisualProps>>>;
+    /**
+     * @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 +140,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 +149,9 @@ const SurfaceIOS = ({
  *
  * const styles = StyleSheet.create({
  *   surface: {
- *     padding: 8,
  *     height: 80,
  *     width: 80,
+ *     padding: 8,
  *     alignItems: 'center',
  *     justifyContent: 'center',
  *   },
@@ -231,44 +163,86 @@ const Surface = ({
   children,
   theme: overridenTheme,
   style,
-  testID = 'surface',
+  backgroundColor: customBackgroundColor,
+  borderRadius,
+  borderBottomEndRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderBottomStartRadius,
+  borderEndEndRadius,
+  borderEndStartRadius,
+  borderStartEndRadius,
+  borderStartStartRadius,
+  borderTopEndRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderTopStartRadius,
+  borderCurve,
+  testID,
   mode = 'elevated',
   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 visualStyle = useAnimatedStyle<ViewStyle>(() =>
+    Object.fromEntries(
+      Object.entries({
+        backgroundColor,
+        borderRadius,
+        borderBottomEndRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        borderBottomStartRadius,
+        borderEndEndRadius,
+        borderEndStartRadius,
+        borderStartEndRadius,
+        borderStartStartRadius,
+        borderTopEndRadius,
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderTopStartRadius,
+        borderCurve,
+      }).map(([property, value]) => [
+        property,
+        isSharedValue(value) ? value.value : value,
+      ])
+    )
+  );
 
   const isElevated = mode === 'elevated';
 
+  const transitionDuration = 150 * theme.animation.scale;
+
+  let transitionStyle: AnimatedStyle<ViewStyle> = {
+    transitionDuration,
+    transitionTimingFunction: 'ease-in-out',
+  };
+
   if (Platform.OS === 'web') {
-    const { pointerEvents = 'auto' } = props;
+    const [elevationShadow] = shadow(elevation, theme.colors.shadow);
+
+    transitionStyle = {
+      ...transitionStyle,
+      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,
+          visualStyle,
+          isElevated ? elevationShadow : null,
         ]}
       >
         {children}
@@ -277,40 +251,23 @@ 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];
+    transitionStyle = {
+      ...transitionStyle,
+      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,
+          visualStyle,
+          isElevated && { elevation: elevationAndroid },
         ]}
       >
         {children}
@@ -318,20 +275,42 @@ const Surface = ({
     );
   }
 
+  const [spotShadow, ambientShadow] = shadow(elevation, theme.colors.shadow);
+
+  transitionStyle = {
+    ...transitionStyle,
+    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, visualStyle, isElevated && spotShadow]}
       testID={testID}
-      mode={mode}
     >
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFill,
+          styles.shadow,
+          transitionStyle,
+          visualStyle,
+          isElevated && ambientShadow,
+        ]}
+        testID={testID ? `${testID}-shadow-layer` : undefined}
+      />
       {children}
-    </SurfaceIOS>
+    </Animated.View>
   );
 };
 
+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..8ad6b28645 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -1,12 +1,8 @@
-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';
 import { render, screen } from '../../../test-utils';
-import { tokens } from '../../../theme/tokens';
 import Appbar from '../../Appbar';
 import {
   getAppbarBackgroundColor,
@@ -280,150 +276,83 @@ 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(
+      getTheme().colors.surfaceContainer
     );
   });
 
-  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(
+      getTheme(true).colors.surfaceContainer
     );
   });
 });
 
-describe('animated value changes correctly', () => {
-  it('appbar animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
+describe('style props', () => {
+  it('appbar style is applied correctly', async () => {
     await render(
-      <Appbar testID="appbar" style={[{ transform: [{ scale: value }] }]}>
+      <Appbar testID="appbar" style={{ marginTop: 12 }}>
         <Appbar.Action icon="menu" />
       </Appbar>
     );
-    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 }],
+    expect(screen.getByTestId('appbar')).toHaveStyle({
+      marginTop: 12,
     });
   });
 
-  it('action animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
+  it('action style is applied correctly', async () => {
     await render(
       <Appbar>
         <Appbar.Action
           icon="menu"
-          style={[{ transform: [{ scale: value }] }]}
+          style={{ marginTop: 12 }}
           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 }],
+    expect(screen.getByTestId('appbar-action-container')).toHaveStyle({
+      marginTop: 12,
     });
   });
 
-  it('back action animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
+  it('back action style is applied correctly', async () => {
     await render(
       <Appbar>
         <Appbar.BackAction
-          style={[{ transform: [{ scale: value }] }]}
+          style={{ marginTop: 12 }}
           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 }],
+    expect(screen.getByTestId('appbar-back-action-container')).toHaveStyle({
+      marginTop: 12,
     });
   });
 
-  it('header animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
+  it('header style is applied correctly', async () => {
     await render(
       <SafeAreaProvider>
-        <Appbar.Header
-          style={[{ transform: [{ scale: value }] }]}
-          testID="appbar-header"
-        >
+        <Appbar.Header style={{ marginTop: 12 }} 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 }],
+    expect(screen.getByTestId('appbar-header')).toHaveStyle({
+      marginTop: 12,
     });
   });
 
@@ -437,7 +366,8 @@ describe('animated value changes correctly', () => {
         </Appbar.Header>
       </SafeAreaProvider>
     );
-    expect(screen.getByTestId('appbar-header-root-layer')).toHaveStyle(style);
+
+    expect(screen.getByTestId('appbar-header')).toHaveStyle(style);
   });
 
   describe('getAppbarBorders', () => {
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index a5d9d95766..db67c1b3b9 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -3,34 +3,105 @@
 exports[`Appbar does not pass any additional props to Searchbar 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(254, 247, 255, 1)",
-      "height": 64,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "height": 64,
+        },
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        {
+          "paddingBottom": undefined,
+          "paddingLeft": 4,
+          "paddingRight": 4,
+          "paddingTop": undefined,
+        },
+        {},
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "height": 64,
+      },
       {
         "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": undefined,
+        "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 +109,195 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="surface"
-  >
-    <View
-      collapsable={false}
-      style={
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          undefined,
+        ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {},
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
         {
           "backgroundColor": "rgba(236, 230, 240, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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 +305,102 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+    testID="search-bar-container"
+  >
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
         }
       }
-      testID="search-bar-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(236, 230, 240, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 28,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      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": undefined,
+            "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 +408,356 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
+          },
+        ]
+      }
+      testID="search-bar-container-shadow-layer"
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+          },
+          undefined,
+        ]
+      }
+      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,
-            ]
+      </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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            undefined,
+          ]
+        }
+        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
+          accessibilityLabel="clear"
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
           }
-          testID="search-bar"
-          underlineColorAndroid="transparent"
-          value=""
-        />
-        <View
-          pointerEvents="none"
+          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>
@@ -419,34 +769,105 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
 exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and AppbarAction 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(254, 247, 255, 1)",
-      "height": 64,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "height": 64,
+        },
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        {
+          "paddingBottom": undefined,
+          "paddingLeft": 4,
+          "paddingRight": 4,
+          "paddingTop": undefined,
+        },
+        {},
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "height": 64,
+      },
       {
         "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": undefined,
+        "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 +875,101 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="surface"
-  >
-    <View
-      collapsable={false}
-      style={
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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 +977,159 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    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={
+      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={
+        [
           {
-            "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="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={
+          },
+          [
             {
-              "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 +1140,278 @@ 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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      [
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
           "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    style={
+      [
+        {
           "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..163fd6612a 100644
--- a/src/components/__tests__/BottomNavigation.test.tsx
+++ b/src/components/__tests__/BottomNavigation.test.tsx
@@ -601,7 +601,10 @@ it('barStyle animated value changes correctly', async () => {
       barStyle={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(screen.getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({
+
+  expect(
+    screen.getByTestId('bottom-navigation-bar-animated-wrapper')
+  ).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -614,7 +617,10 @@ 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-bar-animated-wrapper')
+  ).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx
index 4da466837a..7612184e48 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';
@@ -709,33 +709,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..66450300ae 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 { StyleSheet, Text } 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';
@@ -224,32 +223,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..e4df7ba341 100644
--- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
+++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -3,28 +3,85 @@
 exports[`Card renders an outlined card 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(254, 247, 255, 1)",
-      "borderRadius": 12,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(254, 247, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 12,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
   }
-  testID="card-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderColor": "rgba(121, 116, 126, 1)",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "borderColor": "rgba(121, 116, 126, 1)",
+      },
+      undefined,
       {
         "backgroundColor": "rgba(254, 247, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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 +89,145 @@ exports[`Card renders an outlined card 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="card-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    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,
-          },
-        ]
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 12,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      testID="card-outline"
-    />
-    <View
-      style={
-        [
-          {
-            "flexShrink": 1,
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
           },
-          undefined,
-        ]
-      }
-      testID="card"
-    />
-  </View>
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    testID="card-container-shadow-layer"
+  />
+  <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..8e23dac3e3 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -83,6 +83,35 @@ exports[`renders Checkbox with custom testID 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -105,6 +134,34 @@ exports[`renders Checkbox with custom testID 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -126,6 +183,31 @@ exports[`renders Checkbox with custom testID 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "width": 18,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+          ]
+        }
         style={
           [
             {
@@ -268,6 +350,35 @@ exports[`renders checked Checkbox with color 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -290,6 +401,34 @@ exports[`renders checked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "red",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -311,6 +450,31 @@ exports[`renders checked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "width": 18,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+          ]
+        }
         style={
           [
             {
@@ -453,6 +617,35 @@ exports[`renders checked Checkbox with onPress 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -475,6 +668,34 @@ exports[`renders checked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -496,6 +717,31 @@ exports[`renders checked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "width": 18,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+          ]
+        }
         style={
           [
             {
@@ -638,6 +884,35 @@ exports[`renders indeterminate Checkbox 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -660,6 +935,34 @@ exports[`renders indeterminate Checkbox 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -681,6 +984,31 @@ exports[`renders indeterminate Checkbox 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "width": 18,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+          ]
+        }
         style={
           [
             {
@@ -810,6 +1138,35 @@ exports[`renders indeterminate Checkbox with color 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -832,6 +1189,34 @@ exports[`renders indeterminate Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "red",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -853,6 +1238,31 @@ exports[`renders indeterminate Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "width": 18,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+          ]
+        }
         style={
           [
             {
@@ -982,6 +1392,35 @@ exports[`renders unchecked Checkbox with color 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -1004,6 +1443,34 @@ exports[`renders unchecked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "red",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -1025,6 +1492,31 @@ exports[`renders unchecked Checkbox with color 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "width": 18,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+          ]
+        }
         style={
           [
             {
@@ -1167,6 +1659,35 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "borderWidth": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "borderColor": "rgba(73, 69, 79, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -1189,6 +1710,34 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "borderRadius": 2,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "rgba(103, 80, 164, 1)",
+            },
+          ]
+        }
         pointerEvents="none"
         style={
           [
@@ -1210,6 +1759,31 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
         }
       />
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+              "width": 0,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "height": 18,
+              "left": 0,
+              "overflow": "hidden",
+              "position": "absolute",
+              "top": 0,
+            },
+          ]
+        }
         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..1aee2c0db6 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
@@ -135,6 +135,35 @@ exports[`can render leading checkbox control 1`] = `
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderRadius": 2,
+                  "borderWidth": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "borderColor": "rgba(73, 69, 79, 1)",
+                },
+              ]
+            }
             pointerEvents="none"
             style={
               [
@@ -157,6 +186,34 @@ exports[`can render leading checkbox control 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderRadius": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
             pointerEvents="none"
             style={
               [
@@ -178,6 +235,31 @@ exports[`can render leading checkbox control 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                  "width": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "height": 18,
+                  "left": 0,
+                  "overflow": "hidden",
+                  "position": "absolute",
+                  "top": 0,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -451,6 +533,35 @@ exports[`renders unchecked 1`] = `
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderRadius": 2,
+                  "borderWidth": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "borderColor": "rgba(73, 69, 79, 1)",
+                },
+              ]
+            }
             pointerEvents="none"
             style={
               [
@@ -473,6 +584,34 @@ exports[`renders unchecked 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderRadius": 2,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
             pointerEvents="none"
             style={
               [
@@ -494,6 +633,31 @@ exports[`renders unchecked 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                  "width": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "height": 18,
+                  "left": 0,
+                  "overflow": "hidden",
+                  "position": "absolute",
+                  "top": 0,
+                },
+              ]
+            }
             style={
               [
                 {
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
index 644906ae33..0e8e959ec3 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';
@@ -373,32 +370,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__/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..018e0c9b71 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';
@@ -210,8 +210,7 @@ it('respects anchorPosition bottom', async () => {
   dimensionsSpy.mockRestore();
 });
 
-it('animated value changes correctly', async () => {
-  const value = new Animated.Value(1);
+it('applies content styles', async () => {
   await render(
     <Portal.Host>
       <Menu
@@ -219,27 +218,15 @@ it('animated value changes correctly', async () => {
         onDismiss={jest.fn()}
         anchor={<Button mode="outlined">Open menu</Button>}
         testID="menu"
-        contentStyle={[{ transform: [{ scale: value }] }]}
+        contentStyle={{ marginTop: 12 }}
       >
         <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 }],
+  expect(screen.getByTestId('menu-surface-content')).toHaveStyle({
+    marginTop: 12,
   });
 });
 
diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx
index ff4cf2fd41..887f300458 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,
         });
 
@@ -578,33 +576,19 @@ describe('Modal', () => {
     });
   });
 
-  it('animated value changes correctly', async () => {
-    const value = new Animated.Value(1);
+  it('applies content container style', async () => {
     await render(
       <Modal
         visible={true}
         testID="modal"
-        contentContainerStyle={[{ transform: [{ scale: value }] }]}
+        contentContainerStyle={{ marginTop: 12 }}
       >
         {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 }],
+    expect(screen.getByTestId('modal-surface')).toHaveStyle({
+      marginTop: 12,
     });
   });
 });
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..afa12480a0 100644
--- a/src/components/__tests__/Surface.test.tsx
+++ b/src/components/__tests__/Surface.test.tsx
@@ -1,6 +1,6 @@
-import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import {
   afterEach,
@@ -15,14 +15,14 @@ import { getTheme } from '../../core/theming';
 import { render, screen } from '../../test-utils';
 import Surface from '../Surface';
 
+const SPOT_SHADOW_OPACITY = 0.19;
+const AMBIENT_SHADOW_OPACITY = 0.039;
+
 type StyleCase = {
   property: keyof ViewStyle;
   value: ViewStyle[keyof ViewStyle];
 };
 
-const SPOT_SHADOW_OPACITY = 0.19;
-const AMBIENT_SHADOW_OPACITY = 0.039;
-
 afterEach(() => {
   jest.restoreAllMocks();
 });
@@ -30,14 +30,11 @@ afterEach(() => {
 describe('Surface', () => {
   it('should properly render passed props', async () => {
     await render(
-      <Surface pointerEvents="box-none" testID="surface-container">
+      <Surface accessibilityLabel="Surface" 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'
-    );
+    expect(screen.getByLabelText('Surface')).toBeOnTheScreen();
   });
 
   describe('on iOS', () => {
@@ -46,43 +43,28 @@ describe('Surface', () => {
     });
 
     const styles = StyleSheet.create({
-      absoluteStyles: {
-        bottom: 10,
-        end: 20,
-        left: 30,
-        position: 'absolute',
-        right: 40,
-        start: 50,
-        top: 60,
-      },
-      innerLayerViewStyle: {
-        padding: 13,
-      },
-      restStyle: {
+      surface: {
         padding: 10,
         flexDirection: 'row',
         alignContent: 'center',
+        margin: 12,
+        width: 100,
       },
     });
 
     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({
+      expect(screen.getByTestId('surface-test')).not.toHaveStyle({
         shadowOpacity: expect.any(Number),
       });
       // @ts-expect-error
-      expect(screen.getByTestId('surface-test')).not.toHaveStyle({
+      expect(screen.getByTestId('surface-test-shadow-layer')).not.toHaveStyle({
         shadowOpacity: expect.any(Number),
       });
       expect(screen.getByTestId('surface-test')).toHaveStyle({
@@ -97,14 +79,27 @@ describe('Surface', () => {
         </Surface>
       );
 
-      expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle({
+      expect(screen.getByTestId('surface-test')).toHaveStyle({
         shadowOpacity: SPOT_SHADOW_OPACITY,
       });
-      expect(screen.getByTestId('surface-test')).toHaveStyle({
+      expect(screen.getByTestId('surface-test-shadow-layer')).toHaveStyle({
         shadowOpacity: AMBIENT_SHADOW_OPACITY,
       });
     });
 
+    it('applies styles to the view that contains the children', async () => {
+      await render(
+        <Surface testID="surface-test" style={styles.surface}>
+          {null}
+        </Surface>
+      );
+
+      expect(screen.getByTestId('surface-test')).toHaveStyle(styles.surface);
+      expect(screen.getByTestId('surface-test-shadow-layer')).not.toHaveStyle(
+        styles.surface
+      );
+    });
+
     it.each([
       { property: 'opacity', value: 0.7 },
       { property: 'transform', value: [{ scale: 1.02 }] },
@@ -126,25 +121,6 @@ describe('Surface', () => {
       { 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 },
@@ -155,7 +131,7 @@ describe('Surface', () => {
       { property: 'borderWidth', value: 2 },
       { property: 'borderColor', value: 'black' },
     ] satisfies StyleCase[])(
-      'applies $property to inner layer only',
+      'applies $property to the view that contains the children',
       async ({ property, value }) => {
         const style = { [property]: value };
 
@@ -165,118 +141,32 @@ describe('Surface', () => {
           </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('should render absolute position properties on outer layer', async () => {
-        await render(
-          <Surface testID="surface-test" style={styles.absoluteStyles}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(
-          styles.absoluteStyles
-        );
-      });
-
-      it('should render absolute position properties on the outer layer', async () => {
-        await render(
-          <Surface testID="surface-test" style={styles.absoluteStyles}>
-            {null}
-          </Surface>
-        );
-
-        expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(
-          styles.absoluteStyles
-        );
-      });
-    });
-
-    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 () => {
+    it('applies visual props to every shadow layer', async () => {
       const backgroundColor = 'rgb(1, 2, 3)';
       await render(
         <Surface
           testID="surface-test"
-          theme={{ colors: { elevation: { level1: backgroundColor } } }}
+          backgroundColor={backgroundColor}
+          borderRadius={4}
+          borderTopLeftRadius={8}
         >
           {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);
-      });
+      const visualStyle = {
+        backgroundColor,
+        borderRadius: 4,
+        borderTopLeftRadius: 8,
+      };
+      expect(screen.getByTestId('surface-test')).toHaveStyle(visualStyle);
+      expect(screen.getByTestId('surface-test-shadow-layer')).toHaveStyle(
+        visualStyle
+      );
     });
   });
 
@@ -287,12 +177,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>
       );
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..0691cfec5b 100644
--- a/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Badge.test.tsx.snap
@@ -3,8 +3,18 @@
 exports[`renders badge 1`] = `
 <Text
   allowFontScaling={false}
-  numberOfLines={1}
-  style={
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
     [
       {
         "alignSelf": "flex-end",
@@ -28,14 +38,47 @@ exports[`renders badge 1`] = `
       undefined,
     ]
   }
+  numberOfLines={1}
+  style={
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 1,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 6,
+        "minWidth": 6,
+      },
+      false,
+      undefined,
+    ]
+  }
 />
 `;
 
 exports[`renders badge as hidden 1`] = `
 <Text
   allowFontScaling={false}
-  numberOfLines={1}
-  style={
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
     [
       {
         "alignSelf": "flex-end",
@@ -72,6 +115,40 @@ exports[`renders badge as hidden 1`] = `
       undefined,
     ]
   }
+  numberOfLines={1}
+  style={
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 0,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 16,
+        "minWidth": 16,
+      },
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
+      undefined,
+    ]
+  }
 >
   3
 </Text>
@@ -80,8 +157,18 @@ exports[`renders badge as hidden 1`] = `
 exports[`renders badge in different color 1`] = `
 <Text
   allowFontScaling={false}
-  numberOfLines={1}
-  style={
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
     [
       {
         "alignSelf": "flex-end",
@@ -120,6 +207,42 @@ exports[`renders badge in different color 1`] = `
       },
     ]
   }
+  numberOfLines={1}
+  style={
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 1,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 16,
+        "minWidth": 16,
+      },
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
+      {
+        "backgroundColor": "#f44336",
+      },
+    ]
+  }
 >
   3
 </Text>
@@ -128,8 +251,18 @@ exports[`renders badge in different color 1`] = `
 exports[`renders badge with content 1`] = `
 <Text
   allowFontScaling={false}
-  numberOfLines={1}
-  style={
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
     [
       {
         "alignSelf": "flex-end",
@@ -166,6 +299,40 @@ exports[`renders badge with content 1`] = `
       undefined,
     ]
   }
+  numberOfLines={1}
+  style={
+    [
+      {
+        "alignSelf": "flex-end",
+        "overflow": "hidden",
+        "textAlign": "center",
+        "textAlignVertical": "center",
+      },
+      {
+        "opacity": 1,
+      },
+      {
+        "backgroundColor": "rgba(179, 38, 30, 1)",
+        "borderRadius": 9999,
+        "color": "rgba(255, 255, 255, 1)",
+        "height": 16,
+        "minWidth": 16,
+      },
+      {
+        "fontFamily": "System",
+        "fontSize": 11,
+        "fontWeight": "500",
+        "letterSpacing": 0.5,
+        "lineHeight": 16,
+      },
+      {
+        "lineHeight": 16,
+        "maxWidth": 36,
+        "paddingHorizontal": 4,
+      },
+      undefined,
+    ]
+  }
 >
   3
 </Text>
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 4e75db8cc7..48880b3a64 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -3,127 +3,415 @@
 exports[`render visible banner, with custom theme 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "opacity": 1,
+      },
+      undefined,
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
     }
-    testID="surface"
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+      ]
+    }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "height": 0,
+          },
+        }
+      }
+      jestInlineStyle={{}}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          null,
+          null,
+        ]
+      }
+      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>
+              ],
+            ]
+          }
+        >
+          Custom theme
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
         <View
-          style={
+          collapsable={false}
+          jestAnimatedProps={
             {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
+              "value": {},
             }
           }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
+          jestAnimatedStyle={
+            {
+              "value": {
                 "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              [
+                {
+                  "borderStyle": "solid",
+                  "minWidth": 64,
+                },
+                {
+                  "minWidth": "auto",
+                },
+                {
+                  "borderColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "margin": 4,
+                },
+              ],
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
                 "margin": 4,
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
@@ -131,21 +419,102 @@ exports[`render visible banner, with custom theme 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
               }
             }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "backgroundColor": "transparent",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 20,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {
+                  "transitionDuration": 150,
+                  "transitionProperty": [
+                    "shadowOpacity",
+                    "shadowOffset",
+                    "shadowRadius",
+                  ],
+                  "transitionTimingFunction": "ease-in-out",
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                },
+              ]
+            }
+            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": undefined,
+                  "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 +522,119 @@ exports[`render visible banner, with custom theme 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+            testID="button-container-shadow-layer"
+          />
+          <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>
@@ -279,133 +647,341 @@ exports[`render visible banner, with custom theme 1`] = `
 exports[`renders hidden banner, without action buttons and without image 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
-      },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
+      "value": {},
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "opacity": 0,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "opacity": 0,
+      },
+      undefined,
+      {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
     }
-    testID="surface"
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+      ]
+    }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "height": 0,
+          },
+        }
+      }
+      jestInlineStyle={{}}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
         ]
       }
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "height": 0,
-          }
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
         }
-      />
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "transform": [
+              {
+                "translateY": -0,
+              },
+            ],
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          [
+            {
+              "position": "absolute",
+              "top": 0,
+              "width": "100%",
+            },
+          ],
           {
             "opacity": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {
             "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>
@@ -414,149 +990,437 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
 exports[`renders visible banner, with action buttons and with image 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "opacity": 1,
+      },
+      undefined,
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
     }
-    testID="surface"
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+      ]
+    }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "height": 0,
+          },
+        }
+      }
+      jestInlineStyle={{}}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          null,
+          null,
+        ]
+      }
+      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>
+              ],
+            ]
+          }
+        >
+          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
-          style={
+          collapsable={false}
+          jestAnimatedProps={
             {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
+              "value": {},
             }
           }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
+          jestAnimatedStyle={
+            {
+              "value": {
                 "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              [
+                {
+                  "borderStyle": "solid",
+                  "minWidth": 64,
+                },
+                {
+                  "minWidth": "auto",
+                },
+                {
+                  "borderColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "margin": 4,
+                },
+              ],
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
                 "margin": 4,
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
@@ -564,21 +1428,102 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
               }
             }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "backgroundColor": "transparent",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 20,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {
+                  "transitionDuration": 150,
+                  "transitionProperty": [
+                    "shadowOpacity",
+                    "shadowOffset",
+                    "shadowRadius",
+                  ],
+                  "transitionTimingFunction": "ease-in-out",
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                },
+              ]
+            }
+            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": undefined,
+                  "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 +1531,119 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+            testID="button-container-shadow-layer"
+          />
+          <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>
@@ -712,127 +1656,415 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
 exports[`renders visible banner, with action buttons and without image 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "opacity": 1,
+      },
+      undefined,
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
     }
-    testID="surface"
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+      ]
+    }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "height": 0,
+          },
+        }
+      }
+      jestInlineStyle={{}}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          null,
+          null,
+        ]
+      }
+      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>
+              ],
+            ]
+          }
+        >
+          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
-          style={
+          collapsable={false}
+          jestAnimatedProps={
             {
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-              "margin": 4,
+              "value": {},
             }
           }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
+          jestAnimatedStyle={
+            {
+              "value": {
                 "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              [
+                {
+                  "borderStyle": "solid",
+                  "minWidth": 64,
+                },
+                {
+                  "minWidth": "auto",
+                },
+                {
+                  "borderColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "margin": 4,
+                },
+              ],
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
                 "margin": 4,
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
@@ -840,21 +2072,102 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
               }
             }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "backgroundColor": "transparent",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 20,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {
+                  "transitionDuration": 150,
+                  "transitionProperty": [
+                    "shadowOpacity",
+                    "shadowOffset",
+                    "shadowRadius",
+                  ],
+                  "transitionTimingFunction": "ease-in-out",
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                },
+              ]
+            }
+            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": undefined,
+                  "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 +2175,223 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                }
+                },
+              ]
+            }
+            testID="button-container-shadow-layer"
+          />
+          <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}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
                 "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              [
+                {
+                  "borderStyle": "solid",
+                  "minWidth": 64,
+                },
+                {
+                  "minWidth": "auto",
+                },
+                {
+                  "borderColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "margin": 4,
+                },
+              ],
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          style={
+            [
+              {},
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              {
+                "minWidth": "auto",
+              },
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
                 "margin": 4,
+              },
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
@@ -992,142 +2399,222 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
+              },
+            ]
+          }
+          testID="button-container"
+        >
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
               }
             }
-            testID="button-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "backgroundColor": "transparent",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 20,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {
+                  "transitionDuration": 150,
+                  "transitionProperty": [
+                    "shadowOpacity",
+                    "shadowOffset",
+                    "shadowRadius",
+                  ],
+                  "transitionTimingFunction": "ease-in-out",
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                },
+              ]
+            }
+            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": undefined,
+                  "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,
                     "width": 0,
                   },
-                  "shadowOpacity": 0,
-                  "shadowRadius": 0,
-                }
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                },
+              ]
+            }
+            testID="button-container-shadow-layer"
+          />
+          <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": 20,
+                },
+              ]
+            }
+            testID="button"
+          >
+            <View
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
+                  {
+                    "opacity": 1,
+                  },
+                  undefined,
+                ]
               }
-              testID="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}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                role="button"
+              <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>
@@ -1140,143 +2627,336 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
 exports[`renders visible banner, without action buttons and with image 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "opacity": 1,
+      },
+      undefined,
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
     }
-    testID="surface"
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+      ]
+    }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "height": 0,
+          },
+        }
+      }
+      jestInlineStyle={{}}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          null,
+          null,
+        ]
+      }
+      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>
@@ -1285,121 +2965,314 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
 exports[`renders visible banner, without action buttons and without image 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(247, 242, 250, 1)",
-      "opacity": 1,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0.55,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(247, 242, 250, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": undefined,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "opacity": 1,
       },
-      "shadowOpacity": 0.19,
-      "shadowRadius": 0.79,
     }
   }
-  testID="surface-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0.55,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 0.79,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "opacity": 1,
+      },
+      undefined,
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
-        "flex": undefined,
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(247, 242, 250, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": undefined,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
     }
-    testID="surface"
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 0.25,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+      ]
+    }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "height": 0,
+          },
+        }
+      }
+      jestInlineStyle={{}}
       style={
         [
           {
-            "alignSelf": "center",
-            "maxWidth": 960,
-            "overflow": "hidden",
-            "width": "100%",
+            "height": 0,
           },
-          undefined,
+        ]
+      }
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          null,
+          null,
+        ]
+      }
+      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..d7043ac618 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -74,42 +74,209 @@ exports[`allows customizing Route's type via generics 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -264,8 +431,18 @@ exports[`allows customizing Route's type via generics 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -289,6 +466,29 @@ exports[`allows customizing Route's type via generics 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -525,8 +725,18 @@ exports[`allows customizing Route's type via generics 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -550,6 +760,29 @@ exports[`allows customizing Route's type via generics 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -757,42 +990,209 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -1008,8 +1408,18 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -1033,6 +1443,29 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -1209,8 +1642,18 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -1234,6 +1677,29 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -1410,8 +1876,18 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -1435,6 +1911,29 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -1521,52 +2020,219 @@ exports[`hides labels in shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestInlineStyle={
+        [
           {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
-          }
-        }
-        testID="bottom-navigation-bar-content"
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "rgba(243, 237, 247, 1)",
+            "overflow": "hidden",
+          }
+        }
+        testID="bottom-navigation-bar-content"
       >
         <View
           role="tablist"
@@ -1772,8 +2438,18 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -1797,6 +2473,29 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -1973,8 +2672,18 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -1998,6 +2707,29 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -2174,8 +2906,18 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -2199,6 +2941,29 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -2423,42 +3188,209 @@ exports[`renders bottom navigation with getLazy 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -2673,8 +3605,18 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -2698,6 +3640,29 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -2994,8 +3959,18 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -3019,6 +3994,29 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -3315,8 +4313,18 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -3340,14 +4348,37 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         undefined,
                       ]
                     }
-                  />
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "height": 16,
                     "paddingBottom": 2,
                   }
                 }
@@ -3636,8 +4667,18 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -3661,6 +4702,29 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -3957,8 +5021,18 @@ exports[`renders bottom navigation with getLazy 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -3982,6 +5056,29 @@ exports[`renders bottom navigation with getLazy 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -4189,42 +5286,209 @@ exports[`renders bottom navigation with scene animation 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -4444,8 +5708,18 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -4469,6 +5743,29 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -4714,8 +6011,18 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -4739,6 +6046,29 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -4984,8 +6314,18 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -5009,6 +6349,29 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -5254,8 +6617,18 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -5279,6 +6652,29 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -5524,8 +6920,18 @@ exports[`renders bottom navigation with scene animation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -5549,6 +6955,29 @@ exports[`renders bottom navigation with scene animation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -5700,42 +7129,209 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -5890,8 +7486,18 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -5915,6 +7521,29 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -6086,8 +7715,18 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -6111,6 +7750,29 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -6282,8 +7944,18 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -6307,6 +7979,29 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -6449,42 +8144,209 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -6644,6 +8506,41 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                          "transitionDuration": 150,
+                          "transitionProperty": "opacity",
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                     numberOfLines={1}
                     style={
                       [
@@ -6655,8 +8552,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,8 +8717,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -6847,6 +8752,29 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -7000,8 +8928,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -7025,6 +8963,29 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -7178,8 +9139,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -7203,6 +9174,29 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -7356,8 +9350,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -7381,6 +9385,29 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -7500,42 +9527,209 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -7750,8 +9944,18 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -7775,6 +9979,29 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -8071,8 +10298,18 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -8096,6 +10333,29 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -8392,6 +10652,41 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                 >
                   <Text
                     allowFontScaling={false}
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                          "transitionDuration": 150,
+                          "transitionProperty": "opacity",
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                     numberOfLines={1}
                     style={
                       [
@@ -8403,8 +10698,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 +10917,209 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -8879,8 +11339,18 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -8904,6 +11374,29 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -9149,8 +11642,18 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -9174,6 +11677,29 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -9419,8 +11945,18 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -9444,6 +11980,29 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -9595,42 +12154,209 @@ exports[`renders non-shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -9845,8 +12571,18 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -9870,6 +12606,29 @@ exports[`renders non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -10146,26 +12905,61 @@ exports[`renders non-shifting bottom navigation 1`] = `
                         ],
                       ]
                     }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
+                  >
+                    camera
+                  </Text>
+                </View>
+                <View
+                  style={
+                    [
+                      {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    allowFontScaling={false}
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                          "transitionDuration": 150,
+                          "transitionProperty": "opacity",
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                     numberOfLines={1}
                     style={
                       [
@@ -10177,8 +12971,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                         },
                         {
                           "opacity": 0,
-                          "transitionDuration": 150,
-                          "transitionProperty": "opacity",
                         },
                         {
                           "backgroundColor": "rgba(179, 38, 30, 1)",
@@ -10487,8 +13279,18 @@ exports[`renders non-shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -10512,6 +13314,29 @@ exports[`renders non-shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -10719,42 +13544,209 @@ exports[`renders shifting bottom navigation 1`] = `
   </View>
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       {
-        "backgroundColor": "transparent",
         "bottom": 0,
         "left": 0,
         "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-animated-wrapper"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
+      jestAnimatedProps={
         {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": undefined,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
           },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "backgroundColor": "transparent",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "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}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": undefined,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
       <View
         collapsable={false}
         style={
@@ -10974,8 +13966,18 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -10999,6 +14001,29 @@ exports[`renders shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -11244,8 +14269,18 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -11269,6 +14304,29 @@ exports[`renders shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -11514,8 +14572,18 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -11539,6 +14607,29 @@ exports[`renders shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -11784,8 +14875,18 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -11809,6 +14910,29 @@ exports[`renders shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
@@ -12054,8 +15178,18 @@ exports[`renders shifting bottom navigation 1`] = `
                 >
                   <Text
                     allowFontScaling={false}
-                    numberOfLines={1}
-                    style={
+                    collapsable={false}
+                    jestAnimatedProps={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestAnimatedStyle={
+                      {
+                        "value": {},
+                      }
+                    }
+                    jestInlineStyle={
                       [
                         {
                           "alignSelf": "flex-end",
@@ -12079,6 +15213,29 @@ exports[`renders shifting bottom navigation 1`] = `
                         undefined,
                       ]
                     }
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "alignSelf": "flex-end",
+                          "overflow": "hidden",
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                        },
+                        {
+                          "opacity": 0,
+                        },
+                        {
+                          "backgroundColor": "rgba(179, 38, 30, 1)",
+                          "borderRadius": 9999,
+                          "color": "rgba(255, 255, 255, 1)",
+                          "height": 6,
+                          "minWidth": 6,
+                        },
+                        false,
+                        undefined,
+                      ]
+                    }
                   />
                 </View>
               </View>
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index bbc1fff1be..434dd772ef 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -3,32 +3,97 @@
 exports[`renders button with an accessibility hint 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +101,221 @@ exports[`renders button with an accessibility hint 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityHint="hint"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <View
+    accessibilityHint="hint"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": 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"
+    }
+    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={
         [
           {
-            "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 +323,99 @@ exports[`renders button with an accessibility hint 1`] = `
 
 exports[`renders button with an accessibility label 1`] = `
 <View
+  accessibilityLabel="label"
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    accessibilityLabel="label"
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +423,220 @@ exports[`renders button with an accessibility label 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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>
@@ -309,150 +645,318 @@ exports[`renders button with an accessibility label 1`] = `
 exports[`renders button with button color 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "#e91e63",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "#e91e63",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
         {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {
+        "backgroundColor": "#e91e63",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
-      accessibilityValue={
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#e91e63",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "#e91e63",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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>
+            ],
+          ]
+        }
+        testID="button-text"
+      >
+        Custom Button
+      </Text>
     </View>
   </View>
 </View>
@@ -461,32 +965,97 @@ exports[`renders button with button color 1`] = `
 exports[`renders button with color 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +1063,220 @@ exports[`renders button with color 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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>
@@ -613,32 +1285,97 @@ exports[`renders button with color 1`] = `
 exports[`renders button with custom testID 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="custom:testID-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +1383,220 @@ exports[`renders button with custom testID 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="custom:testID-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="custom:testID-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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="custom:testID-container-shadow-layer"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": 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"
+    }
+    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="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>
@@ -765,199 +1605,367 @@ exports[`renders button with custom testID 1`] = `
 exports[`renders button with icon 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {
+        "backgroundColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
-  }
-  testID="button-container-outer-layer"
->
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "minWidth": 64,
+      },
+      undefined,
+      {
+        "borderColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      {
+        "backgroundColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
   <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={
-      {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 20,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "flex": undefined,
-        "minWidth": 64,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
+      [
+        {
+          "overflow": "hidden",
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        {
+          "borderRadius": 20,
+        },
+      ]
     }
-    testID="button-container"
+    testID="button"
   >
     <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",
+            "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>
@@ -966,32 +1974,97 @@ exports[`renders button with icon 1`] = `
 exports[`renders button with icon in reverse order 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +2072,271 @@ exports[`renders button with icon in reverse order 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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>
@@ -1169,32 +2345,97 @@ exports[`renders button with icon in reverse order 1`] = `
 exports[`renders contained contained with mode 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(103, 80, 164, 1)",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "rgba(103, 80, 164, 1)",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +2443,221 @@ exports[`renders contained contained with mode 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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": 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>
@@ -1322,32 +2666,97 @@ exports[`renders contained contained with mode 1`] = `
 exports[`renders disabled button 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +2764,220 @@ exports[`renders disabled button 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": 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"
+    }
+    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={
         [
           {
-            "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>
@@ -1474,32 +2986,97 @@ exports[`renders disabled button 1`] = `
 exports[`renders loading button 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-    }
+    ]
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  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": undefined,
+        "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 +3084,220 @@ exports[`renders loading button 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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 +3305,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 +3319,8 @@ exports[`renders loading button 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
+                    "height": 9,
+                    "overflow": "hidden",
                     "width": 18,
                   }
                 }
@@ -1638,8 +3329,15 @@ exports[`renders loading button 1`] = `
                   collapsable={false}
                   style={
                     {
-                      "height": 9,
-                      "overflow": "hidden",
+                      "height": 18,
+                      "transform": [
+                        {
+                          "translateY": 0,
+                        },
+                        {
+                          "rotate": "-165deg",
+                        },
+                      ],
                       "width": 18,
                     }
                   }
@@ -1648,15 +3346,8 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": 0,
-                          },
-                          {
-                            "rotate": "-165deg",
-                          },
-                        ],
+                        "height": 9,
+                        "overflow": "hidden",
                         "width": 18,
                       }
                     }
@@ -1665,40 +3356,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 +3401,9 @@ exports[`renders loading button 1`] = `
                 collapsable={false}
                 style={
                   {
-                    "height": 18,
-                    "transform": [
-                      {
-                        "rotate": "45deg",
-                      },
-                    ],
+                    "height": 9,
+                    "overflow": "hidden",
+                    "top": 9,
                     "width": 18,
                   }
                 }
@@ -1720,9 +3412,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 +3429,8 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       {
-                        "height": 18,
-                        "transform": [
-                          {
-                            "translateY": -9,
-                          },
-                          {
-                            "rotate": "345deg",
-                          },
-                        ],
+                        "height": 9,
+                        "overflow": "hidden",
                         "width": 18,
                       }
                     }
@@ -1748,80 +3439,69 @@ 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>
@@ -1830,32 +3510,97 @@ exports[`renders loading button 1`] = `
 exports[`renders outlined button with mode 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderWidth": 1,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +3608,221 @@ exports[`renders outlined button with mode 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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",
-            },
-            {
-              "opacity": 1,
+              "textAlign": "left",
+            },
+            {
+              "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>
@@ -1983,32 +3831,97 @@ exports[`renders outlined button with mode 1`] = `
 exports[`renders text button by default 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +3929,220 @@ exports[`renders text button by default 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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>
@@ -2135,32 +4151,97 @@ exports[`renders text button by default 1`] = `
 exports[`renders text button with mode 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 20,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "transparent",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "minWidth": 64,
+        },
+        undefined,
+        {
+          "borderColor": "transparent",
+          "borderWidth": 0,
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +4249,220 @@ exports[`renders text button with mode 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="button-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <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"
+    }
+    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={
         [
           {
-            "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..28c7006561 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -3,32 +3,101 @@
 exports[`renders chip with close button 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "borderWidth": 0.5,
+          "flexDirection": "column",
+        },
+        {
+          "borderWidth": 1,
+        },
+        {
+          "borderColor": "transparent",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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,
@@ -36,316 +105,295 @@ exports[`renders chip with close button 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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-shadow-layer"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
-      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"
+    }
+    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={
         [
           {
-            "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",
+              "alignSelf": "center",
+              "padding": 4,
             },
             {
-              "paddingLeft": 0,
-            },
-            {
-              "opacity": 1,
-            },
-            {
-              "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,
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
-              {
-                "marginRight": 8,
-                "padding": 0,
-              },
-            ]
-          }
-        >
-          <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 +417,157 @@ 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
+        <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(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={
-            [
-              {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "writingDirection": "ltr",
-              },
-              [
                 {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "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={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "borderWidth": 0.5,
+          "flexDirection": "column",
+        },
+        {
+          "borderWidth": 1,
+        },
+        {
+          "borderColor": "transparent",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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,
@@ -632,223 +575,295 @@ exports[`renders chip with icon 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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-shadow-layer"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
-      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"
+    }
+    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={
         [
           {
-            "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 +887,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 +940,104 @@ exports[`renders chip with onPress 1`] = `
 </View>
 `;
 
-exports[`renders outlined disabled chip 1`] = `
+exports[`renders chip with icon 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
   }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "borderWidth": 0.5,
+          "flexDirection": "column",
+        },
+        {
+          "borderWidth": 1,
+        },
+        {
+          "borderColor": "transparent",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  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": undefined,
+        "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 +1045,376 @@ exports[`renders outlined disabled chip 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": false,
-        }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
       }
-      accessibilityValue={
+    }
+    jestInlineStyle={
+      [
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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-shadow-layer"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": false,
       }
-      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"
+    }
+    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={
         [
           {
-            "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={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
-      "borderRadius": 8,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
+      "value": {},
     }
   }
-  testID="chip-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
-      {
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "borderWidth": 0.5,
+          "flexDirection": "column",
+        },
+        {
+          "borderWidth": 1,
+        },
+        {
+          "borderColor": "transparent",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
         "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": undefined,
+        "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 +1422,937 @@ exports[`renders selected chip 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="chip-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="chip-container"
-  >
-    <View
-      accessibilityState={
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
         {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": true,
-        }
-      }
-      accessibilityValue={
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
         {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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-shadow-layer"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": false,
       }
-      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"
+    }
+    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={
         [
           {
-            "overflow": "hidden",
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingLeft": 4,
+            "position": "relative",
+          },
+          {
+            "paddingLeft": 0,
+          },
+          {
+            "opacity": 1,
           },
+          {
+            "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, 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}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "transparent",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "borderWidth": 0.5,
+          "flexDirection": "column",
+        },
+        {
+          "borderWidth": 1,
+        },
+        {
+          "borderColor": "rgba(243, 237, 247, 1)",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      {
+        "borderStyle": "solid",
+        "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": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
           ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "transparent",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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-shadow-layer"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "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": 0.38,
+          },
+          {
+            "paddingRight": 0,
+          },
         ]
       }
-      testID="chip"
     >
-      <View
+      <Text
+        numberOfLines={1}
+        selectable={false}
         style={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "paddingLeft": 4,
-              "position": "relative",
+              "textAlign": "left",
             },
             {
-              "paddingLeft": 0,
+              "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}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 8,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "borderStyle": "solid",
+          "borderWidth": 0.5,
+          "flexDirection": "column",
+        },
+        {
+          "borderWidth": 1,
+        },
+        {
+          "borderColor": "transparent",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  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": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 8,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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-shadow-layer"
+  />
+  <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,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
             {
-              "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(29, 25, 43, 1)",
+                "fontSize": 18,
               },
-              {
-                "paddingLeft": 8,
-                "paddingRight": 0,
-              },
-              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..38f643c1c0 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -381,281 +381,299 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
   >
     <View
       collapsable={false}
-      style={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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>
@@ -719,561 +737,597 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
   >
     <View
       collapsable={false}
-      style={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
-          }
-        }
-        testID="icon-button-container"
-      >
-        <View
-          accessibilityLabel="chevron-right"
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
+          },
+          undefined,
+        ]
+      }
+      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="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={
+          {
+            "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={
+        }
+        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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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>
@@ -1337,281 +1391,299 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
   >
     <View
       collapsable={false}
-      style={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
-          }
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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>
@@ -1683,33 +1755,59 @@ exports[`DataTable.Pagination renders data table pagination with options select
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "marginRight": 16,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "value": {},
           }
         }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
+        jestAnimatedStyle={
+          {
+            "value": {
               "backgroundColor": "transparent",
-              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              undefined,
+              {
+                "borderColor": "rgba(202, 196, 208, 1)",
+                "borderWidth": 1,
+              },
+              {
+                "marginRight": 16,
+                "textAlign": "center",
+              },
+            ],
+            {
               "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
@@ -1717,167 +1815,313 @@ exports[`DataTable.Pagination renders data table pagination with options select
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
-              "textAlign": "center",
-            }
-          }
-          testID="button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": false,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+            },
+          ]
+        }
+        style={
+          [
+            {},
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
+            },
+            undefined,
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderWidth": 1,
+            },
+            {
+              "marginRight": 16,
+              "textAlign": "center",
+            },
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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}
+          jestAnimatedProps={
+            {
+              "value": {},
             }
-            accessibilityValue={
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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-shadow-layer"
+        />
+        <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"
+          }
+          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={
               [
                 {
-                  "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>
@@ -1923,561 +2167,597 @@ exports[`DataTable.Pagination renders data table pagination with options select
   >
     <View
       collapsable={false}
-      style={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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={
+      jestAnimatedProps={
         {
-          "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,
+          "value": {},
         }
       }
-      testID="icon-button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "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,
+          },
+          undefined,
+        ]
+      }
+      style={
+        [
+          {
+            "margin": 6,
             "overflow": "hidden",
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 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..00f077c522 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -2,15 +2,80 @@
 
 exports[`renders FAB large size 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 96,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 96,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 28,
         "height": 96,
         "opacity": 1,
         "transform": [
@@ -20,6 +85,26 @@ 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": undefined,
+        "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 +114,137 @@ exports[`renders FAB large size 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 28,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -148,6 +356,36 @@ exports[`renders FAB large size 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 33,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -174,15 +412,80 @@ exports[`renders FAB large size 1`] = `
 
 exports[`renders FAB medium size 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 20,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 80,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 80,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 20,
         "height": 80,
         "opacity": 1,
         "transform": [
@@ -192,6 +495,26 @@ 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": undefined,
+        "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 +524,137 @@ exports[`renders FAB medium size 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 20,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -320,7 +766,21 @@ exports[`renders FAB medium size 1`] = `
     </View>
   </View>
   <View
-    style={
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 25,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
       [
         {
           "borderWidth": 3,
@@ -334,53 +794,277 @@ exports[`renders FAB medium size 1`] = `
         {
           "borderColor": "rgba(98, 91, 113, 1)",
         },
-        {
-          "borderRadius": 25,
-          "opacity": 0,
-        },
       ]
     }
-  />
-</View>
-`;
-
+    style={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 25,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`renders FAB transitioning to not visible 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "none",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   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": undefined,
+        "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}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -492,6 +1176,36 @@ exports[`renders FAB transitioning to not visible 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -518,24 +1232,109 @@ exports[`renders FAB transitioning to not visible 1`] = `
 
 exports[`renders FAB transitioning to visible 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 0,
+        "transform": [
+          {
+            "scale": 0,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   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": undefined,
+        "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,37 +1344,160 @@ exports[`renders FAB transitioning to visible 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
     style={
       [
         {
-          "height": "100%",
-          "overflow": "hidden",
-          "width": "100%",
+          "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": undefined,
+          "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
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": true,
-          "expanded": undefined,
-          "selected": undefined,
-        }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
       accessibilityValue={
         {
@@ -664,6 +1586,36 @@ exports[`renders FAB transitioning to visible 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -690,15 +1642,80 @@ exports[`renders FAB transitioning to visible 1`] = `
 
 exports[`renders FAB with aria-label 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(234, 221, 255, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -708,6 +1725,26 @@ 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": undefined,
+        "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 +1754,137 @@ exports[`renders FAB with aria-label 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -837,6 +1997,36 @@ exports[`renders FAB with aria-label 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -863,15 +2053,80 @@ exports[`renders FAB with aria-label 1`] = `
 
 exports[`renders FAB with containerColor and contentColor overrides 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "#ff5722",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "#ff5722",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -881,6 +2136,26 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {
+        "backgroundColor": "#ff5722",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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,22 +2165,145 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
-    style={
-      [
-        {
-          "height": "100%",
-          "overflow": "hidden",
-          "width": "100%",
-        },
-        {
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#ff5722",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "#ff5722",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#ff5722",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
           "backgroundColor": "#ff5722",
           "borderRadius": 16,
         },
@@ -1009,6 +2407,36 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1035,15 +2463,80 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = `
 
 exports[`renders FAB with containerColor override 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "#ff5722",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "#ff5722",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1053,6 +2546,26 @@ exports[`renders FAB with containerColor override 1`] = `
         ],
         "width": 56,
       },
+      {
+        "pointerEvents": "auto",
+      },
+      {
+        "backgroundColor": "#ff5722",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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 +2575,137 @@ exports[`renders FAB with containerColor override 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#ff5722",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {},
+        {
+          "backgroundColor": "#ff5722",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "#ff5722",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1181,6 +2817,36 @@ exports[`renders FAB with containerColor override 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1207,15 +2873,30 @@ exports[`renders FAB with containerColor override 1`] = `
 
 exports[`renders FAB with default props 1`] = `
 <View
-  style={
-    [
-      undefined,
-      {
-        "transformOrigin": "center",
-      },
-      {
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
         "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
         "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1225,6 +2906,28 @@ exports[`renders FAB with default props 1`] = `
         ],
         "width": 56,
       },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
       {
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
@@ -1234,25 +2937,196 @@ exports[`renders FAB with default props 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
-  testID="floating-action-button-container"
->
-  <View
-    style={
-      [
-        {
-          "height": "100%",
-          "overflow": "hidden",
-          "width": "100%",
-        },
-        {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-        },
+  style={
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
+  testID="floating-action-button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+        },
       ]
     }
   >
@@ -1353,6 +3227,36 @@ exports[`renders FAB with default props 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1379,15 +3283,80 @@ exports[`renders FAB with default props 1`] = `
 
 exports[`renders FAB with primary variant 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(103, 80, 164, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1397,6 +3366,26 @@ 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": undefined,
+        "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 +3395,137 @@ exports[`renders FAB with primary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1525,6 +3637,36 @@ exports[`renders FAB with primary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1540,52 +3682,260 @@ exports[`renders FAB with primary variant 1`] = `
           "borderColor": "rgba(98, 91, 113, 1)",
         },
         {
-          "borderRadius": 21,
-          "opacity": 0,
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`renders FAB with secondary variant 1`] = `
+<View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(98, 91, 113, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
+  style={
+    [
+      {},
+      undefined,
+      {
+        "transformOrigin": "center",
+      },
+      {
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+      {
+        "pointerEvents": "auto",
+      },
+      {
+        "backgroundColor": "rgba(98, 91, 113, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
+  testID="floating-action-button-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(98, 91, 113, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
         },
       ]
     }
+    testID="floating-action-button-container-shadow-layer"
   />
-</View>
-`;
-
-exports[`renders FAB with secondary variant 1`] = `
-<View
-  style={
-    [
-      undefined,
-      {
-        "transformOrigin": "center",
-      },
+  <View
+    collapsable={false}
+    jestAnimatedProps={
       {
-        "backgroundColor": "rgba(98, 91, 113, 1)",
-        "borderRadius": 16,
-        "height": 56,
-        "opacity": 1,
-        "transform": [
-          {
-            "scale": 1,
-          },
-        ],
-        "width": 56,
-      },
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
       {
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 3.33,
-          "width": 0,
+        "value": {
+          "backgroundColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 16,
         },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 4.75,
-      },
-      {
-        "pointerEvents": "auto",
-      },
-    ]
-  }
-  testID="floating-action-button-container"
->
-  <View
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1697,6 +4047,36 @@ exports[`renders FAB with secondary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1723,15 +4103,80 @@ exports[`renders FAB with secondary variant 1`] = `
 
 exports[`renders FAB with tertiary variant 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(125, 82, 96, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(125, 82, 96, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1741,6 +4186,26 @@ 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": undefined,
+        "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 +4215,137 @@ exports[`renders FAB with tertiary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(125, 82, 96, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(125, 82, 96, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1869,41 +4457,136 @@ exports[`renders FAB with tertiary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
-          "borderWidth": 3,
-          "bottom": -5,
-          "left": -5,
-          "pointerEvents": "none",
-          "position": "absolute",
-          "right": -5,
-          "top": -5,
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+        {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`renders FAB with tonalSecondary variant 1`] = `
+<View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
         },
         {
-          "borderColor": "rgba(98, 91, 113, 1)",
+          "pointerEvents": "auto",
         },
-        {
-          "borderRadius": 21,
-          "opacity": 0,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
         },
-      ]
-    }
-  />
-</View>
-`;
-
-exports[`renders FAB with tonalSecondary variant 1`] = `
-<View
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -1913,6 +4596,26 @@ 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": undefined,
+        "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 +4625,137 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(232, 222, 248, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -2041,6 +4867,36 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -2067,15 +4923,80 @@ exports[`renders FAB with tonalSecondary variant 1`] = `
 
 exports[`renders FAB with tonalTertiary variant 1`] = `
 <View
+  collapsable={false}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(255, 216, 228, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 16,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
+        "height": 56,
+        "opacity": 1,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+        "width": 56,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        undefined,
+        {
+          "transformOrigin": "center",
+        },
+        {
+          "pointerEvents": "auto",
+        },
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 3.33,
+          "width": 0,
+        },
+        "shadowOpacity": 0.19,
+        "shadowRadius": 4.75,
+      },
+    ]
+  }
   style={
     [
+      {},
       undefined,
       {
         "transformOrigin": "center",
       },
       {
-        "backgroundColor": "rgba(255, 216, 228, 1)",
-        "borderRadius": 16,
         "height": 56,
         "opacity": 1,
         "transform": [
@@ -2085,6 +5006,26 @@ 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": undefined,
+        "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 +5035,137 @@ exports[`renders FAB with tonalTertiary variant 1`] = `
         "shadowOpacity": 0.19,
         "shadowRadius": 4.75,
       },
-      {
-        "pointerEvents": "auto",
-      },
     ]
   }
   testID="floating-action-button-container"
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(255, 216, 228, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.039,
+          "shadowRadius": 1.5,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
+        },
+      ]
+    }
+    testID="floating-action-button-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(255, 216, 228, 1)",
+          "borderRadius": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": "100%",
+          "overflow": "hidden",
+          "width": "100%",
+        },
+      ]
+    }
     style={
       [
         {
@@ -2213,6 +5277,36 @@ exports[`renders FAB with tonalTertiary variant 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "borderRadius": 21,
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderWidth": 3,
+          "bottom": -5,
+          "left": -5,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "right": -5,
+          "top": -5,
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+        },
+      ]
+    }
     style={
       [
         {
diff --git a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
index d159f82912..0d68c8d6c1 100644
--- a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap
@@ -3,15 +3,80 @@
 exports[`renders extended FAB collapsed 1`] = `
 <>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "height": 56,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 56,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          undefined,
+          {
+            "transformOrigin": "center",
+          },
+          {
+            "pointerEvents": "auto",
+          },
+        ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 1,
           "transform": [
@@ -21,6 +86,26 @@ 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": undefined,
+          "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 +115,137 @@ exports[`renders extended FAB collapsed 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+          },
+        ]
+      }
+      testID="extended-floating-action-button-container-shadow-layer"
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+        ]
+      }
       style={
         [
           {
@@ -143,6 +351,29 @@ exports[`renders extended FAB collapsed 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -183,6 +414,36 @@ exports[`renders extended FAB collapsed 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+        ]
+      }
       style={
         [
           {
@@ -207,8 +468,20 @@ exports[`renders extended FAB collapsed 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
-    style={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
       {
         "alignSelf": "flex-start",
         "opacity": 0,
@@ -216,6 +489,16 @@ exports[`renders extended FAB collapsed 1`] = `
         "position": "absolute",
       }
     }
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
   >
     <Text
       collapsable={false}
@@ -242,15 +525,80 @@ exports[`renders extended FAB collapsed 1`] = `
 exports[`renders extended FAB expanded 1`] = `
 <>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "height": 56,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 56,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          undefined,
+          {
+            "transformOrigin": "center",
+          },
+          {
+            "pointerEvents": "auto",
+          },
+        ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 1,
           "transform": [
@@ -260,6 +608,26 @@ 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": undefined,
+          "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,31 +637,154 @@ exports[`renders extended FAB expanded 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
       style={
         [
           {
-            "height": "100%",
-            "overflow": "hidden",
-            "width": "100%",
+            "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": undefined,
+            "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
-        accessibilityLabel="New message"
-        accessibilityState={
+      testID="extended-floating-action-button-container-shadow-layer"
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+        ]
+      }
+      style={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="New message"
+        accessibilityState={
           {
             "busy": undefined,
             "checked": undefined,
@@ -382,6 +873,29 @@ exports[`renders extended FAB expanded 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -422,6 +936,36 @@ exports[`renders extended FAB expanded 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+        ]
+      }
       style={
         [
           {
@@ -446,8 +990,20 @@ exports[`renders extended FAB expanded 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
-    style={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
       {
         "alignSelf": "flex-start",
         "opacity": 0,
@@ -455,6 +1011,16 @@ exports[`renders extended FAB expanded 1`] = `
         "position": "absolute",
       }
     }
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
   >
     <Text
       collapsable={false}
@@ -481,15 +1047,80 @@ exports[`renders extended FAB expanded 1`] = `
 exports[`renders extended FAB large size 1`] = `
 <>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "height": 96,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 96,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          undefined,
+          {
+            "transformOrigin": "center",
+          },
+          {
+            "pointerEvents": "auto",
+          },
+        ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 28,
           "height": 96,
           "opacity": 1,
           "transform": [
@@ -499,6 +1130,26 @@ 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": undefined,
+          "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 +1159,137 @@ exports[`renders extended FAB large size 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 28,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+          },
+        ]
+      }
+      testID="extended-floating-action-button-container-shadow-layer"
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 28,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+        ]
+      }
       style={
         [
           {
@@ -621,6 +1395,29 @@ exports[`renders extended FAB large size 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "marginStart": 16,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -661,6 +1458,36 @@ exports[`renders extended FAB large size 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "borderRadius": 33,
+            "opacity": 0,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+        ]
+      }
       style={
         [
           {
@@ -685,8 +1512,20 @@ exports[`renders extended FAB large size 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
-    style={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
       {
         "alignSelf": "flex-start",
         "opacity": 0,
@@ -694,8 +1533,18 @@ exports[`renders extended FAB large size 1`] = `
         "position": "absolute",
       }
     }
-  >
-    <Text
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Text
       collapsable={false}
       numberOfLines={1}
       style={
@@ -720,15 +1569,80 @@ exports[`renders extended FAB large size 1`] = `
 exports[`renders extended FAB medium size 1`] = `
 <>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 20,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "height": 80,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 80,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          undefined,
+          {
+            "transformOrigin": "center",
+          },
+          {
+            "pointerEvents": "auto",
+          },
+        ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 20,
           "height": 80,
           "opacity": 1,
           "transform": [
@@ -738,6 +1652,26 @@ 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": undefined,
+          "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 +1681,137 @@ exports[`renders extended FAB medium size 1`] = `
           "shadowOpacity": 0.19,
           "shadowRadius": 4.75,
         },
-        {
-          "pointerEvents": "auto",
-        },
       ]
     }
     testID="extended-floating-action-button-container"
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 20,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+          },
+        ]
+      }
+      testID="extended-floating-action-button-container-shadow-layer"
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 20,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+        ]
+      }
       style={
         [
           {
@@ -860,6 +1917,29 @@ exports[`renders extended FAB medium size 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "marginStart": 12,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -900,6 +1980,36 @@ exports[`renders extended FAB medium size 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "borderRadius": 25,
+            "opacity": 0,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+        ]
+      }
       style={
         [
           {
@@ -924,8 +2034,20 @@ exports[`renders extended FAB medium size 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
-    style={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
       {
         "alignSelf": "flex-start",
         "opacity": 0,
@@ -933,6 +2055,16 @@ exports[`renders extended FAB medium size 1`] = `
         "position": "absolute",
       }
     }
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
   >
     <Text
       collapsable={false}
@@ -959,15 +2091,80 @@ exports[`renders extended FAB medium size 1`] = `
 exports[`renders extended FAB not visible 1`] = `
 <>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "height": 56,
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 56,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          undefined,
+          {
+            "transformOrigin": "center",
+          },
+          {
+            "pointerEvents": "none",
+          },
+        ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 0,
           "transform": [
@@ -978,22 +2175,165 @@ exports[`renders extended FAB not visible 1`] = `
           "width": 56,
         },
         {
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 3.33,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 4.75,
-        },
+          "pointerEvents": "none",
+        },
+        {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
+    testID="extended-floating-action-button-container"
+  >
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+          },
+        ]
+      }
+      testID="extended-floating-action-button-container-shadow-layer"
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
         {
-          "pointerEvents": "none",
-        },
-      ]
-    }
-    testID="extended-floating-action-button-container"
-  >
-    <View
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+        ]
+      }
       style={
         [
           {
@@ -1099,6 +2439,29 @@ exports[`renders extended FAB not visible 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1139,6 +2502,36 @@ exports[`renders extended FAB not visible 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+        ]
+      }
       style={
         [
           {
@@ -1163,8 +2556,20 @@ exports[`renders extended FAB not visible 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
-    style={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
       {
         "alignSelf": "flex-start",
         "opacity": 0,
@@ -1172,6 +2577,16 @@ exports[`renders extended FAB not visible 1`] = `
         "position": "absolute",
       }
     }
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
   >
     <Text
       collapsable={false}
@@ -1198,15 +2613,80 @@ exports[`renders extended FAB not visible 1`] = `
 exports[`renders extended FAB transitioning to collapsed 1`] = `
 <>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 16,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "height": 56,
+          "opacity": 1,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 56,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          undefined,
+          {
+            "transformOrigin": "center",
+          },
+          {
+            "pointerEvents": "auto",
+          },
+        ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 3.33,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 4.75,
+        },
+      ]
+    }
     style={
       [
+        {},
         undefined,
         {
           "transformOrigin": "center",
         },
         {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
           "height": 56,
           "opacity": 1,
           "transform": [
@@ -1216,6 +2696,26 @@ 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": undefined,
+          "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 +2725,137 @@ 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}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 16,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 1.5,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+          },
+        ]
+      }
+      testID="extended-floating-action-button-container-shadow-layer"
+    />
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(234, 221, 255, 1)",
+            "borderRadius": 16,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "height": "100%",
+            "overflow": "hidden",
+            "width": "100%",
+          },
+        ]
+      }
       style={
         [
           {
@@ -1338,13 +2961,36 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
             plus
           </Text>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "marginStart": 8,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+              ]
+            }
             style={
               [
                 {
                   "marginStart": 8,
                 },
                 {
-                  "opacity": 0,
+                  "opacity": 1,
                 },
                 {
                   "pointerEvents": "none",
@@ -1378,6 +3024,36 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
       </View>
     </View>
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "borderRadius": 21,
+            "opacity": 0,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderWidth": 3,
+            "bottom": -5,
+            "left": -5,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": -5,
+            "top": -5,
+          },
+          {
+            "borderColor": "rgba(98, 91, 113, 1)",
+          },
+        ]
+      }
       style={
         [
           {
@@ -1402,8 +3078,20 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
   </View>
   <View
     aria-hidden={true}
+    collapsable={false}
+    forwardedRef={[Function]}
     importantForAccessibility="no-hide-descendants"
-    style={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
       {
         "alignSelf": "flex-start",
         "opacity": 0,
@@ -1411,6 +3099,16 @@ exports[`renders extended FAB transitioning to collapsed 1`] = `
         "position": "absolute",
       }
     }
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "opacity": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+      ]
+    }
   >
     <Text
       collapsable={false}
diff --git a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
index d48d6e3666..01858a2d28 100644
--- a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap
@@ -56,7 +56,36 @@ exports[`renders FAB.Menu closed 1`] = `
     >
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
         style={
           [
             {
@@ -162,6 +191,26 @@ exports[`renders FAB.Menu closed 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -196,6 +245,36 @@ exports[`renders FAB.Menu closed 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -221,7 +300,36 @@ exports[`renders FAB.Menu closed 1`] = `
       </View>
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
         style={
           [
             {
@@ -327,6 +435,26 @@ exports[`renders FAB.Menu closed 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -361,6 +489,36 @@ exports[`renders FAB.Menu closed 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -403,23 +561,108 @@ exports[`renders FAB.Menu closed 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 16,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              undefined,
+              {
+                "transformOrigin": "center",
+              },
+              {
+                "pointerEvents": "auto",
+              },
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
         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": undefined,
+              "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 +673,137 @@ exports[`renders FAB.Menu closed 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 16,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
+              },
+            ]
+          }
+          testID="fab-shell-container-shadow-layer"
+        />
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderRadius": 16,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
           style={
             [
               {
@@ -447,13 +813,26 @@ exports[`renders FAB.Menu closed 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 16,
               },
             ]
           }
         >
           <View
-            style={
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
               [
                 {
                   "bottom": 0,
@@ -466,13 +845,8 @@ exports[`renders FAB.Menu closed 1`] = `
                 {
                   "backgroundColor": "rgba(234, 221, 255, 1)",
                 },
-                {
-                  "opacity": 1,
-                },
               ]
             }
-          />
-          <View
             style={
               [
                 {
@@ -484,30 +858,78 @@ exports[`renders FAB.Menu closed 1`] = `
                   "top": 0,
                 },
                 {
-                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
                 },
                 {
-                  "opacity": 0,
+                  "opacity": 1,
                 },
               ]
             }
           />
           <View
-            accessibilityState={
+            collapsable={false}
+            jestAnimatedProps={
               {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
+                "value": {},
               }
             }
-            accessibilityValue={
+            jestAnimatedStyle={
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": true,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
             accessible={true}
@@ -549,6 +971,37 @@ exports[`renders FAB.Menu closed 1`] = `
               }
             >
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -561,10 +1014,10 @@ exports[`renders FAB.Menu closed 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -602,6 +1055,37 @@ exports[`renders FAB.Menu closed 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -614,10 +1098,10 @@ exports[`renders FAB.Menu closed 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -658,6 +1142,36 @@ exports[`renders FAB.Menu closed 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "borderRadius": 21,
+                "opacity": 0,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+            ]
+          }
           style={
             [
               {
@@ -673,7 +1187,7 @@ exports[`renders FAB.Menu closed 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 21,
                 "opacity": 0,
               },
             ]
@@ -741,7 +1255,36 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
     >
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
         style={
           [
             {
@@ -847,6 +1390,26 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -881,6 +1444,36 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -906,7 +1499,36 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
       </View>
       <View
         aria-hidden={true}
+        collapsable={false}
         importantForAccessibility="no-hide-descendants"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 0,
+              "transform": [
+                {
+                  "scaleX": 0,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "none",
+            },
+          ]
+        }
         style={
           [
             {
@@ -1012,6 +1634,26 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -1046,6 +1688,36 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1088,41 +1760,249 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
       }
     >
       <View
-        style={
-          [
-            undefined,
-            {
-              "transformOrigin": "center",
-            },
-            {
-              "backgroundColor": "transparent",
-              "borderRadius": undefined,
-              "height": undefined,
-              "opacity": 0,
-              "transform": [
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 16,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+              "height": 56,
+              "opacity": 0,
+              "transform": [
                 {
                   "scale": 0,
                 },
               ],
-              "width": undefined,
+              "width": 56,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
             },
+            [
+              undefined,
+              {
+                "transformOrigin": "center",
+              },
+              {
+                "pointerEvents": "none",
+              },
+            ],
             {
               "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 3.33,
                 "width": 0,
               },
-              "shadowOpacity": 0,
+              "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
+          ]
+        }
+        style={
+          [
+            {},
+            undefined,
+            {
+              "transformOrigin": "center",
+            },
+            {
+              "height": 56,
+              "opacity": 0,
+              "transform": [
+                {
+                  "scale": 0,
+                },
+              ],
+              "width": 56,
+            },
             {
               "pointerEvents": "none",
             },
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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.19,
+              "shadowRadius": 4.75,
+            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 16,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
+              },
+            ]
+          }
+          testID="fab-shell-container-shadow-layer"
+        />
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderRadius": 16,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
           style={
             [
               {
@@ -1132,12 +2012,40 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 16,
               },
             ]
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1158,6 +2066,34 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1234,6 +2170,37 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
               }
             >
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -1246,10 +2213,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 +2254,37 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -1299,10 +2297,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 +2341,36 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "borderRadius": 21,
+                "opacity": 0,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+            ]
+          }
           style={
             [
               {
@@ -1358,7 +2386,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,7 +2454,36 @@ exports[`renders FAB.Menu open 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -1532,7 +2589,18 @@ exports[`renders FAB.Menu open 1`] = `
                 }
               >
                 <View
-                  style={
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
                     [
                       null,
                       undefined,
@@ -1541,12 +2609,21 @@ exports[`renders FAB.Menu open 1`] = `
                       },
                     ]
                   }
-                >
-                  <Text
-                    collapsable={false}
-                    selectable={false}
-                    style={
-                      {
+                  style={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    selectable={false}
+                    style={
+                      {
                         "color": "rgba(33, 0, 93, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
@@ -1566,6 +2643,36 @@ exports[`renders FAB.Menu open 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1591,7 +2698,36 @@ exports[`renders FAB.Menu open 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -1697,6 +2833,26 @@ exports[`renders FAB.Menu open 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -1731,6 +2887,36 @@ exports[`renders FAB.Menu open 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1773,23 +2959,108 @@ exports[`renders FAB.Menu open 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              undefined,
+              {
+                "transformOrigin": "center",
+              },
+              {
+                "pointerEvents": "auto",
+              },
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
         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": undefined,
+              "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 +3071,137 @@ exports[`renders FAB.Menu open 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
+              },
+            ]
+          }
+          testID="fab-shell-container-shadow-layer"
+        />
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
           style={
             [
               {
@@ -1817,12 +3211,40 @@ exports[`renders FAB.Menu open 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1843,6 +3265,34 @@ exports[`renders FAB.Menu open 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -1919,6 +3369,37 @@ exports[`renders FAB.Menu open 1`] = `
               }
             >
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -1931,10 +3412,10 @@ exports[`renders FAB.Menu open 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -1972,6 +3453,37 @@ exports[`renders FAB.Menu open 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -1984,10 +3496,10 @@ exports[`renders FAB.Menu open 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -2028,6 +3540,36 @@ exports[`renders FAB.Menu open 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+            ]
+          }
           style={
             [
               {
@@ -2043,7 +3585,7 @@ exports[`renders FAB.Menu open 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -2111,7 +3653,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -2217,6 +3788,26 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -2251,6 +3842,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -2276,7 +3897,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -2382,6 +4032,26 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -2416,6 +4086,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -2441,7 +4141,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -2547,6 +4276,26 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -2581,6 +4330,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -2606,7 +4385,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -2712,6 +4520,26 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -2746,6 +4574,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -2771,7 +4629,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -2877,6 +4764,26 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -2911,6 +4818,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -2936,7 +4873,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -3042,6 +5008,26 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -3076,6 +5062,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -3118,23 +5134,108 @@ exports[`renders FAB.Menu with 6 items 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              undefined,
+              {
+                "transformOrigin": "center",
+              },
+              {
+                "pointerEvents": "auto",
+              },
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
         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": undefined,
+              "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 +5246,137 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
+              },
+            ]
+          }
+          testID="fab-shell-container-shadow-layer"
+        />
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
           style={
             [
               {
@@ -3162,12 +5386,40 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -3188,6 +5440,34 @@ exports[`renders FAB.Menu with 6 items 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -3264,6 +5544,37 @@ exports[`renders FAB.Menu with 6 items 1`] = `
               }
             >
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -3276,10 +5587,10 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -3317,6 +5628,37 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -3329,10 +5671,10 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -3373,6 +5715,36 @@ exports[`renders FAB.Menu with 6 items 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+            ]
+          }
           style={
             [
               {
@@ -3388,7 +5760,7 @@ exports[`renders FAB.Menu with 6 items 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -3457,7 +5829,36 @@ exports[`renders FAB.Menu with center alignment 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "center",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -3563,6 +5964,26 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -3597,6 +6018,36 @@ exports[`renders FAB.Menu with center alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -3622,7 +6073,36 @@ exports[`renders FAB.Menu with center alignment 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "center",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -3728,6 +6208,26 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -3762,6 +6262,36 @@ exports[`renders FAB.Menu with center alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -3804,23 +6334,108 @@ exports[`renders FAB.Menu with center alignment 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              undefined,
+              {
+                "transformOrigin": "center",
+              },
+              {
+                "pointerEvents": "auto",
+              },
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
         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": undefined,
+              "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 +6446,137 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
+              },
+            ]
+          }
+          testID="fab-shell-container-shadow-layer"
+        />
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
           style={
             [
               {
@@ -3848,12 +6586,40 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -3865,15 +6631,43 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                   "top": 0,
                 },
                 {
-                  "backgroundColor": "rgba(234, 221, 255, 1)",
-                },
-                {
-                  "opacity": 0,
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
+            }
+          />
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
                 },
               ]
             }
-          />
-          <View
             style={
               [
                 {
@@ -3950,6 +6744,37 @@ exports[`renders FAB.Menu with center alignment 1`] = `
               }
             >
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -3962,10 +6787,10 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -4003,6 +6828,37 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -4015,10 +6871,10 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -4059,6 +6915,36 @@ exports[`renders FAB.Menu with center alignment 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+            ]
+          }
           style={
             [
               {
@@ -4074,7 +6960,7 @@ exports[`renders FAB.Menu with center alignment 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -4142,7 +7028,36 @@ exports[`renders FAB.Menu with items having icons 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -4276,6 +7191,28 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                   email
                 </Text>
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      {
+                        "marginStart": 8,
+                      },
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       {
@@ -4311,6 +7248,36 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -4336,7 +7303,36 @@ exports[`renders FAB.Menu with items having icons 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "right",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -4470,6 +7466,28 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                   bell
                 </Text>
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      {
+                        "marginStart": 8,
+                      },
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       {
@@ -4505,6 +7523,36 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -4547,23 +7595,108 @@ exports[`renders FAB.Menu with items having icons 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              undefined,
+              {
+                "transformOrigin": "center",
+              },
+              {
+                "pointerEvents": "auto",
+              },
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
         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": undefined,
+              "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 +7707,137 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
+              },
+            ]
+          }
+          testID="fab-shell-container-shadow-layer"
+        />
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
           style={
             [
               {
@@ -4591,12 +7847,40 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -4617,6 +7901,34 @@ exports[`renders FAB.Menu with items having icons 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -4693,6 +8005,37 @@ exports[`renders FAB.Menu with items having icons 1`] = `
               }
             >
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -4705,10 +8048,10 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -4746,6 +8089,37 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -4758,10 +8132,10 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -4802,6 +8176,36 @@ exports[`renders FAB.Menu with items having icons 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+            ]
+          }
           style={
             [
               {
@@ -4817,7 +8221,7 @@ exports[`renders FAB.Menu with items having icons 1`] = `
                 "borderColor": "rgba(98, 91, 113, 1)",
               },
               {
-                "borderRadius": NaN,
+                "borderRadius": 33,
                 "opacity": 0,
               },
             ]
@@ -4885,7 +8289,36 @@ exports[`renders FAB.Menu with start alignment 1`] = `
     >
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 4,
+              "transformOrigin": "left",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -4991,6 +8424,26 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -5025,6 +8478,36 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -5050,7 +8533,36 @@ exports[`renders FAB.Menu with start alignment 1`] = `
       </View>
       <View
         aria-hidden={false}
+        collapsable={false}
         importantForAccessibility="yes"
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "scaleX": 1,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "marginBottom": 0,
+              "transformOrigin": "left",
+            },
+            {
+              "pointerEvents": "auto",
+            },
+          ]
+        }
         style={
           [
             {
@@ -5156,6 +8668,26 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                 }
               >
                 <View
+                  collapsable={false}
+                  jestAnimatedProps={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestAnimatedStyle={
+                    {
+                      "value": {},
+                    }
+                  }
+                  jestInlineStyle={
+                    [
+                      null,
+                      undefined,
+                      {
+                        "pointerEvents": "none",
+                      },
+                    ]
+                  }
                   style={
                     [
                       null,
@@ -5190,6 +8722,36 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             </View>
           </View>
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "borderWidth": 3,
+                  "bottom": -5,
+                  "left": -5,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": -5,
+                  "top": -5,
+                },
+                {
+                  "borderColor": "rgba(98, 91, 113, 1)",
+                  "borderRadius": 10004,
+                },
+              ]
+            }
             style={
               [
                 {
@@ -5232,23 +8794,108 @@ exports[`renders FAB.Menu with start alignment 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 28,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+              "height": 56,
+              "opacity": 1,
+              "transform": [
+                {
+                  "scale": 1,
+                },
+              ],
+              "width": 56,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              undefined,
+              {
+                "transformOrigin": "center",
+              },
+              {
+                "pointerEvents": "auto",
+              },
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 3.33,
+                "width": 0,
+              },
+              "shadowOpacity": 0.19,
+              "shadowRadius": 4.75,
+            },
+          ]
+        }
         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": undefined,
+              "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 +8906,137 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               "shadowOpacity": 0.19,
               "shadowRadius": 4.75,
             },
-            {
-              "pointerEvents": "auto",
-            },
           ]
         }
         testID="fab-shell-container"
       >
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 28,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.039,
+                "shadowRadius": 1.5,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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,
+              },
+            ]
+          }
+          testID="fab-shell-container-shadow-layer"
+        />
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderRadius": 28,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
           style={
             [
               {
@@ -5276,12 +9046,40 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               },
               {
                 "backgroundColor": "transparent",
-                "borderRadius": undefined,
+                "borderRadius": 28,
               },
             ]
           }
         >
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 0,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(234, 221, 255, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -5302,6 +9100,34 @@ exports[`renders FAB.Menu with start alignment 1`] = `
             }
           />
           <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "opacity": 1,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "pointerEvents": "none",
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "backgroundColor": "rgba(103, 80, 164, 1)",
+                },
+              ]
+            }
             style={
               [
                 {
@@ -5378,6 +9204,37 @@ exports[`renders FAB.Menu with start alignment 1`] = `
               }
             >
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 0,
+                      "transform": [
+                        {
+                          "translateX": 16,
+                        },
+                        {
+                          "translateY": 16,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -5390,10 +9247,10 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                       "opacity": 0,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 16,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 16,
                         },
                       ],
                     },
@@ -5431,6 +9288,37 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                 </Text>
               </View>
               <View
+                collapsable={false}
+                jestAnimatedProps={
+                  {
+                    "value": {},
+                  }
+                }
+                jestAnimatedStyle={
+                  {
+                    "value": {
+                      "opacity": 1,
+                      "transform": [
+                        {
+                          "translateX": 18,
+                        },
+                        {
+                          "translateY": 18,
+                        },
+                      ],
+                    },
+                  }
+                }
+                jestInlineStyle={
+                  [
+                    {
+                      "left": 0,
+                      "pointerEvents": "none",
+                      "position": "absolute",
+                      "top": 0,
+                    },
+                  ]
+                }
                 style={
                   [
                     {
@@ -5443,10 +9331,10 @@ exports[`renders FAB.Menu with start alignment 1`] = `
                       "opacity": 1,
                       "transform": [
                         {
-                          "translateX": NaN,
+                          "translateX": 18,
                         },
                         {
-                          "translateY": NaN,
+                          "translateY": 18,
                         },
                       ],
                     },
@@ -5487,6 +9375,36 @@ exports[`renders FAB.Menu with start alignment 1`] = `
           </View>
         </View>
         <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "borderRadius": 33,
+                "opacity": 0,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "borderWidth": 3,
+                "bottom": -5,
+                "left": -5,
+                "pointerEvents": "none",
+                "position": "absolute",
+                "right": -5,
+                "top": -5,
+              },
+              {
+                "borderColor": "rgba(98, 91, 113, 1)",
+              },
+            ]
+          }
           style={
             [
               {
@@ -5502,7 +9420,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..2601ddee1e 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -3,140 +3,149 @@
 exports[`renders disabled icon button 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "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,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "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,
+      },
+      undefined,
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
         "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      {
+        "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": 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>
@@ -145,140 +154,149 @@ exports[`renders disabled icon button 1`] = `
 exports[`renders icon button by default 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "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,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "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,
+      },
+      undefined,
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
         "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      {
+        "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": 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>
@@ -287,140 +305,149 @@ exports[`renders icon button by default 1`] = `
 exports[`renders icon button with color 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "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,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "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,
+      },
+      undefined,
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
         "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      {
+        "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": 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>
@@ -429,140 +456,149 @@ exports[`renders icon button with color 1`] = `
 exports[`renders icon button with size 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "transparent",
-      "borderRadius": 23,
-      "height": 46,
-      "margin": 6,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 46,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 46,
+        "width": 46,
+      },
       {
-        "backgroundColor": "transparent",
         "borderColor": "rgba(202, 196, 208, 1)",
         "borderRadius": 23,
         "borderWidth": 0,
-        "elevation": 0,
-        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
         "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      {
+        "backgroundColor": undefined,
+        "height": 46,
+        "width": 46,
+      },
+      {
+        "borderColor": "rgba(202, 196, 208, 1)",
+        "borderRadius": 23,
+        "borderWidth": 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,
+                  },
+                ],
               },
-              [
-                {
-                  "lineHeight": 30,
-                  "transform": [
-                    {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                {
-                  "backgroundColor": "transparent",
-                },
-              ],
-            ]
-          }
-        >
-          camera
-        </Text>
-      </View>
+              {
+                "backgroundColor": "transparent",
+              },
+            ],
+          ]
+        }
+      >
+        camera
+      </Text>
     </View>
   </View>
 </View>
@@ -571,173 +607,182 @@ exports[`renders icon button with size 1`] = `
 exports[`renders icon change animated 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "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,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "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,
+      },
+      undefined,
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
         "overflow": "hidden",
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
+      },
+      {
+        "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": 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,
+                },
+                [
+                  {
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
                   {
-                    "rotate": "0deg",
+                    "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..c3d0a5be5c 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -119,32 +119,101 @@ exports[`renders list item with custom description 1`] = `
         <View>
           <View
             collapsable={false}
-            style={
+            jestAnimatedProps={
               {
-                "backgroundColor": "rgba(232, 222, 248, 1)",
-                "borderRadius": 8,
-                "shadowColor": "rgba(0, 0, 0, 1)",
-                "shadowOffset": {
-                  "height": 0,
-                  "width": 0,
-                },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
+                "value": {},
               }
             }
-            testID="chip-container-outer-layer"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
+            jestAnimatedStyle={
+              {
+                "value": {
                   "backgroundColor": "rgba(232, 222, 248, 1)",
-                  "borderColor": "transparent",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
                   "borderRadius": 8,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "transitionDuration": 150,
+                  "transitionProperty": [
+                    "shadowOpacity",
+                    "shadowOffset",
+                    "shadowRadius",
+                  ],
+                  "transitionTimingFunction": "ease-in-out",
+                },
+                [
+                  {
+                    "borderStyle": "solid",
+                    "borderWidth": 0.5,
+                    "flexDirection": "column",
+                  },
+                  {
+                    "borderWidth": 1,
+                  },
+                  {
+                    "borderColor": "transparent",
+                  },
+                  undefined,
+                ],
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                },
+              ]
+            }
+            style={
+              [
+                {},
+                {
                   "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": undefined,
+                  "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,
@@ -152,170 +221,273 @@ exports[`renders list item with custom description 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
+                },
+              ]
+            }
+            testID="chip-container"
+          >
+            <View
+              collapsable={false}
+              jestAnimatedProps={
+                {
+                  "value": {},
                 }
               }
-              testID="chip-container"
-            >
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": false,
-                  }
+              jestAnimatedStyle={
+                {
+                  "value": {
+                    "backgroundColor": "rgba(232, 222, 248, 1)",
+                    "borderBottomEndRadius": undefined,
+                    "borderBottomLeftRadius": undefined,
+                    "borderBottomRightRadius": undefined,
+                    "borderBottomStartRadius": undefined,
+                    "borderCurve": undefined,
+                    "borderEndEndRadius": undefined,
+                    "borderEndStartRadius": undefined,
+                    "borderRadius": 8,
+                    "borderStartEndRadius": undefined,
+                    "borderStartStartRadius": undefined,
+                    "borderTopEndRadius": undefined,
+                    "borderTopLeftRadius": undefined,
+                    "borderTopRightRadius": undefined,
+                    "borderTopStartRadius": undefined,
+                  },
                 }
-                accessibilityValue={
+              }
+              jestInlineStyle={
+                [
                   {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  {
+                    "pointerEvents": "none",
+                  },
+                  {
+                    "transitionDuration": 150,
+                    "transitionProperty": [
+                      "shadowOpacity",
+                      "shadowOffset",
+                      "shadowRadius",
+                    ],
+                    "transitionTimingFunction": "ease-in-out",
+                  },
+                  {
+                    "shadowColor": "rgba(0, 0, 0, 1)",
+                    "shadowOffset": {
+                      "height": 0,
+                      "width": 0,
+                    },
+                    "shadowOpacity": 0,
+                    "shadowRadius": 0,
+                  },
+                ]
+              }
+              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": undefined,
+                    "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-shadow-layer"
+            />
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": false,
                 }
-                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"
+              }
+              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={
                   [
                     {
-                      "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..c2f0eb2e19 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -16,32 +16,97 @@ exports[`renders menu with content styles 1`] = `
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "backgroundColor": "transparent",
-            "borderRadius": 20,
-            "shadowColor": "rgba(0, 0, 0, 1)",
-            "shadowOffset": {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0,
-            "shadowRadius": 0,
+            "value": {},
           }
         }
-        testID="button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
+        jestAnimatedStyle={
+          {
+            "value": {
               "backgroundColor": "transparent",
-              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
               "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              undefined,
+              {
+                "borderColor": "rgba(202, 196, 208, 1)",
+                "borderWidth": 1,
+              },
+              undefined,
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {},
+            {
               "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": undefined,
+              "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,
@@ -49,118 +114,221 @@ exports[`renders menu with content styles 1`] = `
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
+            },
+          ]
+        }
+        testID="button-container"
+      >
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
             }
           }
-          testID="button-container"
-        >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": true,
-                "expanded": undefined,
-                "selected": undefined,
-              }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
             }
-            accessibilityValue={
+          }
+          jestInlineStyle={
+            [
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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-shadow-layer"
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": true,
+              "expanded": undefined,
+              "selected": 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"
+          }
+          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={
               [
                 {
-                  "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"
-              >
-                Open menu
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+              testID="button-text"
+            >
+              Open menu
+            </Text>
           </View>
         </View>
       </View>
@@ -244,69 +412,305 @@ exports[`renders menu with content styles 1`] = `
     >
       <View
         collapsable={false}
-        pointerEvents="box-none"
-        style={
+        jestAnimatedProps={
           {
-            "transform": [
-              {
-                "translateX": -0,
-              },
-              {
-                "translateY": -0,
-              },
-            ],
+            "value": {},
           }
         }
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {
+              "transform": [
+                {
+                  "translateX": -0,
+                },
+                {
+                  "translateY": -0,
+                },
+              ],
+            },
+          }
+        }
+        jestInlineStyle={{}}
+        pointerEvents="box-none"
+        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,
-              },
-              "shadowOpacity": 0.19,
-              "shadowRadius": 2.36,
               "transform": [
                 {
-                  "scaleX": 0,
+                  "translateX": -0,
                 },
                 {
-                  "scaleY": 0,
+                  "translateY": -0,
                 },
               ],
+            },
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
             }
           }
-          testID="menu-surface-outer-layer"
-        >
-          <View
-            collapsable={false}
-            pointerEvents="box-none"
-            style={
-              {
+          jestAnimatedStyle={
+            {
+              "value": {
                 "backgroundColor": "rgba(243, 237, 247, 1)",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 4,
-                "borderTopLeftRadius": 0,
-                "borderTopRightRadius": 0,
-                "flex": undefined,
-                "paddingVertical": 8,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              [
+                {
+                  "opacity": 0,
+                },
+                {
+                  "pointerEvents": "box-none",
+                },
+                {
+                  "borderRadius": 4,
+                },
+              ],
+              {
                 "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,
+              },
+            ]
+          }
+          style={
+            [
+              {},
+              {
+                "opacity": 0,
+              },
+              {
+                "pointerEvents": "box-none",
+              },
+              {
+                "borderRadius": 4,
+              },
+              {
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
+              },
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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}
+            jestAnimatedProps={
+              {
+                "value": {},
               }
             }
-            testID="menu-surface"
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 4,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {
+                  "transitionDuration": 150,
+                  "transitionProperty": [
+                    "shadowOpacity",
+                    "shadowOffset",
+                    "shadowRadius",
+                  ],
+                  "transitionTimingFunction": "ease-in-out",
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.75,
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "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-shadow-layer"
+          />
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {},
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "paddingVertical": 8,
+                },
+                false,
+                {
+                  "borderTopLeftRadius": 0,
+                  "borderTopRightRadius": 0,
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "paddingVertical": 8,
+                },
+                false,
+                {
+                  "borderTopLeftRadius": 0,
+                  "borderTopRightRadius": 0,
+                },
+              ]
+            }
+            testID="menu-surface-content"
           >
             <View
               accessibilityState={
@@ -579,32 +983,97 @@ exports[`renders not visible menu 1`] = `
   >
     <View
       collapsable={false}
-      style={
+      jestAnimatedProps={
         {
-          "backgroundColor": "transparent",
-          "borderRadius": 20,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
+          "value": {},
         }
       }
-      testID="button-container-outer-layer"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
+      jestAnimatedStyle={
+        {
+          "value": {
             "backgroundColor": "transparent",
-            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
             "borderRadius": 20,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          [
+            {
+              "borderStyle": "solid",
+              "minWidth": 64,
+            },
+            undefined,
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderWidth": 1,
+            },
+            undefined,
+          ],
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          },
+        ]
+      }
+      style={
+        [
+          {},
+          {
             "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": undefined,
+            "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,
@@ -612,10 +1081,450 @@ exports[`renders not visible menu 1`] = `
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
+          },
+        ]
+      }
+      testID="button-container"
+    >
+      <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        style={
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "pointerEvents": "none",
+            },
+            {},
+            {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "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-shadow-layer"
+      />
+      <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>
+`;
+
+exports[`renders visible menu 1`] = `
+<>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+    >
+      <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
+            },
+            [
+              {
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              undefined,
+              {
+                "borderColor": "rgba(202, 196, 208, 1)",
+                "borderWidth": 1,
+              },
+              undefined,
+            ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
+          ]
+        }
+        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": undefined,
+              "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}
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {},
+              {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "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"
-      >
+          testID="button-container-shadow-layer"
+        />
         <View
           accessibilityState={
             {
@@ -728,175 +1637,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"
@@ -975,65 +1715,299 @@ exports[`renders visible menu 1`] = `
     >
       <View
         collapsable={false}
-        pointerEvents="box-none"
-        style={
+        jestAnimatedProps={
           {
-            "transform": [
-              {
-                "translateX": -0,
-              },
-              {
-                "translateY": -0,
-              },
-            ],
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "transform": [
+                {
+                  "translateX": -0,
+                },
+                {
+                  "translateY": -0,
+                },
+              ],
+            },
           }
         }
+        jestInlineStyle={{}}
+        pointerEvents="box-none"
+        style={
+          [
+            {
+              "transform": [
+                {
+                  "translateX": -0,
+                },
+                {
+                  "translateY": -0,
+                },
+              ],
+            },
+          ]
+        }
       >
         <View
           collapsable={false}
-          style={
+          jestAnimatedProps={
             {
-              "backgroundColor": "rgba(243, 237, 247, 1)",
-              "borderRadius": 4,
-              "opacity": 0,
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 1.66,
-                "width": 0,
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 4,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
               },
-              "shadowOpacity": 0.19,
-              "shadowRadius": 2.36,
-              "transform": [
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              [
+                {
+                  "opacity": 0,
+                },
                 {
-                  "scaleX": 0,
+                  "pointerEvents": "box-none",
                 },
                 {
-                  "scaleY": 0,
+                  "borderRadius": 4,
                 },
               ],
-            }
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 1.66,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.19,
+                "shadowRadius": 2.36,
+              },
+            ]
           }
-          testID="menu-surface-outer-layer"
-        >
-          <View
-            collapsable={false}
-            pointerEvents="box-none"
-            style={
+          style={
+            [
+              {},
+              {
+                "opacity": 0,
+              },
+              {
+                "pointerEvents": "box-none",
+              },
+              {
+                "borderRadius": 4,
+              },
+              {
+                "opacity": 0,
+                "transform": [
+                  {
+                    "scaleX": 0,
+                  },
+                  {
+                    "scaleY": 0,
+                  },
+                ],
+              },
               {
                 "backgroundColor": "rgba(243, 237, 247, 1)",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
                 "borderRadius": 4,
-                "flex": undefined,
-                "paddingVertical": 8,
+                "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,
+              },
+            ]
+          }
+          testID="menu-surface"
+        >
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "borderEndEndRadius": undefined,
+                  "borderEndStartRadius": undefined,
+                  "borderRadius": 4,
+                  "borderStartEndRadius": undefined,
+                  "borderStartStartRadius": undefined,
+                  "borderTopEndRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "borderTopStartRadius": undefined,
+                },
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {
+                  "transitionDuration": 150,
+                  "transitionProperty": [
+                    "shadowOpacity",
+                    "shadowOffset",
+                    "shadowRadius",
+                  ],
+                  "transitionTimingFunction": "ease-in-out",
+                },
+                {
+                  "shadowColor": "rgba(0, 0, 0, 1)",
+                  "shadowOffset": {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.039,
+                  "shadowRadius": 0.75,
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                {
+                  "pointerEvents": "none",
+                },
+                {},
+                {
+                  "backgroundColor": "rgba(243, 237, 247, 1)",
+                  "borderBottomEndRadius": undefined,
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderBottomStartRadius": undefined,
+                  "borderCurve": undefined,
+                  "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-shadow-layer"
+          />
+          <View
+            collapsable={false}
+            jestAnimatedProps={
+              {
+                "value": {},
               }
             }
-            testID="menu-surface"
+            jestAnimatedStyle={
+              {
+                "value": {},
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "paddingVertical": 8,
+                },
+                false,
+                undefined,
+              ]
+            }
+            style={
+              [
+                {
+                  "paddingVertical": 8,
+                },
+                false,
+                undefined,
+              ]
+            }
+            testID="menu-surface-content"
           >
             <View
               accessibilityState={
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index 29b660cbd9..be93232d71 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -3,30 +3,87 @@
 exports[`activity indicator snapshot test 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(236, 230, 240, 1)",
-      "borderRadius": 28,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(236, 230, 240, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
   }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
       {
         "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+      {
         "backgroundColor": "rgba(236, 230, 240, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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 +91,102 @@ exports[`activity indicator snapshot test 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="search-bar-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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 +194,234 @@ exports[`activity indicator snapshot test 1`] = `
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+    testID="search-bar-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    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 +429,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 +443,8 @@ exports[`activity indicator snapshot test 1`] = `
             collapsable={false}
             style={
               {
-                "height": 24,
-                "transform": [
-                  {
-                    "rotate": "45deg",
-                  },
-                ],
+                "height": 12,
+                "overflow": "hidden",
                 "width": 24,
               }
             }
@@ -273,8 +453,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 +470,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 +480,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 +525,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 +536,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 +553,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 +563,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>
@@ -415,30 +584,87 @@ exports[`activity indicator snapshot test 1`] = `
 exports[`renders with placeholder 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
     {
-      "backgroundColor": "rgba(236, 230, 240, 1)",
-      "borderRadius": 28,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {
+        "backgroundColor": "rgba(236, 230, 240, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
   }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
       {
         "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+      {
         "backgroundColor": "rgba(236, 230, 240, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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,18 +672,102 @@ exports[`renders with placeholder 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="search-bar-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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,
@@ -465,319 +775,356 @@ exports[`renders with placeholder 1`] = `
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+    testID="search-bar-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
+          "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    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)"
-      style={
+  </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}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         [
           {
-            "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,
+            "margin": 6,
+            "overflow": "hidden",
+          },
+          {
+            "backgroundColor": undefined,
+            "height": 40,
+            "width": 40,
+          },
+          {
+            "borderColor": "rgba(202, 196, 208, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
           },
-          false,
+          undefined,
         ]
       }
-      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>
@@ -788,30 +1135,87 @@ exports[`renders with placeholder 1`] = `
 exports[`renders with text 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(236, 230, 240, 1)",
-      "borderRadius": 28,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "backgroundColor": "rgba(236, 230, 240, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "borderEndEndRadius": undefined,
+        "borderEndStartRadius": undefined,
+        "borderRadius": 28,
+        "borderStartEndRadius": undefined,
+        "borderStartStartRadius": undefined,
+        "borderTopEndRadius": undefined,
+        "borderTopLeftRadius": undefined,
+        "borderTopRightRadius": undefined,
+        "borderTopStartRadius": undefined,
       },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
     }
   }
-  testID="search-bar-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestInlineStyle={
+    [
+      {
+        "transitionDuration": 150,
+        "transitionProperty": [
+          "shadowOpacity",
+          "shadowOffset",
+          "shadowRadius",
+        ],
+        "transitionTimingFunction": "ease-in-out",
+      },
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ],
+      {
+        "shadowColor": "rgba(0, 0, 0, 1)",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      },
+    ]
+  }
+  style={
+    [
+      {},
       {
         "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+      {
         "backgroundColor": "rgba(236, 230, 240, 1)",
+        "borderBottomEndRadius": undefined,
+        "borderBottomLeftRadius": undefined,
+        "borderBottomRightRadius": undefined,
+        "borderBottomStartRadius": undefined,
+        "borderCurve": undefined,
+        "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 +1223,102 @@ exports[`renders with text 1`] = `
         },
         "shadowOpacity": 0,
         "shadowRadius": 0,
+      },
+    ]
+  }
+  testID="search-bar-container"
+>
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
       }
     }
-    testID="search-bar-container"
-  >
-    <View
-      collapsable={false}
-      style={
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(236, 230, 240, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 28,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "pointerEvents": "none",
+        },
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        },
+      ]
+    }
+    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": undefined,
+          "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 +1326,352 @@ exports[`renders with text 1`] = `
           },
           "shadowOpacity": 0,
           "shadowRadius": 0,
+        },
+      ]
+    }
+    testID="search-bar-container-shadow-layer"
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {},
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "margin": 6,
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+          "height": 40,
           "width": 40,
+        },
+        {
+          "borderColor": "rgba(202, 196, 208, 1)",
+          "borderRadius": 20,
+          "borderWidth": 0,
+        },
+        undefined,
+      ]
+    }
+    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)"
-      style={
+  </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}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         [
           {
-            "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,
+          {
+            "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-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..c57a68e66e 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -21,69 +21,244 @@ exports[`renders snackbar with Text as a child 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
-    style={
+    jestAnimatedProps={
       {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
         },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
+        [
+          {
+            "margin": 8,
+            "minHeight": 48,
+            "pointerEvents": "box-none",
+          },
           {
-            "scale": 0.9,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "minHeight": 48,
           },
+          undefined,
         ],
-      }
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
     }
-    testID="surface-outer-layer"
-  >
-    <View
-      aria-live="polite"
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
+    style={
+      [
+        {},
+        {
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
         {
-          "backgroundColor": "rgba(50, 47, 53, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
           "flexDirection": "row",
           "justifyContent": "space-between",
           "minHeight": 48,
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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}
+      jestAnimatedProps={
+        {
+          "value": {},
         }
       }
-      testID="surface"
-    >
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "marginHorizontal": 16,
-              "marginVertical": 14,
-            },
-            undefined,
-          ]
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
         }
-      >
-        <View>
-          <Text>
-            Snackbar content
-          </Text>
-        </View>
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+        ]
+      }
+    >
+      <View>
+        <Text>
+          Snackbar content
+        </Text>
       </View>
     </View>
   </View>
@@ -109,94 +284,269 @@ exports[`renders snackbar with View & Text as a child 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
-    style={
+    jestAnimatedProps={
       {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
         },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
+          {
+            "margin": 8,
+            "minHeight": 48,
+            "pointerEvents": "box-none",
+          },
           {
-            "scale": 0.9,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "minHeight": 48,
           },
+          undefined,
         ],
-      }
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
     }
-    testID="surface-outer-layer"
-  >
-    <View
-      aria-live="polite"
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
+    style={
+      [
+        {},
+        {
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
         {
-          "backgroundColor": "rgba(50, 47, 53, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
           "flexDirection": "row",
           "justifyContent": "space-between",
           "minHeight": 48,
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
         }
       }
-      testID="surface"
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+        ]
+      }
     >
-      <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 +573,380 @@ exports[`renders snackbar with action button 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
-    style={
+    jestAnimatedProps={
       {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
         },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
+        [
+          {
+            "margin": 8,
+            "minHeight": 48,
+            "pointerEvents": "box-none",
+          },
           {
-            "scale": 0.9,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "minHeight": 48,
           },
+          undefined,
         ],
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
+    }
+    style={
+      [
+        {},
+        {
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "minHeight": 48,
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        [
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          [
+            {
+              "fontFamily": "System",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0.25,
+              "lineHeight": 20,
+            },
+            [
+              {
+                "flex": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 14,
+              },
+              {
+                "color": "rgba(245, 239, 247, 1)",
+              },
+            ],
+          ],
+        ]
       }
-    }
-    testID="surface-outer-layer"
-  >
+    >
+      Snackbar content
+    </Text>
     <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",
-          "minHeight": 48,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "minHeight": 48,
           },
-          "shadowOpacity": 0.039,
-          "shadowRadius": 0.75,
-        }
+          {
+            "marginLeft": -12,
+          },
+        ]
       }
-      testID="surface"
     >
-      <Text
-        style={
-          [
-            {
-              "textAlign": "left",
+      <View
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "backgroundColor": "transparent",
+              "borderBottomEndRadius": undefined,
+              "borderBottomLeftRadius": undefined,
+              "borderBottomRightRadius": undefined,
+              "borderBottomStartRadius": undefined,
+              "borderCurve": undefined,
+              "borderEndEndRadius": undefined,
+              "borderEndStartRadius": undefined,
+              "borderRadius": 20,
+              "borderStartEndRadius": undefined,
+              "borderStartStartRadius": undefined,
+              "borderTopEndRadius": undefined,
+              "borderTopLeftRadius": undefined,
+              "borderTopRightRadius": undefined,
+              "borderTopStartRadius": undefined,
             },
+          }
+        }
+        jestInlineStyle={
+          [
             {
-              "color": "rgba(29, 27, 32, 1)",
-              "writingDirection": "ltr",
+              "transitionDuration": 150,
+              "transitionProperty": [
+                "shadowOpacity",
+                "shadowOffset",
+                "shadowRadius",
+              ],
+              "transitionTimingFunction": "ease-in-out",
             },
             [
               {
-                "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "borderStyle": "solid",
+                "minWidth": 64,
+              },
+              false,
+              {
+                "borderColor": "transparent",
+                "borderWidth": 0,
               },
               [
                 {
-                  "flex": 1,
-                  "marginHorizontal": 16,
-                  "marginVertical": 14,
-                },
-                {
-                  "color": "rgba(245, 239, 247, 1)",
+                  "marginLeft": 4,
+                  "marginRight": 8,
                 },
+                undefined,
               ],
             ],
+            {
+              "shadowColor": "rgba(0, 0, 0, 1)",
+              "shadowOffset": {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+            },
           ]
         }
-      >
-        Snackbar content
-      </Text>
-      <View
         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": undefined,
+              "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 +954,102 @@ exports[`renders snackbar with action button 1`] = `
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
+            },
+          ]
+        }
+        testID="button-container"
+      >
+        <View
+          collapsable={false}
+          jestAnimatedProps={
+            {
+              "value": {},
             }
           }
-          testID="button-container-outer-layer"
-        >
-          <View
-            collapsable={false}
-            style={
+          jestAnimatedStyle={
+            {
+              "value": {
+                "backgroundColor": "transparent",
+                "borderBottomEndRadius": undefined,
+                "borderBottomLeftRadius": undefined,
+                "borderBottomRightRadius": undefined,
+                "borderBottomStartRadius": undefined,
+                "borderCurve": undefined,
+                "borderEndEndRadius": undefined,
+                "borderEndStartRadius": undefined,
+                "borderRadius": 20,
+                "borderStartEndRadius": undefined,
+                "borderStartStartRadius": undefined,
+                "borderTopEndRadius": undefined,
+                "borderTopLeftRadius": undefined,
+                "borderTopRightRadius": undefined,
+                "borderTopStartRadius": undefined,
+              },
+            }
+          }
+          jestInlineStyle={
+            [
+              {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              {
+                "pointerEvents": "none",
+              },
+              {
+                "transitionDuration": 150,
+                "transitionProperty": [
+                  "shadowOpacity",
+                  "shadowOffset",
+                  "shadowRadius",
+                ],
+                "transitionTimingFunction": "ease-in-out",
+              },
+              {
+                "shadowColor": "rgba(0, 0, 0, 1)",
+                "shadowOffset": {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+              },
+            ]
+          }
+          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": undefined,
+                "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 +1057,117 @@ exports[`renders snackbar with action button 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-              }
+              },
+            ]
+          }
+          testID="button-container-shadow-layer"
+        />
+        <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,
                       },
+                      false,
+                      false,
                       {
-                        "color": "rgba(29, 27, 32, 1)",
-                        "writingDirection": "ltr",
+                        "color": "rgba(208, 188, 255, 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,
-                          },
-                          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>
+                      undefined,
+                    ],
+                  ],
+                ]
+              }
+              testID="button-text"
+            >
+              Undo
+            </Text>
           </View>
         </View>
       </View>
@@ -494,87 +1195,262 @@ exports[`renders snackbar with content 1`] = `
   }
 >
   <View
+    aria-live="polite"
     collapsable={false}
-    style={
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
       {
-        "backgroundColor": "rgba(50, 47, 53, 1)",
-        "borderRadius": 4,
-        "margin": 8,
-        "opacity": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 1.66,
-          "width": 0,
+        "value": {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "borderEndEndRadius": undefined,
+          "borderEndStartRadius": undefined,
+          "borderRadius": 4,
+          "borderStartEndRadius": undefined,
+          "borderStartStartRadius": undefined,
+          "borderTopEndRadius": undefined,
+          "borderTopLeftRadius": undefined,
+          "borderTopRightRadius": undefined,
+          "borderTopStartRadius": undefined,
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
         },
-        "shadowOpacity": 0.19,
-        "shadowRadius": 2.36,
-        "transform": [
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "transitionDuration": 150,
+          "transitionProperty": [
+            "shadowOpacity",
+            "shadowOffset",
+            "shadowRadius",
+          ],
+          "transitionTimingFunction": "ease-in-out",
+        },
+        [
           {
-            "scale": 0.9,
+            "margin": 8,
+            "minHeight": 48,
+            "pointerEvents": "box-none",
           },
+          {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "minHeight": 48,
+          },
+          undefined,
         ],
-      }
+        {
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 1.66,
+            "width": 0,
+          },
+          "shadowOpacity": 0.19,
+          "shadowRadius": 2.36,
+        },
+      ]
     }
-    testID="surface-outer-layer"
-  >
-    <View
-      aria-live="polite"
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
+    style={
+      [
+        {},
+        {
+          "margin": 8,
+          "minHeight": 48,
+          "pointerEvents": "box-none",
+        },
         {
-          "backgroundColor": "rgba(50, 47, 53, 1)",
-          "borderRadius": 4,
-          "flex": undefined,
           "flexDirection": "row",
           "justifyContent": "space-between",
           "minHeight": 48,
+        },
+        {
+          "opacity": 0,
+          "transform": [
+            {
+              "scale": 0.9,
+            },
+          ],
+        },
+        undefined,
+        {
+          "backgroundColor": "rgba(50, 47, 53, 1)",
+          "borderBottomEndRadius": undefined,
+          "borderBottomLeftRadius": undefined,
+          "borderBottomRightRadius": undefined,
+          "borderBottomStartRadius": undefined,
+          "borderCurve": undefined,
+          "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}
+      jestAnimatedProps={
+        {
+          "value": {},
         }
       }
-      testID="surface"
-    >
-      <Text
-        style={
-          [
-            {
-              "textAlign": "left",
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(50, 47, 53, 1)",
+            "borderBottomEndRadius": undefined,
+            "borderBottomLeftRadius": undefined,
+            "borderBottomRightRadius": undefined,
+            "borderBottomStartRadius": undefined,
+            "borderCurve": undefined,
+            "borderEndEndRadius": undefined,
+            "borderEndStartRadius": undefined,
+            "borderRadius": 4,
+            "borderStartEndRadius": undefined,
+            "borderStartStartRadius": undefined,
+            "borderTopEndRadius": undefined,
+            "borderTopLeftRadius": undefined,
+            "borderTopRightRadius": undefined,
+            "borderTopStartRadius": undefined,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "pointerEvents": "none",
+          },
+          {
+            "transitionDuration": 150,
+            "transitionProperty": [
+              "shadowOpacity",
+              "shadowOffset",
+              "shadowRadius",
+            ],
+            "transitionTimingFunction": "ease-in-out",
+          },
+          {
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.039,
+            "shadowRadius": 0.75,
+          },
+        ]
+      }
+      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": undefined,
+            "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,
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        [
+          {
+            "textAlign": "left",
+          },
+          {
+            "color": "rgba(29, 27, 32, 1)",
+            "writingDirection": "ltr",
+          },
+          [
             {
-              "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..632c74182b 100644
--- a/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -96,6 +96,42 @@ exports[`Switch render renders disabled off 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": -4,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(29, 27, 32, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -124,6 +160,39 @@ exports[`Switch render renders disabled off 1`] = `
     }
   />
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "height": 16,
+          "top": 12,
+          "transform": [
+            {
+              "translateX": 8,
+            },
+          ],
+          "width": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
     style={
       [
         {
@@ -166,6 +235,34 @@ exports[`Switch render renders disabled off 1`] = `
       }
     />
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(29, 27, 32, 1)",
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 0.38,
+          },
+        ]
+      }
       style={
         [
           {
@@ -187,6 +284,36 @@ exports[`Switch render renders disabled off 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+      ]
+    }
     style={
       [
         {
@@ -287,6 +414,42 @@ exports[`Switch render renders disabled on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -315,6 +478,39 @@ exports[`Switch render renders disabled on 1`] = `
     }
   />
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
     style={
       [
         {
@@ -357,6 +553,34 @@ exports[`Switch render renders disabled on 1`] = `
       }
     />
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
       style={
         [
           {
@@ -378,6 +602,36 @@ exports[`Switch render renders disabled on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+      ]
+    }
     style={
       [
         {
@@ -498,7 +752,25 @@ exports[`Switch render renders off 1`] = `
     </View>
   </View>
   <View
-    style={
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": -4,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
       [
         {
           "borderRadius": 9999,
@@ -514,45 +786,124 @@ exports[`Switch render renders off 1`] = `
         {
           "backgroundColor": "rgba(29, 27, 32, 1)",
         },
-        {
-          "opacity": 0,
-          "transform": [
-            {
-              "translateX": -4,
-            },
-          ],
-        },
       ]
     }
-  />
-  <View
     style={
       [
         {
-          "alignItems": "center",
-          "justifyContent": "center",
+          "borderRadius": 9999,
+          "height": 40,
           "pointerEvents": "none",
           "position": "absolute",
+          "top": 0,
+          "width": 40,
         },
         {
           "left": 0,
         },
         {
-          "height": 16,
-          "top": 12,
+          "backgroundColor": "rgba(29, 27, 32, 1)",
+        },
+        {
+          "opacity": 0,
           "transform": [
             {
-              "translateX": 8,
+              "translateX": -4,
             },
           ],
-          "width": 16,
         },
       ]
     }
-  >
-    <View
-      style={
-        [
+  />
+  <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "height": 16,
+          "top": 12,
+          "transform": [
+            {
+              "translateX": 8,
+            },
+          ],
+          "width": 16,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
+    style={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+        {
+          "height": 16,
+          "top": 12,
+          "transform": [
+            {
+              "translateX": 8,
+            },
+          ],
+          "width": 16,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(121, 116, 126, 1)",
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
+      style={
+        [
           {
             "borderRadius": 9999,
             "bottom": 0,
@@ -572,6 +923,36 @@ exports[`Switch render renders off 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+      ]
+    }
     style={
       [
         {
@@ -672,6 +1053,42 @@ exports[`Switch render renders on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -700,6 +1117,39 @@ exports[`Switch render renders on 1`] = `
     }
   />
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
     style={
       [
         {
@@ -725,6 +1175,34 @@ exports[`Switch render renders on 1`] = `
     }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
       style={
         [
           {
@@ -746,6 +1224,36 @@ exports[`Switch render renders on 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+      ]
+    }
     style={
       [
         {
@@ -846,6 +1354,42 @@ exports[`Switch render renders with checked icon 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -874,6 +1418,39 @@ exports[`Switch render renders with checked icon 1`] = `
     }
   />
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
     style={
       [
         {
@@ -899,6 +1476,34 @@ exports[`Switch render renders with checked icon 1`] = `
     }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
       style={
         [
           {
@@ -920,6 +1525,37 @@ exports[`Switch render renders with checked icon 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "translateX": 28,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": 16,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 12,
+          "width": 16,
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
     style={
       [
         {
@@ -990,6 +1626,36 @@ exports[`Switch render renders with checked icon 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+      ]
+    }
     style={
       [
         {
@@ -1090,6 +1756,42 @@ exports[`Switch render renders with per-state icons 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+          "transform": [
+            {
+              "translateX": 16,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "borderRadius": 9999,
+          "height": 40,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": 40,
+        },
+        {
+          "left": 0,
+        },
+        {
+          "backgroundColor": "rgba(103, 80, 164, 1)",
+        },
+      ]
+    }
     style={
       [
         {
@@ -1118,6 +1820,39 @@ exports[`Switch render renders with per-state icons 1`] = `
     }
   />
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "height": 24,
+          "top": 8,
+          "transform": [
+            {
+              "translateX": 24,
+            },
+          ],
+          "width": 24,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
     style={
       [
         {
@@ -1143,6 +1878,34 @@ exports[`Switch render renders with per-state icons 1`] = `
     }
   >
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "backgroundColor": "rgba(255, 255, 255, 1)",
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "borderRadius": 9999,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "opacity": 1,
+          },
+        ]
+      }
       style={
         [
           {
@@ -1164,6 +1927,37 @@ exports[`Switch render renders with per-state icons 1`] = `
     />
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "translateX": 28,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "height": 16,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 12,
+          "width": 16,
+        },
+        {
+          "left": 0,
+        },
+      ]
+    }
     style={
       [
         {
@@ -1234,6 +2028,36 @@ exports[`Switch render renders with per-state icons 1`] = `
     </View>
   </View>
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "opacity": 0,
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "pointerEvents": "none",
+          "position": "absolute",
+        },
+        {
+          "borderColor": "rgba(98, 91, 113, 1)",
+          "borderRadius": 9999,
+          "borderWidth": 3,
+          "bottom": -1,
+          "left": -5,
+          "right": -5,
+          "top": -1,
+        },
+      ]
+    }
     style={
       [
         {
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index c955c943e2..82a2853074 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -70,6 +70,39 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
       }
     />
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "transform": [
+              {
+                "scaleX": 0,
+              },
+            ],
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": 0,
+          },
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "height": 2,
+          },
+          false,
+        ]
+      }
       style={
         [
           {
@@ -96,6 +129,30 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
     />
     <View
       aria-hidden={true}
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "top": 16,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "pointerEvents": "none",
+            "position": "absolute",
+          },
+          {
+            "left": 52,
+          },
+        ]
+      }
       style={
         [
           {
@@ -106,12 +163,39 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
             "left": 52,
           },
           {
-            "top": undefined,
+            "top": 16,
           },
         ]
       }
     >
       <Text
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "fontSize": 12,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(73, 69, 79, 1)",
+            },
+            false,
+          ]
+        }
         style={
           [
             {
@@ -124,7 +208,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -143,151 +227,195 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
           }
         }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "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,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
+            },
+            [
+              {
+                "margin": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginStart": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "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
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
+      jestInlineStyle={
         [
           [
             {
@@ -298,6 +426,17 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
             },
             false,
           ],
+        ]
+      }
+      style={
+        [
+          {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -348,145 +487,176 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
           }
         }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "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,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
+            },
+            [
+              {
+                "margin": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginEnd": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "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 +742,39 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
       }
     />
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "transform": [
+              {
+                "scaleX": 0,
+              },
+            ],
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": 0,
+          },
+          {
+            "backgroundColor": "rgba(179, 38, 30, 1)",
+            "height": 2,
+          },
+          false,
+        ]
+      }
       style={
         [
           {
@@ -598,6 +801,30 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
     />
     <View
       aria-hidden={true}
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "top": 16,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "pointerEvents": "none",
+            "position": "absolute",
+          },
+          {
+            "left": 52,
+          },
+        ]
+      }
       style={
         [
           {
@@ -608,12 +835,39 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
             "left": 52,
           },
           {
-            "top": undefined,
+            "top": 16,
           },
         ]
       }
     >
       <Text
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "fontSize": 12,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(179, 38, 30, 1)",
+            },
+            false,
+          ]
+        }
         style={
           [
             {
@@ -626,7 +880,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
               "color": "rgba(179, 38, 30, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -645,151 +899,195 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            [
+              {
+                "margin": 0,
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginStart": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "marginStart": 12,
+              "width": 24,
+            },
+            false,
+          ]
+        }
+        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,
+            }
           }
-        }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
+          accessible={true}
+          centered={true}
           collapsable={false}
-          style={
+          focusable={true}
+          hitSlop={
             {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(202, 196, 208, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": 1,
-              "justifyContent": "center",
-              "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"
+          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",
+              },
+              [
+                {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="icon-button"
         >
           <View
-            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={
+            style={
               {
-                "bottom": 6,
-                "left": 6,
-                "right": 6,
-                "top": 6,
+                "opacity": 1,
               }
             }
-            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",
-                },
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
                 [
                   {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "color": "rgba(179, 38, 30, 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(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
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
+      jestInlineStyle={
         [
           [
             {
@@ -800,6 +1098,17 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
             },
             false,
           ],
+        ]
+      }
+      style={
+        [
+          {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -850,145 +1159,176 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
           }
         }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "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,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
+            },
+            [
+              {
+                "margin": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginEnd": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "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>
@@ -1074,6 +1414,39 @@ exports[`renders filled TextInput with label and value 1`] = `
       }
     />
     <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "transform": [
+              {
+                "scaleX": 0,
+              },
+            ],
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": 0,
+          },
+          {
+            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "height": 2,
+          },
+          false,
+        ]
+      }
       style={
         [
           {
@@ -1100,6 +1473,30 @@ exports[`renders filled TextInput with label and value 1`] = `
     />
     <View
       aria-hidden={true}
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "top": 16,
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "pointerEvents": "none",
+            "position": "absolute",
+          },
+          {
+            "left": 16,
+          },
+        ]
+      }
       style={
         [
           {
@@ -1110,12 +1507,39 @@ exports[`renders filled TextInput with label and value 1`] = `
             "left": 16,
           },
           {
-            "top": undefined,
+            "top": 16,
           },
         ]
       }
     >
       <Text
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "fontSize": 12,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(73, 69, 79, 1)",
+            },
+            false,
+          ]
+        }
         style={
           [
             {
@@ -1128,7 +1552,7 @@ exports[`renders filled TextInput with label and value 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -1138,7 +1562,20 @@ exports[`renders filled TextInput with label and value 1`] = `
       </Text>
     </View>
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
+      jestInlineStyle={
         [
           [
             {
@@ -1149,6 +1586,17 @@ exports[`renders filled TextInput with label and value 1`] = `
             },
             false,
           ],
+        ]
+      }
+      style={
+        [
+          {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -1252,24 +1700,55 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
       style={
         [
           {
-            "borderRadius": 4,
-            "bottom": 0,
-            "left": 0,
+            "borderRadius": 4,
+            "bottom": 0,
+            "left": 0,
+            "pointerEvents": "none",
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderWidth": 1,
+          },
+          false,
+        ]
+      }
+    />
+    <View
+      aria-hidden={true}
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "top": -12,
+            "transform": [
+              {
+                "translateX": -36,
+              },
+            ],
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "paddingHorizontal": 4,
             "pointerEvents": "none",
             "position": "absolute",
-            "right": 0,
-            "top": 0,
           },
           {
-            "borderColor": "rgba(121, 116, 126, 1)",
-            "borderWidth": 1,
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+            "left": 48,
           },
-          false,
         ]
       }
-    />
-    <View
-      aria-hidden={true}
       style={
         [
           {
@@ -1282,10 +1761,10 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
             "left": 48,
           },
           {
-            "top": undefined,
+            "top": -12,
             "transform": [
               {
-                "translateX": undefined,
+                "translateX": -36,
               },
             ],
           },
@@ -1293,6 +1772,33 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
       }
     >
       <Text
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "fontSize": 12,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(73, 69, 79, 1)",
+            },
+            false,
+          ]
+        }
         style={
           [
             {
@@ -1305,7 +1811,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -1324,151 +1830,195 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
           }
         }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "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,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
+            },
+            [
+              {
+                "margin": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginStart": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "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
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
+      jestInlineStyle={
         [
           [
             {
@@ -1479,6 +2029,17 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
             },
             false,
           ],
+        ]
+      }
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -1529,145 +2090,176 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
           }
         }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "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,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
+            },
+            [
+              {
+                "margin": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginEnd": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "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,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
                     },
-                    [
-                      {
-                        "lineHeight": 24,
-                        "transform": [
-                          {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                  ]
-                }
-              >
-                close
-              </Text>
-            </View>
+                  ],
+                ]
+              }
+            >
+              close
+            </Text>
           </View>
         </View>
       </View>
@@ -1753,6 +2345,37 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
     />
     <View
       aria-hidden={true}
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "top": -12,
+            "transform": [
+              {
+                "translateX": -36,
+              },
+            ],
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "paddingHorizontal": 4,
+            "pointerEvents": "none",
+            "position": "absolute",
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+            "left": 48,
+          },
+        ]
+      }
       style={
         [
           {
@@ -1765,10 +2388,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 +2399,33 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
       }
     >
       <Text
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "fontSize": 12,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(179, 38, 30, 1)",
+            },
+            false,
+          ]
+        }
         style={
           [
             {
@@ -1788,7 +2438,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
               "color": "rgba(179, 38, 30, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -1807,151 +2457,195 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
           }
         }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "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,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
+            },
+            [
+              {
+                "margin": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginStart": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "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
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
+      jestInlineStyle={
         [
           [
             {
@@ -1962,6 +2656,17 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
             },
             false,
           ],
+        ]
+      }
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+          },
+          false,
           {
             "opacity": 1,
           },
@@ -2012,145 +2717,176 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
     >
       <View
         collapsable={false}
-        style={
+        jestAnimatedProps={
           {
-            "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,
+            "value": {},
           }
         }
-        testID="icon-button-container-outer-layer"
-      >
-        <View
-          collapsable={false}
-          style={
+        jestAnimatedStyle={
+          {
+            "value": {},
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "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,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "shadowColor": "rgba(0, 0, 0, 1)",
-              "shadowOffset": {
-                "height": 0,
-                "width": 0,
+            },
+            [
+              {
+                "margin": 0,
               },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              [
+                {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "marginEnd": 12,
+                  "width": 24,
+                },
+                false,
+              ],
+            ],
+          ]
+        }
+        style={
+          [
+            {
+              "margin": 6,
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": undefined,
+              "height": 40,
+              "width": 40,
+            },
+            {
+              "borderColor": "rgba(202, 196, 208, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+            },
+            {
+              "margin": 0,
+            },
+            {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "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>
@@ -2236,6 +2972,37 @@ exports[`renders outlined TextInput with label and value 1`] = `
     />
     <View
       aria-hidden={true}
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "top": -12,
+            "transform": [
+              {
+                "translateX": -4,
+              },
+            ],
+          },
+        }
+      }
+      jestInlineStyle={
+        [
+          {
+            "paddingHorizontal": 4,
+            "pointerEvents": "none",
+            "position": "absolute",
+          },
+          {
+            "backgroundColor": "rgba(254, 247, 255, 1)",
+            "left": 16,
+          },
+        ]
+      }
       style={
         [
           {
@@ -2248,10 +3015,10 @@ exports[`renders outlined TextInput with label and value 1`] = `
             "left": 16,
           },
           {
-            "top": undefined,
+            "top": -12,
             "transform": [
               {
-                "translateX": undefined,
+                "translateX": -4,
               },
             ],
           },
@@ -2259,6 +3026,33 @@ exports[`renders outlined TextInput with label and value 1`] = `
       }
     >
       <Text
+        collapsable={false}
+        jestAnimatedProps={
+          {
+            "value": {},
+          }
+        }
+        jestAnimatedStyle={
+          {
+            "value": {
+              "fontSize": 12,
+            },
+          }
+        }
+        jestInlineStyle={
+          [
+            {
+              "fontWeight": "400",
+              "includeFontPadding": false,
+              "paddingHorizontal": 0,
+              "paddingVertical": 0,
+            },
+            {
+              "color": "rgba(73, 69, 79, 1)",
+            },
+            false,
+          ]
+        }
         style={
           [
             {
@@ -2271,7 +3065,7 @@ exports[`renders outlined TextInput with label and value 1`] = `
               "color": "rgba(73, 69, 79, 1)",
             },
             {
-              "fontSize": undefined,
+              "fontSize": 12,
             },
             false,
           ]
@@ -2281,7 +3075,20 @@ exports[`renders outlined TextInput with label and value 1`] = `
       </Text>
     </View>
     <View
-      style={
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
+      jestInlineStyle={
         [
           [
             {
@@ -2292,6 +3099,17 @@ exports[`renders outlined TextInput with label and value 1`] = `
             },
             false,
           ],
+        ]
+      }
+      style={
+        [
+          {
+            "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..0bd554affa 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -3,138 +3,169 @@
 exports[`renders disabled toggle button 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(230, 224, 233, 1)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "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,
+      ],
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "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,
-        "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": true,
       }
     }
-    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,
       }
-      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={
+      [
+        false,
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      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>
@@ -143,138 +174,169 @@ exports[`renders disabled toggle button 1`] = `
 exports[`renders toggle button 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(230, 224, 233, 1)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "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,
+      ],
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "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,
-        "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": false,
+        "expanded": undefined,
+        "selected": true,
       }
     }
-    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,
       }
-      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={
+      [
+        false,
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      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>
@@ -283,138 +345,169 @@ exports[`renders toggle button 1`] = `
 exports[`renders unchecked toggle button 1`] = `
 <View
   collapsable={false}
-  style={
+  jestAnimatedProps={
     {
-      "backgroundColor": "rgba(243, 237, 247, 1)",
-      "borderRadius": 4,
-      "height": 42,
-      "margin": 0,
-      "shadowColor": "rgba(0, 0, 0, 1)",
-      "shadowOffset": {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0,
-      "shadowRadius": 0,
-      "width": 42,
+      "value": {},
     }
   }
-  testID="icon-button-container-outer-layer"
->
-  <View
-    collapsable={false}
-    style={
+  jestAnimatedStyle={
+    {
+      "value": {},
+    }
+  }
+  jestInlineStyle={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "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,
+      ],
+    ]
+  }
+  style={
+    [
+      {
+        "margin": 6,
+        "overflow": "hidden",
+      },
+      {
+        "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,
-        "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": false,
       }
     }
-    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,
       }
-      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={
+      [
+        false,
+        [
+          {
+            "alignItems": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="icon-button"
+  >
+    <View
+      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>
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;