diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx
index 27bbfce866..eb2ac6a317 100644
--- a/example/src/Examples/SurfaceExample.tsx
+++ b/example/src/Examples/SurfaceExample.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import { MD3Elevation, Surface, Text } from 'react-native-paper';
+import { MD3Elevation, Surface, Text, MD3Colors } from 'react-native-paper';
 
 import { useExampleTheme } from '..';
 import { isWeb } from '../../utils';
@@ -31,6 +31,23 @@ const SurfaceExample = () => {
           </Text>
         </Surface>
       ))}
+
+      <View style={styles.horizontalSurfacesContainer}>
+        <Surface style={styles.horizontalSurface}>
+          <Text style={styles.centerText}>Left</Text>
+        </Surface>
+        <Surface style={styles.horizontalSurface}>
+          <Text style={styles.centerText}>Right</Text>
+        </Surface>
+      </View>
+      <View style={styles.verticalSurfacesContainer}>
+        <Surface style={styles.verticalSurface}>
+          <Text style={styles.centerText}>Top</Text>
+        </Surface>
+        <Surface style={styles.verticalSurface}>
+          <Text style={styles.centerText}>Bottom</Text>
+        </Surface>
+      </View>
     </ScreenWrapper>
   );
 };
@@ -61,6 +78,37 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  horizontalSurfacesContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginBottom: 20,
+    borderColor: MD3Colors.tertiary50,
+    padding: 10,
+    borderWidth: 1,
+  },
+  horizontalSurface: {
+    width: '48%',
+  },
+
+  verticalSurfacesContainer: {
+    height: 400,
+    justifyContent: 'space-between',
+    width: '100%',
+    marginBottom: 100,
+    borderColor: MD3Colors.tertiary50,
+    padding: 10,
+    borderWidth: 1,
+  },
+  verticalSurface: {
+    height: '48%',
+    justifyContent: 'center',
+  },
+
+  centerText: {
+    textAlign: 'center',
+  },
 });
 
 export default SurfaceExample;
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index 7d067740f5..050fbaa640 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -266,7 +266,6 @@ const FAB = forwardRef<View, Props>(
               },
             ],
           },
-          styles.container,
           !isV3 && styles.elevated,
           !isV3 && disabled && styles.disabled,
           style,
@@ -286,6 +285,7 @@ const FAB = forwardRef<View, Props>(
           accessibilityRole="button"
           accessibilityState={newAccessibilityState}
           testID={testID}
+          style={{ borderRadius }}
         >
           <View
             style={[styles.content, label ? extendedStyle : fabStyle]}
@@ -330,9 +330,6 @@ const styles = StyleSheet.create({
   elevated: {
     elevation: 6,
   },
-  container: {
-    overflow: 'hidden',
-  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
index a861f97c39..b9df6a24d2 100644
--- a/src/components/Surface.tsx
+++ b/src/components/Surface.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Animated,
   Platform,
+  ShadowStyleIOS,
   StyleProp,
   StyleSheet,
   View,
@@ -13,6 +14,9 @@ import overlay, { isAnimatedValue } from '../styles/overlay';
 import shadow from '../styles/shadow';
 import type { ThemeProp, MD3Elevation } from '../types';
 import { forwardRef } from '../utils/forwardRef';
+import { splitStyles } from '../utils/splitStyles';
+
+type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -28,7 +32,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * 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?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  elevation?: Elevation;
   /**
    * @optional
    */
@@ -64,6 +68,145 @@ const MD2Surface = forwardRef<View, Props>(
   }
 );
 
+const shadowColor = '#000';
+const iOSShadowOutputRanges = [
+  {
+    shadowOpacity: 0.15,
+    height: [0, 1, 2, 4, 6, 8],
+    shadowRadius: [0, 3, 6, 8, 10, 12],
+  },
+  {
+    shadowOpacity: 0.3,
+    height: [0, 1, 1, 1, 2, 4],
+    shadowRadius: [0, 1, 2, 3, 3, 4],
+  },
+];
+const inputRange = [0, 1, 2, 3, 4, 5];
+function getStyleForShadowLayer(
+  elevation: Elevation,
+  layer: 0 | 1
+): Animated.WithAnimatedValue<ShadowStyleIOS> {
+  if (isAnimatedValue(elevation)) {
+    return {
+      shadowColor,
+      shadowOpacity: elevation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
+        extrapolate: 'clamp',
+      }),
+      shadowOffset: {
+        width: 0,
+        height: elevation.interpolate({
+          inputRange,
+          outputRange: iOSShadowOutputRanges[layer].height,
+        }),
+      },
+      shadowRadius: elevation.interpolate({
+        inputRange,
+        outputRange: iOSShadowOutputRanges[layer].shadowRadius,
+      }),
+    };
+  }
+
+  return {
+    shadowColor,
+    shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
+    shadowOffset: {
+      width: 0,
+      height: iOSShadowOutputRanges[layer].height[elevation],
+    },
+    shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
+  };
+}
+
+const SurfaceIOS = forwardRef<
+  View,
+  Omit<Props, 'elevation'> & {
+    elevation: Elevation;
+    backgroundColor?: string | Animated.AnimatedInterpolation<string | number>;
+  }
+>(({ elevation, style, backgroundColor, testID, children, ...props }, ref) => {
+  const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
+    const {
+      position,
+      alignSelf,
+      top,
+      left,
+      right,
+      bottom,
+      start,
+      end,
+      flex,
+      backgroundColor: backgroundColorStyle,
+      width,
+      height,
+      transform,
+      opacity,
+      ...restStyle
+    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+
+    const [filteredStyles, marginStyles, borderRadiusStyles] = splitStyles(
+      restStyle,
+      (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 = backgroundColorStyle || backgroundColor;
+
+    const outerLayerViewStyles = {
+      ...getStyleForShadowLayer(elevation, 0),
+      ...marginStyles,
+      ...borderRadiusStyles,
+      position,
+      alignSelf,
+      top,
+      right,
+      bottom,
+      left,
+      start,
+      end,
+      flex,
+      width,
+      height,
+      transform,
+      opacity,
+      backgroundColor: bgColor,
+    };
+
+    const innerLayerViewStyles = {
+      ...getStyleForShadowLayer(elevation, 1),
+      ...filteredStyles,
+      ...borderRadiusStyles,
+      flex: height ? 1 : undefined,
+      backgroundColor: bgColor,
+    };
+
+    return [outerLayerViewStyles, innerLayerViewStyles];
+  }, [style, elevation, backgroundColor]);
+
+  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.
@@ -204,122 +347,16 @@ const Surface = forwardRef<View, Props>(
       );
     }
 
-    const iOSShadowOutputRanges = [
-      {
-        shadowOpacity: 0.15,
-        height: [0, 1, 2, 4, 6, 8],
-        shadowRadius: [0, 3, 6, 8, 10, 12],
-      },
-      {
-        shadowOpacity: 0.3,
-        height: [0, 1, 1, 1, 2, 4],
-        shadowRadius: [0, 1, 2, 3, 3, 4],
-      },
-    ];
-
-    const shadowColor = '#000';
-
-    const {
-      position,
-      alignSelf,
-      top,
-      left,
-      right,
-      bottom,
-      start,
-      end,
-      flex,
-      ...restStyle
-    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-    const absoluteStyles = {
-      position,
-      alignSelf,
-      top,
-      right,
-      bottom,
-      left,
-      start,
-      end,
-    };
-
-    const sharedStyle = [{ backgroundColor, flex }, restStyle];
-
-    const innerLayerViewStyles = [{ flex }];
-
-    const outerLayerViewStyles = [absoluteStyles, innerLayerViewStyles];
-
-    if (isAnimatedValue(elevation)) {
-      const inputRange = [0, 1, 2, 3, 4, 5];
-
-      const getStyleForAnimatedShadowLayer = (layer: 0 | 1) => {
-        return {
-          shadowColor,
-          shadowOpacity: elevation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
-            extrapolate: 'clamp',
-          }),
-          shadowOffset: {
-            width: 0,
-            height: elevation.interpolate({
-              inputRange,
-              outputRange: iOSShadowOutputRanges[layer].height,
-            }),
-          },
-          shadowRadius: elevation.interpolate({
-            inputRange,
-            outputRange: iOSShadowOutputRanges[layer].shadowRadius,
-          }),
-        };
-      };
-
-      return (
-        <Animated.View
-          style={[getStyleForAnimatedShadowLayer(0), outerLayerViewStyles]}
-          testID={`${testID}-outer-layer`}
-        >
-          <Animated.View
-            style={[getStyleForAnimatedShadowLayer(1), innerLayerViewStyles]}
-            testID={`${testID}-inner-layer`}
-          >
-            <Animated.View {...props} testID={testID} style={sharedStyle}>
-              {children}
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
-      );
-    }
-
-    const getStyleForShadowLayer = (layer: 0 | 1) => {
-      return {
-        shadowColor,
-        shadowOpacity: elevation
-          ? iOSShadowOutputRanges[layer].shadowOpacity
-          : 0,
-        shadowOffset: {
-          width: 0,
-          height: iOSShadowOutputRanges[layer].height[elevation],
-        },
-        shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
-      };
-    };
-
     return (
-      <Animated.View
-        ref={ref}
-        style={[getStyleForShadowLayer(0), outerLayerViewStyles]}
-        testID={`${testID}-outer-layer`}
+      <SurfaceIOS
+        {...props}
+        elevation={elevation}
+        backgroundColor={backgroundColor}
+        style={style}
+        testID={testID}
       >
-        <Animated.View
-          style={[getStyleForShadowLayer(1), innerLayerViewStyles]}
-          testID={`${testID}-inner-layer`}
-        >
-          <Animated.View {...props} testID={testID} style={sharedStyle}>
-            {children}
-          </Animated.View>
-        </Animated.View>
-      </Animated.View>
+        {children}
+      </SurfaceIOS>
     );
   }
 );
diff --git a/src/components/__tests__/AnimatedFAB.test.tsx b/src/components/__tests__/AnimatedFAB.test.tsx
index 82fa5bc558..6d1e4cbc1f 100644
--- a/src/components/__tests__/AnimatedFAB.test.tsx
+++ b/src/components/__tests__/AnimatedFAB.test.tsx
@@ -79,7 +79,7 @@ it('animated value changes correctly', () => {
       style={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(getByTestId('animated-fab-container')).toHaveStyle({
+  expect(getByTestId('animated-fab-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -91,7 +91,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('animated-fab-container')).toHaveStyle({
+  expect(getByTestId('animated-fab-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
index 9c49d95e7c..9792db3410 100644
--- a/src/components/__tests__/Appbar/Appbar.test.tsx
+++ b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -384,7 +384,7 @@ describe('animated value changes correctly', () => {
         <Appbar.Action icon="menu" />
       </Appbar>
     );
-    expect(getByTestId('appbar')).toHaveStyle({
+    expect(getByTestId('appbar-outer-layer')).toHaveStyle({
       transform: [{ scale: 1 }],
     });
 
@@ -396,7 +396,7 @@ describe('animated value changes correctly', () => {
 
     jest.advanceTimersByTime(200);
 
-    expect(getByTestId('appbar')).toHaveStyle({
+    expect(getByTestId('appbar-outer-layer')).toHaveStyle({
       transform: [{ scale: 1.5 }],
     });
   });
@@ -412,7 +412,7 @@ describe('animated value changes correctly', () => {
         />
       </Appbar>
     );
-    expect(getByTestId('appbar-action-container')).toHaveStyle({
+    expect(getByTestId('appbar-action-container-outer-layer')).toHaveStyle({
       transform: [{ scale: 1 }],
     });
 
@@ -424,7 +424,7 @@ describe('animated value changes correctly', () => {
 
     jest.advanceTimersByTime(200);
 
-    expect(getByTestId('appbar-action-container')).toHaveStyle({
+    expect(getByTestId('appbar-action-container-outer-layer')).toHaveStyle({
       transform: [{ scale: 1.5 }],
     });
   });
@@ -439,9 +439,11 @@ describe('animated value changes correctly', () => {
         />
       </Appbar>
     );
-    expect(getByTestId('appbar-back-action-container')).toHaveStyle({
-      transform: [{ scale: 1 }],
-    });
+    expect(getByTestId('appbar-back-action-container-outer-layer')).toHaveStyle(
+      {
+        transform: [{ scale: 1 }],
+      }
+    );
 
     Animated.timing(value, {
       toValue: 1.5,
@@ -451,9 +453,11 @@ describe('animated value changes correctly', () => {
 
     jest.advanceTimersByTime(200);
 
-    expect(getByTestId('appbar-back-action-container')).toHaveStyle({
-      transform: [{ scale: 1.5 }],
-    });
+    expect(getByTestId('appbar-back-action-container-outer-layer')).toHaveStyle(
+      {
+        transform: [{ scale: 1.5 }],
+      }
+    );
   });
 
   it('header animated value changes correctly', () => {
@@ -468,7 +472,7 @@ describe('animated value changes correctly', () => {
         </Appbar.Header>
       </mockSafeAreaContext.SafeAreaProvider>
     );
-    expect(getByTestId('appbar-header')).toHaveStyle({
+    expect(getByTestId('appbar-header-outer-layer')).toHaveStyle({
       transform: [{ scale: 1 }],
     });
 
@@ -480,7 +484,7 @@ describe('animated value changes correctly', () => {
 
     jest.advanceTimersByTime(200);
 
-    expect(getByTestId('appbar-header')).toHaveStyle({
+    expect(getByTestId('appbar-header-outer-layer')).toHaveStyle({
       transform: [{ scale: 1.5 }],
     });
   });
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index 05d5fe84d5..c7d6c37c4e 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -6,10 +6,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(255, 251, 254, 1)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 64,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +24,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -29,7 +34,15 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "alignItems": "center",
+        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "flex": 1,
+        "flexDirection": "row",
+        "paddingBottom": undefined,
+        "paddingHorizontal": 4,
+        "paddingLeft": undefined,
+        "paddingRight": undefined,
+        "paddingTop": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -39,37 +52,47 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "alignSelf": undefined,
+          "backgroundColor": "rgb(238, 232, 244)",
+          "borderRadius": 28,
+          "bottom": undefined,
+          "end": undefined,
           "flex": undefined,
-          "flexDirection": "row",
-          "height": 64,
-          "paddingBottom": undefined,
-          "paddingHorizontal": 4,
-          "paddingLeft": undefined,
-          "paddingRight": undefined,
-          "paddingTop": undefined,
+          "height": undefined,
+          "left": undefined,
+          "opacity": undefined,
+          "position": undefined,
+          "right": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+          "start": undefined,
+          "top": undefined,
+          "transform": undefined,
+          "width": undefined,
         }
       }
-      testID="surface"
+      testID="search-bar-container-outer-layer"
     >
       <View
         collapsable={false}
         style={
           Object {
-            "alignSelf": undefined,
-            "bottom": undefined,
-            "end": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(238, 232, 244)",
+            "borderRadius": 28,
             "flex": undefined,
-            "left": undefined,
-            "position": undefined,
-            "right": undefined,
+            "flexDirection": "row",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -77,17 +100,26 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
-            "start": undefined,
-            "top": undefined,
           }
         }
-        testID="search-bar-container-outer-layer"
+        testID="search-bar-container"
       >
         <View
           collapsable={false}
           style={
             Object {
+              "alignSelf": undefined,
+              "backgroundColor": "transparent",
+              "borderRadius": 20,
+              "bottom": undefined,
+              "end": undefined,
               "flex": undefined,
+              "height": 40,
+              "left": undefined,
+              "margin": 6,
+              "opacity": undefined,
+              "position": undefined,
+              "right": undefined,
               "shadowColor": "#000",
               "shadowOffset": Object {
                 "height": 0,
@@ -95,370 +127,316 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
+              "start": undefined,
+              "top": undefined,
+              "transform": undefined,
+              "width": 40,
             }
           }
-          testID="search-bar-container-inner-layer"
+          testID="icon-button-container-outer-layer"
         >
           <View
             collapsable={false}
             style={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "rgb(238, 232, 244)",
-                "borderRadius": 28,
-                "flex": undefined,
-                "flexDirection": "row",
+                "backgroundColor": "transparent",
+                "borderColor": "rgba(121, 116, 126, 1)",
+                "borderRadius": 20,
+                "borderWidth": 0,
+                "elevation": 0,
+                "flex": 1,
+                "overflow": "hidden",
+                "shadowColor": "#000",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
               }
             }
-            testID="search-bar-container"
+            testID="icon-button-container"
           >
             <View
+              accessibilityComponentType="button"
+              accessibilityLabel="search"
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "disabled": true,
+                }
+              }
+              accessibilityTraits="button"
+              accessible={true}
+              centered={true}
               collapsable={false}
-              style={
+              focusable={true}
+              hitSlop={
                 Object {
-                  "alignSelf": undefined,
-                  "bottom": undefined,
-                  "end": undefined,
-                  "flex": undefined,
-                  "left": undefined,
-                  "position": undefined,
-                  "right": undefined,
-                  "shadowColor": "#000",
-                  "shadowOffset": Object {
-                    "height": 0,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0,
-                  "shadowRadius": 0,
-                  "start": undefined,
-                  "top": undefined,
+                  "bottom": 6,
+                  "left": 6,
+                  "right": 6,
+                  "top": 6,
                 }
               }
-              testID="icon-button-container-outer-layer"
-            >
-              <View
-                collapsable={false}
-                style={
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
                   Object {
-                    "flex": undefined,
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 0,
-                      "width": 0,
+                    "overflow": "hidden",
+                  },
+                  false,
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexGrow": 1,
+                      "justifyContent": "center",
                     },
-                    "shadowOpacity": 0,
-                    "shadowRadius": 0,
-                  }
-                }
-                testID="icon-button-container-inner-layer"
-              >
-                <View
-                  collapsable={false}
-                  style={
                     Object {
-                      "backgroundColor": undefined,
-                      "borderColor": "rgba(121, 116, 126, 1)",
                       "borderRadius": 20,
-                      "borderWidth": 0,
-                      "elevation": 0,
-                      "flex": undefined,
-                      "height": 40,
-                      "margin": 6,
-                      "overflow": "hidden",
-                      "width": 40,
-                    }
-                  }
-                  testID="icon-button-container"
-                >
-                  <View
-                    accessibilityComponentType="button"
-                    accessibilityLabel="search"
-                    accessibilityRole="button"
-                    accessibilityState={
-                      Object {
-                        "disabled": true,
-                      }
-                    }
-                    accessibilityTraits="button"
-                    accessible={true}
-                    centered={true}
-                    collapsable={false}
-                    focusable={true}
-                    hitSlop={
+                    },
+                  ],
+                ]
+              }
+              testID="icon-button"
+            >
+              <Text
+                accessibilityElementsHidden={true}
+                allowFontScaling={false}
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                selectable={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "rgba(73, 69, 79, 1)",
+                      "fontSize": 24,
+                    },
+                    Array [
                       Object {
-                        "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]}
-                    style={
-                      Array [
-                        Object {
-                          "overflow": "hidden",
-                        },
-                        false,
-                        Array [
+                        "lineHeight": 24,
+                        "transform": Array [
                           Object {
-                            "alignItems": "center",
-                            "flexGrow": 1,
-                            "justifyContent": "center",
-                          },
-                          Object {
-                            "borderRadius": 20,
+                            "scaleX": 1,
                           },
                         ],
-                      ]
-                    }
-                    testID="icon-button"
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                </View>
-              </View>
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                      },
+                    ],
+                    Object {
+                      "fontFamily": "Material Design Icons",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    Object {},
+                  ]
+                }
+              >
+                󰍉
+              </Text>
             </View>
-            <TextInput
-              accessibilityRole="search"
-              keyboardAppearance="light"
-              placeholder="Search"
-              placeholderTextColor="rgba(28, 27, 31, 1)"
-              returnKeyType="search"
-              selectionColor="rgba(103, 80, 164, 1)"
-              style={
-                Array [
-                  Object {
-                    "alignSelf": "stretch",
-                    "flex": 1,
-                    "fontSize": 18,
-                    "minWidth": 0,
-                    "paddingLeft": 8,
-                    "textAlign": "left",
-                  },
-                  Object {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 16,
-                    "fontWeight": "400",
-                    "letterSpacing": 0.15,
-                    "lineHeight": 0,
-                  },
-                  Object {
-                    "minHeight": 56,
-                    "paddingLeft": 0,
-                  },
-                  undefined,
-                ]
+          </View>
+        </View>
+        <TextInput
+          accessibilityRole="search"
+          keyboardAppearance="light"
+          placeholder="Search"
+          placeholderTextColor="rgba(28, 27, 31, 1)"
+          returnKeyType="search"
+          selectionColor="rgba(103, 80, 164, 1)"
+          style={
+            Array [
+              Object {
+                "alignSelf": "stretch",
+                "flex": 1,
+                "fontSize": 18,
+                "minWidth": 0,
+                "paddingLeft": 8,
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(73, 69, 79, 1)",
+                "fontFamily": "System",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.15,
+                "lineHeight": 0,
+              },
+              Object {
+                "minHeight": 56,
+                "paddingLeft": 0,
+              },
+              undefined,
+            ]
+          }
+          testID="search-bar"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "marginLeft": 16,
+                "position": "absolute",
+                "right": 0,
+              },
+              false,
+            ]
+          }
+          testID="search-bar-icon-wrapper"
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "alignSelf": undefined,
+                "backgroundColor": "transparent",
+                "borderRadius": 20,
+                "bottom": undefined,
+                "end": undefined,
+                "flex": undefined,
+                "height": 40,
+                "left": undefined,
+                "margin": 6,
+                "opacity": undefined,
+                "position": undefined,
+                "right": undefined,
+                "shadowColor": "#000",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+                "start": undefined,
+                "top": undefined,
+                "transform": undefined,
+                "width": 40,
               }
-              testID="search-bar"
-              underlineColorAndroid="transparent"
-              value=""
-            />
+            }
+            testID="icon-button-container-outer-layer"
+          >
             <View
-              pointerEvents="none"
+              collapsable={false}
               style={
-                Array [
-                  Object {
-                    "marginLeft": 16,
-                    "position": "absolute",
-                    "right": 0,
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderColor": "rgba(121, 116, 126, 1)",
+                  "borderRadius": 20,
+                  "borderWidth": 0,
+                  "elevation": 0,
+                  "flex": 1,
+                  "overflow": "hidden",
+                  "shadowColor": "#000",
+                  "shadowOffset": Object {
+                    "height": 0,
+                    "width": 0,
                   },
-                  false,
-                ]
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                }
               }
-              testID="search-bar-icon-wrapper"
+              testID="icon-button-container"
             >
               <View
+                accessibilityComponentType="button"
+                accessibilityLabel="clear"
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                accessibilityTraits="button"
+                accessible={true}
+                centered={true}
                 collapsable={false}
-                style={
+                focusable={true}
+                hitSlop={
                   Object {
-                    "alignSelf": undefined,
-                    "bottom": undefined,
-                    "end": undefined,
-                    "flex": undefined,
-                    "left": undefined,
-                    "position": undefined,
-                    "right": undefined,
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 0,
-                      "width": 0,
-                    },
-                    "shadowOpacity": 0,
-                    "shadowRadius": 0,
-                    "start": undefined,
-                    "top": undefined,
+                    "bottom": 6,
+                    "left": 6,
+                    "right": 6,
+                    "top": 6,
                   }
                 }
-                testID="icon-button-container-outer-layer"
-              >
-                <View
-                  collapsable={false}
-                  style={
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
                     Object {
-                      "flex": undefined,
-                      "shadowColor": "#000",
-                      "shadowOffset": Object {
-                        "height": 0,
-                        "width": 0,
+                      "overflow": "hidden",
+                    },
+                    false,
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexGrow": 1,
+                        "justifyContent": "center",
                       },
-                      "shadowOpacity": 0,
-                      "shadowRadius": 0,
-                    }
-                  }
-                  testID="icon-button-container-inner-layer"
-                >
-                  <View
-                    collapsable={false}
-                    style={
                       Object {
-                        "backgroundColor": undefined,
-                        "borderColor": "rgba(121, 116, 126, 1)",
                         "borderRadius": 20,
-                        "borderWidth": 0,
-                        "elevation": 0,
-                        "flex": undefined,
-                        "height": 40,
-                        "margin": 6,
-                        "overflow": "hidden",
-                        "width": 40,
-                      }
-                    }
-                    testID="icon-button-container"
-                  >
-                    <View
-                      accessibilityComponentType="button"
-                      accessibilityLabel="clear"
-                      accessibilityRole="button"
-                      accessibilityState={
-                        Object {
-                          "disabled": false,
-                        }
-                      }
-                      accessibilityTraits="button"
-                      accessible={true}
-                      centered={true}
-                      collapsable={false}
-                      focusable={true}
-                      hitSlop={
+                      },
+                    ],
+                  ]
+                }
+                testID="icon-button"
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  selectable={false}
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0)",
+                        "fontSize": 24,
+                      },
+                      Array [
                         Object {
-                          "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]}
-                      style={
-                        Array [
-                          Object {
-                            "overflow": "hidden",
-                          },
-                          false,
-                          Array [
-                            Object {
-                              "alignItems": "center",
-                              "flexGrow": 1,
-                              "justifyContent": "center",
-                            },
+                          "lineHeight": 24,
+                          "transform": Array [
                             Object {
-                              "borderRadius": 20,
+                              "scaleX": 1,
                             },
                           ],
-                        ]
-                      }
-                      testID="icon-button"
-                    >
-                      <Text
-                        accessibilityElementsHidden={true}
-                        allowFontScaling={false}
-                        importantForAccessibility="no-hide-descendants"
-                        pointerEvents="none"
-                        selectable={false}
-                        style={
-                          Array [
-                            Object {
-                              "color": "rgba(255, 255, 255, 0)",
-                              "fontSize": 24,
-                            },
-                            Array [
-                              Object {
-                                "lineHeight": 24,
-                                "transform": Array [
-                                  Object {
-                                    "scaleX": 1,
-                                  },
-                                ],
-                              },
-                              Object {
-                                "backgroundColor": "transparent",
-                              },
-                            ],
-                            Object {
-                              "fontFamily": "Material Design Icons",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
-                            },
-                            Object {},
-                          ]
-                        }
-                      >
-                        󰅖
-                      </Text>
-                    </View>
-                  </View>
-                </View>
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Design Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  󰅖
+                </Text>
               </View>
             </View>
           </View>
@@ -475,10 +453,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(255, 251, 254, 1)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 64,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -490,6 +471,8 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -498,7 +481,15 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "alignItems": "center",
+        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "flex": 1,
+        "flexDirection": "row",
+        "paddingBottom": undefined,
+        "paddingHorizontal": 4,
+        "paddingLeft": undefined,
+        "paddingRight": undefined,
+        "paddingTop": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -508,37 +499,50 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         "shadowRadius": 0,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "rgba(255, 251, 254, 1)",
+          "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
+          "bottom": undefined,
+          "end": undefined,
           "flex": undefined,
-          "flexDirection": "row",
-          "height": 64,
-          "paddingBottom": undefined,
-          "paddingHorizontal": 4,
-          "paddingLeft": undefined,
-          "paddingRight": undefined,
-          "paddingTop": undefined,
+          "height": 40,
+          "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
+          "position": undefined,
+          "right": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+          "start": undefined,
+          "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
-      testID="surface"
+      testID="icon-button-container-outer-layer"
     >
       <View
         collapsable={false}
         style={
           Object {
-            "alignSelf": undefined,
-            "bottom": undefined,
-            "end": undefined,
-            "flex": undefined,
-            "left": undefined,
-            "position": undefined,
-            "right": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -546,96 +550,92 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
-            "start": undefined,
-            "top": undefined,
           }
         }
-        testID="icon-button-container-outer-layer"
+        testID="icon-button-container"
       >
         <View
+          accessibilityComponentType="button"
+          accessibilityLabel="Back"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
           collapsable={false}
-          style={
+          focusable={true}
+          hitSlop={
             Object {
-              "flex": undefined,
-              "shadowColor": "#000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
-          testID="icon-button-container-inner-layer"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
         >
           <View
-            collapsable={false}
             style={
-              Object {
-                "backgroundColor": undefined,
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderWidth": 0,
-                "elevation": 0,
-                "flex": undefined,
-                "height": 40,
-                "margin": 6,
-                "overflow": "hidden",
-                "width": 40,
-              }
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="icon-button-container"
           >
             <View
-              accessibilityComponentType="button"
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessibilityTraits="button"
-              accessible={true}
-              centered={true}
               collapsable={false}
-              focusable={true}
-              hitSlop={
-                Object {
-                  "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]}
               style={
-                Array [
-                  Object {
-                    "overflow": "hidden",
-                  },
-                  false,
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "flexGrow": 1,
-                      "justifyContent": "center",
-                    },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
                     Object {
-                      "borderRadius": 20,
+                      "rotate": "0deg",
                     },
                   ],
-                ]
+                }
               }
-              testID="icon-button"
             >
               <View
                 style={
@@ -646,160 +646,158 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                     },
                     Object {
                       "height": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                       "width": 24,
                     },
                   ]
                 }
               >
-                <View
-                  collapsable={false}
-                  style={
+                <Image
+                  accessibilityIgnoresInvertColors={true}
+                  source={
                     Object {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                      "transform": Array [
-                        Object {
-                          "rotate": "0deg",
-                        },
-                      ],
+                      "testUri": "../../../src/assets/back-chevron.png",
                     }
                   }
-                >
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        Object {
-                          "height": 24,
-                          "transform": Array [
-                            Object {
-                              "scaleX": 1,
-                            },
-                          ],
-                          "width": 24,
-                        },
-                      ]
-                    }
-                  >
-                    <Image
-                      accessibilityIgnoresInvertColors={true}
-                      source={
-                        Object {
-                          "testUri": "../../../src/assets/back-chevron.png",
-                        }
-                      }
-                      style={
-                        Array [
-                          Object {
-                            "resizeMode": "contain",
-                          },
-                          Object {
-                            "height": 21,
-                            "tintColor": "rgba(28, 27, 31, 1)",
-                            "width": 21,
-                          },
-                        ]
-                      }
-                    />
-                  </View>
-                </View>
+                  style={
+                    Array [
+                      Object {
+                        "resizeMode": "contain",
+                      },
+                      Object {
+                        "height": 21,
+                        "tintColor": "rgba(28, 27, 31, 1)",
+                        "width": 21,
+                      },
+                    ]
+                  }
+                />
               </View>
             </View>
           </View>
         </View>
       </View>
-      <View
-        accessibilityRole="text"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
+    </View>
+    <View
+      accessibilityRole="text"
+      accessibilityState={
+        Object {
+          "disabled": true,
         }
+      }
+      accessible={true}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      pointerEvents="box-none"
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 12,
+          },
+          Object {
+            "paddingHorizontal": 0,
+          },
+          Array [
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID="appbar-content"
+    >
+      <Text
+        accessibilityRole="header"
         accessible={true}
-        focusable={false}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        pointerEvents="box-none"
+        numberOfLines={1}
         style={
           Array [
             Object {
-              "flex": 1,
-              "paddingHorizontal": 12,
+              "fontFamily": "System",
+              "fontSize": 22,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 28,
             },
             Object {
-              "paddingHorizontal": 0,
+              "textAlign": "left",
+            },
+            Object {
+              "color": "rgba(28, 27, 31, 1)",
+              "writingDirection": "ltr",
             },
-            Array [
-              false,
-              false,
-              undefined,
-            ],
-          ]
-        }
-        testID="appbar-content"
-      >
-        <Text
-          accessibilityRole="header"
-          accessible={true}
-          numberOfLines={1}
-          style={
             Array [
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 22,
                 "fontWeight": "400",
                 "letterSpacing": 0,
                 "lineHeight": 28,
               },
-              Object {
-                "textAlign": "left",
-              },
-              Object {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
-              },
-              Array [
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "fontFamily": "System",
-                  "fontSize": 22,
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                  "lineHeight": 28,
-                },
-                false,
-                undefined,
-              ],
-            ]
-          }
-          testID="appbar-content-title-text"
-        >
-          Examples
-        </Text>
-      </View>
+              false,
+              undefined,
+            ],
+          ]
+        }
+        testID="appbar-content-title-text"
+      >
+        Examples
+      </Text>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
+          "bottom": undefined,
+          "end": undefined,
+          "flex": undefined,
+          "height": 40,
+          "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
+          "position": undefined,
+          "right": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+          "start": undefined,
+          "top": undefined,
+          "transform": undefined,
+          "width": 40,
+        }
+      }
+      testID="icon-button-container-outer-layer"
+    >
       <View
         collapsable={false}
         style={
           Object {
-            "alignSelf": undefined,
-            "bottom": undefined,
-            "end": undefined,
-            "flex": undefined,
-            "left": undefined,
-            "position": undefined,
-            "right": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -807,166 +805,128 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
-            "start": undefined,
-            "top": undefined,
           }
         }
-        testID="icon-button-container-outer-layer"
+        testID="icon-button-container"
       >
         <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
           collapsable={false}
-          style={
+          focusable={true}
+          hitSlop={
             Object {
-              "flex": undefined,
-              "shadowColor": "#000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
-          testID="icon-button-container-inner-layer"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
         >
           <View
-            collapsable={false}
             style={
-              Object {
-                "backgroundColor": undefined,
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderWidth": 0,
-                "elevation": 0,
-                "flex": undefined,
-                "height": 40,
-                "margin": 6,
-                "overflow": "hidden",
-                "width": 40,
-              }
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
             }
-            testID="icon-button-container"
           >
             <View
-              accessibilityComponentType="button"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessibilityTraits="button"
-              accessible={true}
-              centered={true}
               collapsable={false}
-              focusable={true}
-              hitSlop={
-                Object {
-                  "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]}
               style={
-                Array [
-                  Object {
-                    "overflow": "hidden",
-                  },
-                  false,
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "flexGrow": 1,
-                      "justifyContent": "center",
-                    },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
                     Object {
-                      "borderRadius": 20,
+                      "rotate": "0deg",
                     },
                   ],
-                ]
+                }
               }
-              testID="icon-button"
             >
-              <View
+              <Text
+                accessibilityElementsHidden={true}
+                allowFontScaling={false}
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                selectable={false}
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "justifyContent": "center",
+                      "color": "rgba(73, 69, 79, 1)",
+                      "fontSize": 24,
                     },
+                    Array [
+                      Object {
+                        "lineHeight": 24,
+                        "transform": Array [
+                          Object {
+                            "scaleX": 1,
+                          },
+                        ],
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                      },
+                    ],
                     Object {
-                      "height": 24,
-                      "width": 24,
+                      "fontFamily": "Material Design Icons",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
                     },
+                    Object {},
                   ]
                 }
               >
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                      "transform": Array [
-                        Object {
-                          "rotate": "0deg",
-                        },
-                      ],
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    allowFontScaling={false}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      Array [
-                        Object {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        Array [
-                          Object {
-                            "lineHeight": 24,
-                            "transform": Array [
-                              Object {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          Object {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                        Object {
-                          "fontFamily": "Material Design Icons",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        Object {},
-                      ]
-                    }
-                  >
-                    󰍜
-                  </Text>
-                </View>
-              </View>
+                󰍜
+              </Text>
             </View>
           </View>
         </View>
diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx
index e483eadd85..2c71988b87 100644
--- a/src/components/__tests__/Banner.test.tsx
+++ b/src/components/__tests__/Banner.test.tsx
@@ -338,7 +338,7 @@ describe('animations', () => {
         Banner
       </Banner>
     );
-    expect(getByTestId('banner')).toHaveStyle({
+    expect(getByTestId('banner-outer-layer')).toHaveStyle({
       transform: [{ scale: 1 }],
     });
 
@@ -350,7 +350,7 @@ describe('animations', () => {
 
     jest.runAllTimers();
 
-    expect(getByTestId('banner')).toHaveStyle({
+    expect(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 d9e56de211..3a5feb18d4 100644
--- a/src/components/__tests__/BottomNavigation.test.tsx
+++ b/src/components/__tests__/BottomNavigation.test.tsx
@@ -553,7 +553,7 @@ it('barStyle animated value changes correctly', () => {
       barStyle={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(getByTestId('bottom-navigation-bar')).toHaveStyle({
+  expect(getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -565,7 +565,7 @@ it('barStyle animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('bottom-navigation-bar')).toHaveStyle({
+  expect(getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx
index eae12e7d78..0ea394e055 100644
--- a/src/components/__tests__/Button.test.tsx
+++ b/src/components/__tests__/Button.test.tsx
@@ -851,7 +851,7 @@ it('animated value changes correctly', () => {
       Compact button
     </Button>
   );
-  expect(getByTestId('button-container')).toHaveStyle({
+  expect(getByTestId('button-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -863,7 +863,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('button-container')).toHaveStyle({
+  expect(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 260bd18563..6552d03f25 100644
--- a/src/components/__tests__/Card/Card.test.tsx
+++ b/src/components/__tests__/Card/Card.test.tsx
@@ -253,7 +253,7 @@ it('animated value changes correctly', () => {
       {null}
     </Card>
   );
-  expect(getByTestId('card-container')).toHaveStyle({
+  expect(getByTestId('card-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -265,7 +265,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('card-container')).toHaveStyle({
+  expect(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 e5f6cfc60d..fc20c77354 100644
--- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
+++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -6,10 +6,14 @@ exports[`Card renders an outlined card 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(255, 251, 254, 1)",
+      "borderRadius": 12,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +25,8 @@ exports[`Card renders an outlined card 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="card-container-outer-layer"
@@ -29,6 +35,9 @@ exports[`Card renders an outlined card 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "borderRadius": 12,
+        "elevation": 1,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -39,65 +48,52 @@ exports[`Card renders an outlined card 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="card-container-inner-layer"
+    testID="card-container"
   >
     <View
-      collapsable={false}
+      pointerEvents="none"
       style={
+        Array [
+          Object {
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 12,
+          },
+          Object {
+            "borderWidth": 1,
+            "height": "100%",
+            "position": "absolute",
+            "width": "100%",
+            "zIndex": 2,
+          },
+        ]
+      }
+      testID="card-outline"
+    />
+    <View
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
-          "borderRadius": 12,
-          "elevation": 1,
-          "flex": undefined,
+          "disabled": true,
         }
       }
-      testID="card-container"
-    >
-      <View
-        pointerEvents="none"
-        style={
-          Array [
-            Object {
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 12,
-            },
-            Object {
-              "borderWidth": 1,
-              "height": "100%",
-              "position": "absolute",
-              "width": "100%",
-              "zIndex": 2,
-            },
-          ]
-        }
-        testID="card-outline"
-      />
-      <View
-        accessibilityState={
+      accessible={true}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
           Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        focusable={false}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Array [
-            Object {
-              "flexShrink": 1,
-            },
-            undefined,
-          ]
-        }
-        testID="card"
-      />
-    </View>
+            "flexShrink": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="card"
+    />
   </View>
 </View>
 `;
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
index 1b5400a36c..73eb76d72d 100644
--- a/src/components/__tests__/Chip.test.tsx
+++ b/src/components/__tests__/Chip.test.tsx
@@ -756,7 +756,7 @@ it('animated value changes correctly', () => {
       Example Chip
     </Chip>
   );
-  expect(getByTestId('chip-container')).toHaveStyle({
+  expect(getByTestId('chip-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -768,7 +768,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('chip-container')).toHaveStyle({
+  expect(getByTestId('chip-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx
index 1124ef8b32..32d1e46684 100644
--- a/src/components/__tests__/FAB.test.tsx
+++ b/src/components/__tests__/FAB.test.tsx
@@ -411,7 +411,7 @@ it('animated value changes correctly', () => {
       style={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(getByTestId('fab-container')).toHaveStyle({
+  expect(getByTestId('fab-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -423,7 +423,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('fab-container')).toHaveStyle({
+  expect(getByTestId('fab-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx
index a17fef5ca3..b735cf5166 100644
--- a/src/components/__tests__/FABGroup.test.tsx
+++ b/src/components/__tests__/FABGroup.test.tsx
@@ -159,7 +159,6 @@ describe('FABActions - labelStyle - containerStyle', () => {
     expect(getByA11yHint('hint')).toHaveStyle({
       padding: 16,
       backgroundColor: '#687456',
-      marginLeft: 16,
     });
   });
 });
@@ -205,7 +204,7 @@ it('animated value changes correctly', () => {
       ]}
     />
   );
-  expect(getByTestId('my-fab-container')).toHaveStyle({
+  expect(getByTestId('my-fab-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -217,7 +216,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('my-fab-container')).toHaveStyle({
+  expect(getByTestId('my-fab-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 8aa92fa6bf..bf9fa54e97 100644
--- a/src/components/__tests__/IconButton.test.tsx
+++ b/src/components/__tests__/IconButton.test.tsx
@@ -349,7 +349,7 @@ it('action animated value changes correctly', () => {
       testID="icon-button"
     />
   );
-  expect(getByTestId('icon-button-container')).toHaveStyle({
+  expect(getByTestId('icon-button-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -361,7 +361,7 @@ it('action animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('icon-button-container')).toHaveStyle({
+  expect(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 ab8f31a13f..116a2386df 100644
--- a/src/components/__tests__/Menu.test.tsx
+++ b/src/components/__tests__/Menu.test.tsx
@@ -184,7 +184,7 @@ it('animated value changes correctly', () => {
       </Menu>
     </Portal.Host>
   );
-  expect(getByTestId('menu-surface')).toHaveStyle({
+  expect(getByTestId('menu-surface-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -196,7 +196,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('menu-surface')).toHaveStyle({
+  expect(getByTestId('menu-surface-outer-layer')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx
index 43d1dab430..8b97733c0d 100644
--- a/src/components/__tests__/Modal.test.tsx
+++ b/src/components/__tests__/Modal.test.tsx
@@ -106,7 +106,7 @@ describe('Modal', () => {
           </Modal>
         );
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -114,7 +114,7 @@ describe('Modal', () => {
           fireEvent.press(getByTestId('modal-backdrop'));
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -126,7 +126,7 @@ describe('Modal', () => {
           opacity: 1,
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -163,7 +163,7 @@ describe('Modal', () => {
           </Modal>
         );
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -171,7 +171,7 @@ describe('Modal', () => {
           BackHandler.mockPressBack();
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -183,7 +183,7 @@ describe('Modal', () => {
           opacity: 1,
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -228,7 +228,7 @@ describe('Modal', () => {
           </Modal>
         );
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -236,7 +236,7 @@ describe('Modal', () => {
           fireEvent.press(getByTestId('modal-backdrop'));
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -248,7 +248,7 @@ describe('Modal', () => {
           opacity: 1,
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -295,7 +295,7 @@ describe('Modal', () => {
           </Modal>
         );
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -303,7 +303,7 @@ describe('Modal', () => {
           BackHandler.mockPressBack();
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -315,7 +315,7 @@ describe('Modal', () => {
           opacity: 1,
         });
 
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -371,7 +371,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 0,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 0,
         });
 
@@ -382,7 +382,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -399,7 +399,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -412,7 +412,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -459,7 +459,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -472,7 +472,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -497,7 +497,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -510,7 +510,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
 
@@ -533,7 +533,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 1,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 1,
         });
       });
@@ -558,7 +558,7 @@ describe('Modal', () => {
         expect(getByTestId('modal-backdrop')).toHaveStyle({
           opacity: 0,
         });
-        expect(getByTestId('modal-surface')).toHaveStyle({
+        expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
           opacity: 0,
         });
 
@@ -596,7 +596,7 @@ describe('Modal', () => {
         {null}
       </Modal>
     );
-    expect(getByTestId('modal-surface')).toHaveStyle({
+    expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
       transform: [{ scale: 1 }],
     });
 
@@ -608,7 +608,7 @@ describe('Modal', () => {
 
     jest.runAllTimers();
 
-    expect(getByTestId('modal-surface')).toHaveStyle({
+    expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({
       transform: [{ scale: 1.5 }],
     });
   });
diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx
index 3b3a23149f..fffd1032c5 100644
--- a/src/components/__tests__/Searchbar.test.tsx
+++ b/src/components/__tests__/Searchbar.test.tsx
@@ -78,7 +78,7 @@ it('animated value changes correctly', () => {
       style={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(getByTestId('search-bar-container')).toHaveStyle({
+  expect(getByTestId('search-bar-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -90,7 +90,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('search-bar-container')).toHaveStyle({
+  expect(getByTestId('search-bar-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx
index 074609af04..41aec30f77 100644
--- a/src/components/__tests__/Snackbar.test.tsx
+++ b/src/components/__tests__/Snackbar.test.tsx
@@ -128,7 +128,7 @@ it('animated value changes correctly', () => {
       Snackbar content
     </Snackbar>
   );
-  expect(getByTestId('snack-bar')).toHaveStyle({
+  expect(getByTestId('snack-bar-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -140,7 +140,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('snack-bar')).toHaveStyle({
+  expect(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 9d68ed43d6..d56fea2c82 100644
--- a/src/components/__tests__/Surface.test.tsx
+++ b/src/components/__tests__/Surface.test.tsx
@@ -28,10 +28,9 @@ describe('Surface', () => {
         right: 40,
         start: 50,
         top: 60,
-        flex: 1,
       },
       innerLayerViewStyle: {
-        flex: 1,
+        padding: 13,
       },
       restStyle: {
         padding: 10,
@@ -40,6 +39,86 @@ describe('Surface', () => {
       },
     });
 
+    it.each`
+      property              | value
+      ${'opacity'}          | ${0.7}
+      ${'transform'}        | ${[{ scale: 1.02 }]}
+      ${'width'}            | ${'42%'}
+      ${'height'}           | ${'32.5%'}
+      ${'margin'}           | ${13}
+      ${'marginLeft'}       | ${13.1}
+      ${'marginRight'}      | ${13.2}
+      ${'marginTop'}        | ${13.3}
+      ${'marginBottom'}     | ${13.4}
+      ${'marginHorizontal'} | ${13.5}
+      ${'marginVertical'}   | ${13.6}
+      ${'position'}         | ${'absolute'}
+      ${'alignSelf'}        | ${'flex-start'}
+      ${'top'}              | ${1.1}
+      ${'right'}            | ${1.2}
+      ${'bottom'}           | ${1.3}
+      ${'left'}             | ${1.4}
+      ${'start'}            | ${1.5}
+      ${'end'}              | ${1.6}
+      ${'flex'}             | ${6}
+    `('applies $property to outer layer only', ({ property, value }) => {
+      const style = { [property]: value };
+
+      const { getByTestId } = render(
+        <Surface testID="surface-test" style={style}>
+          {null}
+        </Surface>
+      );
+
+      expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
+      expect(getByTestId('surface-test')).not.toHaveStyle(style);
+    });
+
+    it.each`
+      property               | value
+      ${'padding'}           | ${12}
+      ${'paddingLeft'}       | ${12.1}
+      ${'paddingRight'}      | ${12.2}
+      ${'paddingTop'}        | ${12.3}
+      ${'paddingBottom'}     | ${12.4}
+      ${'paddingHorizontal'} | ${12.5}
+      ${'paddingVertical'}   | ${12.6}
+      ${'borderWidth'}       | ${2}
+      ${'borderColor'}       | ${'black'}
+    `('applies $property to inner layer only', ({ property, value }) => {
+      const style = { [property]: value };
+
+      const { getByTestId } = render(
+        <Surface testID="surface-test" style={style}>
+          {null}
+        </Surface>
+      );
+
+      expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
+      expect(getByTestId('surface-test')).toHaveStyle(style);
+    });
+
+    it.each`
+      property                     | value
+      ${'borderRadius'}            | ${3}
+      ${'borderTopLeftRadius'}     | ${1}
+      ${'borderTopRightRadius'}    | ${2}
+      ${'borderBottomLeftRadius'}  | ${3}
+      ${'borderBottomRightRadius'} | ${4}
+      ${'backgroundColor'}         | ${'rgb(4, 5, 6)'}
+    `('applies $property to every layer', ({ property, value }) => {
+      const style = { [property]: value };
+
+      const { getByTestId } = render(
+        <Surface testID="surface-test" style={style}>
+          {null}
+        </Surface>
+      );
+
+      expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
+      expect(getByTestId('surface-test')).toHaveStyle(style);
+    });
+
     describe('outer layer', () => {
       it('should not render rest style', () => {
         const testID = 'surface-test';
@@ -69,36 +148,22 @@ describe('Surface', () => {
         );
       });
 
-      it('should render inner layer styles on outer layer', () => {
+      it('should render absolute position properties on the outer layer', () => {
         const testID = 'surface-test';
 
         const { getByTestId } = render(
-          <Surface testID={testID} style={styles.innerLayerViewStyle}>
+          <Surface testID={testID} style={styles.absoluteStyles}>
             {null}
           </Surface>
         );
 
         expect(getByTestId(`${testID}-outer-layer`)).toHaveStyle(
-          styles.innerLayerViewStyle
+          styles.absoluteStyles
         );
       });
     });
 
     describe('inner layer', () => {
-      it('should not render absolute position properties on the inner layer', () => {
-        const testID = 'surface-test';
-
-        const { getByTestId } = render(
-          <Surface testID={testID} style={styles.absoluteStyles}>
-            {null}
-          </Surface>
-        );
-
-        expect(getByTestId(`${testID}-inner-layer`)).not.toHaveStyle(
-          styles.absoluteStyles
-        );
-      });
-
       it('should render inner layer styles on the inner layer', () => {
         const testID = 'surface-test';
 
@@ -108,12 +173,26 @@ describe('Surface', () => {
           </Surface>
         );
 
-        expect(getByTestId(`${testID}-inner-layer`)).toHaveStyle(
-          styles.innerLayerViewStyle
-        );
+        expect(getByTestId(testID)).toHaveStyle(styles.innerLayerViewStyle);
       });
     });
 
+    it('applies backgroundColor to every layer', () => {
+      const backgroundColor = 'rgb(1, 2, 3)';
+      const { getByTestId } = render(
+        <Surface
+          testID="surface-test"
+          theme={{ colors: { elevation: { level1: backgroundColor } } }}
+        >
+          {null}
+        </Surface>
+      );
+
+      const style = { backgroundColor };
+      expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
+      expect(getByTestId('surface-test')).toHaveStyle(style);
+    });
+
     describe('children wrapper', () => {
       it('should render rest styles', () => {
         const testID = 'surface-test';
diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx
index a8f8e5b924..e55ab7f239 100644
--- a/src/components/__tests__/ToggleButton.test.tsx
+++ b/src/components/__tests__/ToggleButton.test.tsx
@@ -85,7 +85,7 @@ it('animated value changes correctly', () => {
       style={[{ transform: [{ scale: value }] }]}
     />
   );
-  expect(getByTestId('toggle-button-container')).toHaveStyle({
+  expect(getByTestId('toggle-button-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
   });
 
@@ -97,7 +97,7 @@ it('animated value changes correctly', () => {
 
   jest.advanceTimersByTime(200);
 
-  expect(getByTestId('toggle-button-container')).toHaveStyle({
+  expect(getByTestId('toggle-button-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1.5 }],
   });
 });
diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
index c343637d3e..ddefdd96be 100644
--- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
@@ -6,10 +6,14 @@ exports[`renders animated fab 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": "absolute",
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +25,12 @@ exports[`renders animated fab 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="animated-fab-container-outer-layer"
@@ -29,6 +39,8 @@ exports[`renders animated fab 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -39,259 +51,241 @@ exports[`renders animated fab 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="animated-fab-container-inner-layer"
+    testID="animated-fab-container"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "backgroundColor": "transparent",
           "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "height": 56,
         }
       }
-      testID="animated-fab-container"
     >
       <View
-        collapsable={false}
         style={
-          Object {
-            "borderRadius": 16,
-            "height": 56,
-          }
+          Array [
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            Object {
+              "elevation": 0,
+            },
+          ]
         }
       >
         <View
+          collapsable={false}
+          pointerEvents="none"
           style={
-            Array [
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "elevation": 0,
-              },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              Object {
-                "borderRadius": 16,
-                "bottom": 0,
-                "elevation": 6,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": 72,
-              }
+            Object {
+              "borderRadius": 16,
+              "bottom": 0,
+              "elevation": 6,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": 72,
             }
-          />
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              Object {
-                "borderRadius": 16,
-                "bottom": 0,
-                "elevation": 6,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": Array [
-                  Object {
-                    "translateX": 16,
-                  },
-                ],
-                "width": 56,
-              }
+          }
+        />
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={
+            Object {
+              "borderRadius": 16,
+              "bottom": 0,
+              "elevation": 6,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "translateX": 16,
+                },
+              ],
+              "width": 56,
             }
-          />
-        </View>
+          }
+        />
+      </View>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "borderRadius": 16,
+            "flexDirection": "row",
+            "overflow": "hidden",
+          }
+        }
+      >
         <View
           collapsable={false}
-          pointerEvents="box-none"
           style={
             Object {
+              "backgroundColor": "rgba(234, 221, 255, 1)",
               "borderRadius": 16,
-              "flexDirection": "row",
-              "overflow": "hidden",
+              "height": 56,
+              "left": 16,
+              "right": undefined,
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 72,
             }
           }
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel=""
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "backgroundColor": "rgba(234, 221, 255, 1)",
-                "borderRadius": 16,
-                "height": 56,
-                "left": 16,
-                "right": undefined,
-                "transform": Array [
-                  Object {
-                    "translateX": 0,
-                  },
-                ],
-                "width": 72,
+                "disabled": 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]}
+            style={
+              Array [
+                Object {
+                  "overflow": "hidden",
+                },
+                false,
+                Object {
+                  "borderRadius": 16,
+                },
+              ]
+            }
+            testID="animated-fab"
           >
             <View
-              accessibilityLabel=""
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": 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]}
               style={
                 Array [
                   Object {
-                    "overflow": "hidden",
+                    "height": 56,
                   },
-                  false,
                   Object {
                     "borderRadius": 16,
+                    "width": 72,
                   },
                 ]
               }
-              testID="animated-fab"
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 56,
-                    },
-                    Object {
-                      "borderRadius": 16,
-                      "width": 72,
-                    },
-                  ]
-                }
-              />
-            </View>
+            />
           </View>
         </View>
       </View>
-      <View
-        collapsable={false}
+    </View>
+    <View
+      collapsable={false}
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "center",
+          "height": 56,
+          "justifyContent": "center",
+          "left": 16,
+          "position": "absolute",
+          "right": undefined,
+          "transform": Array [
+            Object {
+              "translateX": 0,
+            },
+          ],
+          "width": 56,
+        }
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
-          Object {
-            "alignItems": "center",
-            "height": 56,
-            "justifyContent": "center",
-            "left": 16,
-            "position": "absolute",
-            "right": undefined,
-            "transform": Array [
+          Array [
+            Object {
+              "color": "rgba(33, 0, 93, 1)",
+              "fontSize": 24,
+            },
+            Array [
+              Object {
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
+              },
               Object {
-                "translateX": 0,
+                "backgroundColor": "transparent",
               },
             ],
-            "width": 56,
-          }
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
+          ]
         }
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(33, 0, 93, 1)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
+        󰐕
+      </Text>
+    </View>
+    <View
+      pointerEvents="none"
+    >
+      <Text
+        collapsable={false}
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        onTextLayout={[Function]}
+        style={
+          Object {
+            "color": "rgba(33, 0, 93, 1)",
+            "fontFamily": "System",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0.1,
+            "lineHeight": 20,
+            "minWidth": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 16,
+            "textAlign": "left",
+            "top": -28,
+            "transform": Array [
               Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
+                "translateX": 56,
               },
-              Object {},
-            ]
-          }
-        >
-          󰐕
-        </Text>
-      </View>
-      <View
-        pointerEvents="none"
-      >
-        <Text
-          collapsable={false}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          onTextLayout={[Function]}
-          style={
-            Object {
-              "color": "rgba(33, 0, 93, 1)",
-              "fontFamily": "System",
-              "fontSize": 14,
-              "fontWeight": "500",
-              "letterSpacing": 0.1,
-              "lineHeight": 20,
-              "minWidth": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "right": 16,
-              "textAlign": "left",
-              "top": -28,
-              "transform": Array [
-                Object {
-                  "translateX": 56,
-                },
-              ],
-              "writingDirection": "ltr",
-            }
+            ],
+            "writingDirection": "ltr",
           }
-          testID="animated-fab-text"
-        />
-      </View>
+        }
+        testID="animated-fab-text"
+      />
     </View>
   </View>
 </View>
@@ -303,10 +297,14 @@ exports[`renders animated fab with label on the left 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": "absolute",
       "right": undefined,
       "shadowColor": "#000",
@@ -318,6 +316,12 @@ exports[`renders animated fab with label on the left 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="animated-fab-container-outer-layer"
@@ -326,6 +330,8 @@ exports[`renders animated fab with label on the left 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -336,261 +342,243 @@ exports[`renders animated fab with label on the left 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="animated-fab-container-inner-layer"
+    testID="animated-fab-container"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "backgroundColor": "transparent",
           "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "height": 56,
         }
       }
-      testID="animated-fab-container"
     >
       <View
-        collapsable={false}
         style={
-          Object {
-            "borderRadius": 16,
-            "height": 56,
-          }
+          Array [
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            Object {
+              "elevation": 0,
+            },
+          ]
         }
       >
         <View
+          collapsable={false}
+          pointerEvents="none"
           style={
-            Array [
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "elevation": 0,
-              },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              Object {
-                "borderRadius": 16,
-                "bottom": 0,
-                "elevation": 6,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": 72,
-              }
+            Object {
+              "borderRadius": 16,
+              "bottom": 0,
+              "elevation": 6,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": 72,
             }
-          />
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              Object {
-                "borderRadius": 16,
-                "bottom": 0,
-                "elevation": 6,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": Array [
-                  Object {
-                    "translateX": 0,
-                  },
-                ],
-                "width": 56,
-              }
+          }
+        />
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={
+            Object {
+              "borderRadius": 16,
+              "bottom": 0,
+              "elevation": 6,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 56,
             }
-          />
-        </View>
+          }
+        />
+      </View>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "borderRadius": 16,
+            "flexDirection": "row",
+            "overflow": "hidden",
+          }
+        }
+      >
         <View
           collapsable={false}
-          pointerEvents="box-none"
           style={
             Object {
+              "backgroundColor": "rgba(234, 221, 255, 1)",
               "borderRadius": 16,
-              "flexDirection": "row",
-              "overflow": "hidden",
+              "height": 56,
+              "left": -16,
+              "right": undefined,
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 72,
             }
           }
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="text"
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "backgroundColor": "rgba(234, 221, 255, 1)",
-                "borderRadius": 16,
-                "height": 56,
-                "left": -16,
-                "right": undefined,
-                "transform": Array [
-                  Object {
-                    "translateX": 0,
-                  },
-                ],
-                "width": 72,
+                "disabled": 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]}
+            style={
+              Array [
+                Object {
+                  "overflow": "hidden",
+                },
+                false,
+                Object {
+                  "borderRadius": 16,
+                },
+              ]
+            }
+            testID="animated-fab"
           >
             <View
-              accessibilityLabel="text"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": 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]}
               style={
                 Array [
                   Object {
-                    "overflow": "hidden",
+                    "height": 56,
                   },
-                  false,
                   Object {
                     "borderRadius": 16,
+                    "width": 72,
                   },
                 ]
               }
-              testID="animated-fab"
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 56,
-                    },
-                    Object {
-                      "borderRadius": 16,
-                      "width": 72,
-                    },
-                  ]
-                }
-              />
-            </View>
+            />
           </View>
         </View>
       </View>
-      <View
-        collapsable={false}
+    </View>
+    <View
+      collapsable={false}
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "center",
+          "height": 56,
+          "justifyContent": "center",
+          "left": -16,
+          "position": "absolute",
+          "right": undefined,
+          "transform": Array [
+            Object {
+              "translateX": 16,
+            },
+          ],
+          "width": 56,
+        }
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
-          Object {
-            "alignItems": "center",
-            "height": 56,
-            "justifyContent": "center",
-            "left": -16,
-            "position": "absolute",
-            "right": undefined,
-            "transform": Array [
+          Array [
+            Object {
+              "color": "rgba(33, 0, 93, 1)",
+              "fontSize": 24,
+            },
+            Array [
+              Object {
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
+              },
               Object {
-                "translateX": 16,
+                "backgroundColor": "transparent",
               },
             ],
-            "width": 56,
-          }
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
+          ]
         }
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(33, 0, 93, 1)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
+        󰐕
+      </Text>
+    </View>
+    <View
+      pointerEvents="none"
+    >
+      <Text
+        collapsable={false}
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        onTextLayout={[Function]}
+        style={
+          Object {
+            "color": "rgba(33, 0, 93, 1)",
+            "fontFamily": "System",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "left": 16,
+            "letterSpacing": 0.1,
+            "lineHeight": 20,
+            "minWidth": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "textAlign": "left",
+            "top": -28,
+            "transform": Array [
               Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
+                "translateX": 56,
               },
-              Object {},
-            ]
+            ],
+            "writingDirection": "ltr",
           }
-        >
-          󰐕
-        </Text>
-      </View>
-      <View
-        pointerEvents="none"
+        }
+        testID="animated-fab-text"
       >
-        <Text
-          collapsable={false}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          onTextLayout={[Function]}
-          style={
-            Object {
-              "color": "rgba(33, 0, 93, 1)",
-              "fontFamily": "System",
-              "fontSize": 14,
-              "fontWeight": "500",
-              "left": 16,
-              "letterSpacing": 0.1,
-              "lineHeight": 20,
-              "minWidth": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "textAlign": "left",
-              "top": -28,
-              "transform": Array [
-                Object {
-                  "translateX": 56,
-                },
-              ],
-              "writingDirection": "ltr",
-            }
-          }
-          testID="animated-fab-text"
-        >
-          text
-        </Text>
-      </View>
+        text
+      </Text>
     </View>
   </View>
 </View>
@@ -602,10 +590,14 @@ exports[`renders animated fab with label on the right by default 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": "absolute",
       "right": undefined,
       "shadowColor": "#000",
@@ -617,6 +609,12 @@ exports[`renders animated fab with label on the right by default 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="animated-fab-container-outer-layer"
@@ -625,6 +623,8 @@ exports[`renders animated fab with label on the right by default 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -635,261 +635,243 @@ exports[`renders animated fab with label on the right by default 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="animated-fab-container-inner-layer"
+    testID="animated-fab-container"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "backgroundColor": "transparent",
           "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "height": 56,
         }
       }
-      testID="animated-fab-container"
     >
       <View
-        collapsable={false}
         style={
-          Object {
-            "borderRadius": 16,
-            "height": 56,
-          }
+          Array [
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            Object {
+              "elevation": 0,
+            },
+          ]
         }
       >
         <View
+          collapsable={false}
+          pointerEvents="none"
           style={
-            Array [
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Object {
-                "elevation": 0,
-              },
-            ]
-          }
-        >
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              Object {
-                "borderRadius": 16,
-                "bottom": 0,
-                "elevation": 6,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "width": 72,
-              }
+            Object {
+              "borderRadius": 16,
+              "bottom": 0,
+              "elevation": 6,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": 72,
             }
-          />
-          <View
-            collapsable={false}
-            pointerEvents="none"
-            style={
-              Object {
-                "borderRadius": 16,
-                "bottom": 0,
-                "elevation": 6,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": Array [
-                  Object {
-                    "translateX": 16,
-                  },
-                ],
-                "width": 56,
-              }
+          }
+        />
+        <View
+          collapsable={false}
+          pointerEvents="none"
+          style={
+            Object {
+              "borderRadius": 16,
+              "bottom": 0,
+              "elevation": 6,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "translateX": 16,
+                },
+              ],
+              "width": 56,
             }
-          />
-        </View>
+          }
+        />
+      </View>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "borderRadius": 16,
+            "flexDirection": "row",
+            "overflow": "hidden",
+          }
+        }
+      >
         <View
           collapsable={false}
-          pointerEvents="box-none"
           style={
             Object {
+              "backgroundColor": "rgba(234, 221, 255, 1)",
               "borderRadius": 16,
-              "flexDirection": "row",
-              "overflow": "hidden",
+              "height": 56,
+              "left": 16,
+              "right": undefined,
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 72,
             }
           }
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="text"
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "backgroundColor": "rgba(234, 221, 255, 1)",
-                "borderRadius": 16,
-                "height": 56,
-                "left": 16,
-                "right": undefined,
-                "transform": Array [
-                  Object {
-                    "translateX": 0,
-                  },
-                ],
-                "width": 72,
+                "disabled": 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]}
+            style={
+              Array [
+                Object {
+                  "overflow": "hidden",
+                },
+                false,
+                Object {
+                  "borderRadius": 16,
+                },
+              ]
+            }
+            testID="animated-fab"
           >
             <View
-              accessibilityLabel="text"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": 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]}
               style={
                 Array [
                   Object {
-                    "overflow": "hidden",
+                    "height": 56,
                   },
-                  false,
                   Object {
                     "borderRadius": 16,
+                    "width": 72,
                   },
                 ]
               }
-              testID="animated-fab"
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 56,
-                    },
-                    Object {
-                      "borderRadius": 16,
-                      "width": 72,
-                    },
-                  ]
-                }
-              />
-            </View>
+            />
           </View>
         </View>
       </View>
-      <View
-        collapsable={false}
+    </View>
+    <View
+      collapsable={false}
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "center",
+          "height": 56,
+          "justifyContent": "center",
+          "left": 16,
+          "position": "absolute",
+          "right": undefined,
+          "transform": Array [
+            Object {
+              "translateX": 0,
+            },
+          ],
+          "width": 56,
+        }
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
-          Object {
-            "alignItems": "center",
-            "height": 56,
-            "justifyContent": "center",
-            "left": 16,
-            "position": "absolute",
-            "right": undefined,
-            "transform": Array [
+          Array [
+            Object {
+              "color": "rgba(33, 0, 93, 1)",
+              "fontSize": 24,
+            },
+            Array [
+              Object {
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
+              },
               Object {
-                "translateX": 0,
+                "backgroundColor": "transparent",
               },
             ],
-            "width": 56,
-          }
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
+          ]
         }
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(33, 0, 93, 1)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
+        󰐕
+      </Text>
+    </View>
+    <View
+      pointerEvents="none"
+    >
+      <Text
+        collapsable={false}
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        onTextLayout={[Function]}
+        style={
+          Object {
+            "color": "rgba(33, 0, 93, 1)",
+            "fontFamily": "System",
+            "fontSize": 14,
+            "fontWeight": "500",
+            "letterSpacing": 0.1,
+            "lineHeight": 20,
+            "minWidth": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 16,
+            "textAlign": "left",
+            "top": -28,
+            "transform": Array [
               Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
+                "translateX": 56,
               },
-              Object {},
-            ]
+            ],
+            "writingDirection": "ltr",
           }
-        >
-          󰐕
-        </Text>
-      </View>
-      <View
-        pointerEvents="none"
+        }
+        testID="animated-fab-text"
       >
-        <Text
-          collapsable={false}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          onTextLayout={[Function]}
-          style={
-            Object {
-              "color": "rgba(33, 0, 93, 1)",
-              "fontFamily": "System",
-              "fontSize": 14,
-              "fontWeight": "500",
-              "letterSpacing": 0.1,
-              "lineHeight": 20,
-              "minWidth": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "right": 16,
-              "textAlign": "left",
-              "top": -28,
-              "transform": Array [
-                Object {
-                  "translateX": 56,
-                },
-              ],
-              "writingDirection": "ltr",
-            }
-          }
-          testID="animated-fab-text"
-        >
-          text
-        </Text>
-      </View>
+        text
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 4f9889ae3b..f2aa6d1640 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -6,10 +6,13 @@ exports[`render visible banner, with custom theme 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(247, 243, 249)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +24,8 @@ exports[`render visible banner, with custom theme 1`] = `
       "shadowRadius": 3,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -29,6 +34,7 @@ exports[`render visible banner, with custom theme 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgb(247, 243, 249)",
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -39,108 +45,128 @@ exports[`render visible banner, with custom theme 1`] = `
         "shadowRadius": 1,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
-      collapsable={false}
       style={
-        Object {
-          "backgroundColor": "rgb(247, 243, 249)",
-          "flex": undefined,
-          "opacity": 1,
-        }
+        Array [
+          Object {
+            "alignSelf": "center",
+            "maxWidth": 960,
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
       <View
+        collapsable={false}
         style={
-          Array [
-            Object {
-              "alignSelf": "center",
-              "maxWidth": 960,
-              "overflow": "hidden",
-              "width": "100%",
-            },
-            undefined,
-          ]
+          Object {
+            "height": 0,
+          }
         }
+      />
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={Object {}}
       >
         <View
-          collapsable={false}
           style={
             Object {
-              "height": 0,
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "marginBottom": 0,
+              "marginHorizontal": 8,
+              "marginTop": 16,
             }
           }
-        />
-        <View
-          collapsable={false}
-          onLayout={[Function]}
-          style={Object {}}
         >
-          <View
+          <Text
+            accessibilityLiveRegion="polite"
+            accessibilityRole="alert"
             style={
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "marginBottom": 0,
-                "marginHorizontal": 8,
-                "marginTop": 16,
-              }
-            }
-          >
-            <Text
-              accessibilityLiveRegion="polite"
-              accessibilityRole="alert"
-              style={
+              Array [
+                Object {
+                  "textAlign": "left",
+                },
+                Object {
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                },
+                Object {
+                  "writingDirection": "ltr",
+                },
                 Array [
                   Object {
-                    "textAlign": "left",
+                    "flex": 1,
+                    "margin": 8,
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
-                    "fontFamily": "System",
-                    "fontWeight": "400",
-                    "letterSpacing": 0,
-                  },
-                  Object {
-                    "writingDirection": "ltr",
                   },
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    Object {
-                      "color": "rgba(28, 27, 31, 1)",
-                    },
-                  ],
-                ]
-              }
-            >
-              Custom theme
-            </Text>
-          </View>
+                ],
+              ]
+            }
+          >
+            Custom theme
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "margin": 4,
+            }
+          }
+        >
           <View
+            collapsable={false}
             style={
               Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-end",
+                "alignSelf": undefined,
+                "backgroundColor": "transparent",
+                "borderRadius": 20,
+                "bottom": undefined,
+                "end": undefined,
+                "flex": undefined,
+                "height": undefined,
+                "left": undefined,
                 "margin": 4,
+                "opacity": undefined,
+                "position": undefined,
+                "right": undefined,
+                "shadowColor": "#000",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+                "start": undefined,
+                "top": undefined,
+                "transform": undefined,
+                "width": undefined,
               }
             }
+            testID="button-container-outer-layer"
           >
             <View
               collapsable={false}
               style={
                 Object {
-                  "alignSelf": undefined,
-                  "bottom": undefined,
-                  "end": undefined,
+                  "backgroundColor": "transparent",
+                  "borderColor": "transparent",
+                  "borderRadius": 20,
+                  "borderStyle": "solid",
+                  "borderWidth": 0,
                   "flex": undefined,
-                  "left": undefined,
-                  "position": undefined,
-                  "right": undefined,
+                  "minWidth": "auto",
                   "shadowColor": "#000",
                   "shadowOffset": Object {
                     "height": 0,
@@ -148,139 +174,103 @@ exports[`render visible banner, with custom theme 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                  "start": undefined,
-                  "top": undefined,
                 }
               }
-              testID="button-container-outer-layer"
+              testID="button-container"
             >
               <View
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": 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]}
                 style={
-                  Object {
-                    "flex": undefined,
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 0,
-                      "width": 0,
+                  Array [
+                    Object {
+                      "overflow": "hidden",
                     },
-                    "shadowOpacity": 0,
-                    "shadowRadius": 0,
-                  }
+                    false,
+                    Object {
+                      "borderRadius": 20,
+                    },
+                  ]
                 }
-                testID="button-container-inner-layer"
+                testID="button"
               >
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "backgroundColor": "transparent",
-                      "borderColor": "transparent",
-                      "borderRadius": 20,
-                      "borderStyle": "solid",
-                      "borderWidth": 0,
-                      "flex": undefined,
-                      "margin": 4,
-                      "minWidth": "auto",
-                    }
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      },
+                      undefined,
+                    ]
                   }
-                  testID="button-container"
                 >
-                  <View
-                    accessibilityRole="button"
-                    accessibilityState={
-                      Object {
-                        "disabled": 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]}
+                  <Text
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "overflow": "hidden",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        false,
                         Object {
-                          "borderRadius": 20,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                      ]
-                    }
-                    testID="button"
-                  >
-                    <View
-                      style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "justifyContent": "center",
+                            "marginHorizontal": 16,
+                            "marginVertical": 9,
+                            "textAlign": "center",
+                          },
+                          false,
+                          Object {
+                            "marginHorizontal": 12,
+                          },
+                          Object {
+                            "marginHorizontal": 8,
+                          },
+                          false,
+                          Object {
+                            "color": "#043",
+                            "fontFamily": "System",
+                            "fontSize": 14,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.1,
+                            "lineHeight": 20,
                           },
                           undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        numberOfLines={1}
-                        selectable={false}
-                        style={
-                          Array [
-                            Object {
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            Object {
-                              "textAlign": "left",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "writingDirection": "ltr",
-                            },
-                            Array [
-                              Object {
-                                "marginHorizontal": 16,
-                                "marginVertical": 9,
-                                "textAlign": "center",
-                              },
-                              false,
-                              Object {
-                                "marginHorizontal": 12,
-                              },
-                              Object {
-                                "marginHorizontal": 8,
-                              },
-                              false,
-                              Object {
-                                "color": "#043",
-                                "fontFamily": "System",
-                                "fontSize": 14,
-                                "fontWeight": "500",
-                                "letterSpacing": 0.1,
-                                "lineHeight": 20,
-                              },
-                              undefined,
-                            ],
-                          ]
-                        }
-                        testID="button-text"
-                      >
-                        first
-                      </Text>
-                    </View>
-                  </View>
+                        ],
+                      ]
+                    }
+                    testID="button-text"
+                  >
+                    first
+                  </Text>
                 </View>
               </View>
             </View>
@@ -298,10 +288,13 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(247, 243, 249)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 0,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -313,6 +306,8 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
       "shadowRadius": 3,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -321,6 +316,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgb(247, 243, 249)",
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -331,110 +327,98 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
         "shadowRadius": 1,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
-      collapsable={false}
       style={
-        Object {
-          "backgroundColor": "rgb(247, 243, 249)",
-          "flex": undefined,
-          "opacity": 0,
-        }
+        Array [
+          Object {
+            "alignSelf": "center",
+            "maxWidth": 960,
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
       <View
+        collapsable={false}
         style={
-          Array [
-            Object {
-              "alignSelf": "center",
-              "maxWidth": 960,
-              "overflow": "hidden",
-              "width": "100%",
-            },
-            undefined,
-          ]
+          Object {
+            "height": 0,
+          }
         }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "height": 0,
-            }
+      />
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={
+          Object {
+            "opacity": 0,
+            "position": "absolute",
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateY": -0,
+              },
+            ],
+            "width": "100%",
           }
-        />
+        }
+      >
         <View
-          collapsable={false}
-          onLayout={[Function]}
           style={
             Object {
-              "opacity": 0,
-              "position": "absolute",
-              "top": 0,
-              "transform": Array [
-                Object {
-                  "translateY": -0,
-                },
-              ],
-              "width": "100%",
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "marginBottom": 0,
+              "marginHorizontal": 8,
+              "marginTop": 16,
             }
           }
         >
-          <View
+          <Text
+            accessibilityLiveRegion="none"
+            accessibilityRole="alert"
             style={
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "marginBottom": 0,
-                "marginHorizontal": 8,
-                "marginTop": 16,
-              }
-            }
-          >
-            <Text
-              accessibilityLiveRegion="none"
-              accessibilityRole="alert"
-              style={
+              Array [
+                Object {
+                  "textAlign": "left",
+                },
+                Object {
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                },
+                Object {
+                  "writingDirection": "ltr",
+                },
                 Array [
                   Object {
-                    "textAlign": "left",
+                    "flex": 1,
+                    "margin": 8,
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
-                    "fontFamily": "System",
-                    "fontWeight": "400",
-                    "letterSpacing": 0,
                   },
-                  Object {
-                    "writingDirection": "ltr",
-                  },
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    Object {
-                      "color": "rgba(28, 27, 31, 1)",
-                    },
-                  ],
-                ]
-              }
-            >
-              Two line text string with two actions. One to two lines is preferable on mobile.
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "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={
+            Object {
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "margin": 4,
+            }
+          }
+        />
       </View>
     </View>
   </View>
@@ -447,10 +431,13 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(247, 243, 249)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -462,6 +449,8 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
       "shadowRadius": 3,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -470,6 +459,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgb(247, 243, 249)",
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -480,130 +470,150 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
         "shadowRadius": 1,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
-      collapsable={false}
       style={
-        Object {
-          "backgroundColor": "rgb(247, 243, 249)",
-          "flex": undefined,
-          "opacity": 1,
-        }
+        Array [
+          Object {
+            "alignSelf": "center",
+            "maxWidth": 960,
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
       <View
+        collapsable={false}
         style={
-          Array [
-            Object {
-              "alignSelf": "center",
-              "maxWidth": 960,
-              "overflow": "hidden",
-              "width": "100%",
-            },
-            undefined,
-          ]
+          Object {
+            "height": 0,
+          }
         }
+      />
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={Object {}}
       >
         <View
-          collapsable={false}
           style={
             Object {
-              "height": 0,
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "marginBottom": 0,
+              "marginHorizontal": 8,
+              "marginTop": 16,
             }
           }
-        />
-        <View
-          collapsable={false}
-          onLayout={[Function]}
-          style={Object {}}
         >
           <View
             style={
               Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "marginBottom": 0,
-                "marginHorizontal": 8,
-                "marginTop": 16,
+                "margin": 8,
               }
             }
           >
-            <View
-              style={
+            <Image
+              accessibilityIgnoresInvertColors={true}
+              source={
                 Object {
-                  "margin": 8,
+                  "uri": "https://callstack.com/images/team/Satya.png",
                 }
               }
-            >
-              <Image
-                accessibilityIgnoresInvertColors={true}
-                source={
-                  Object {
-                    "uri": "https://callstack.com/images/team/Satya.png",
-                  }
-                }
-                style={
-                  Object {
-                    "height": 40,
-                    "width": 40,
-                  }
-                }
-              />
-            </View>
-            <Text
-              accessibilityLiveRegion="polite"
-              accessibilityRole="alert"
               style={
+                Object {
+                  "height": 40,
+                  "width": 40,
+                }
+              }
+            />
+          </View>
+          <Text
+            accessibilityLiveRegion="polite"
+            accessibilityRole="alert"
+            style={
+              Array [
+                Object {
+                  "textAlign": "left",
+                },
+                Object {
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                },
+                Object {
+                  "writingDirection": "ltr",
+                },
                 Array [
                   Object {
-                    "textAlign": "left",
+                    "flex": 1,
+                    "margin": 8,
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
-                    "fontFamily": "System",
-                    "fontWeight": "400",
-                    "letterSpacing": 0,
-                  },
-                  Object {
-                    "writingDirection": "ltr",
                   },
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    Object {
-                      "color": "rgba(28, 27, 31, 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={
+            Object {
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "margin": 4,
+            }
+          }
+        >
           <View
+            collapsable={false}
             style={
               Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-end",
+                "alignSelf": undefined,
+                "backgroundColor": "transparent",
+                "borderRadius": 20,
+                "bottom": undefined,
+                "end": undefined,
+                "flex": undefined,
+                "height": undefined,
+                "left": undefined,
                 "margin": 4,
+                "opacity": undefined,
+                "position": undefined,
+                "right": undefined,
+                "shadowColor": "#000",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+                "start": undefined,
+                "top": undefined,
+                "transform": undefined,
+                "width": undefined,
               }
             }
+            testID="button-container-outer-layer"
           >
             <View
               collapsable={false}
               style={
                 Object {
-                  "alignSelf": undefined,
-                  "bottom": undefined,
-                  "end": undefined,
+                  "backgroundColor": "transparent",
+                  "borderColor": "transparent",
+                  "borderRadius": 20,
+                  "borderStyle": "solid",
+                  "borderWidth": 0,
                   "flex": undefined,
-                  "left": undefined,
-                  "position": undefined,
-                  "right": undefined,
+                  "minWidth": "auto",
                   "shadowColor": "#000",
                   "shadowOffset": Object {
                     "height": 0,
@@ -611,139 +621,103 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                  "start": undefined,
-                  "top": undefined,
                 }
               }
-              testID="button-container-outer-layer"
+              testID="button-container"
             >
               <View
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": 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]}
                 style={
-                  Object {
-                    "flex": undefined,
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 0,
-                      "width": 0,
+                  Array [
+                    Object {
+                      "overflow": "hidden",
                     },
-                    "shadowOpacity": 0,
-                    "shadowRadius": 0,
-                  }
+                    false,
+                    Object {
+                      "borderRadius": 20,
+                    },
+                  ]
                 }
-                testID="button-container-inner-layer"
+                testID="button"
               >
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "backgroundColor": "transparent",
-                      "borderColor": "transparent",
-                      "borderRadius": 20,
-                      "borderStyle": "solid",
-                      "borderWidth": 0,
-                      "flex": undefined,
-                      "margin": 4,
-                      "minWidth": "auto",
-                    }
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      },
+                      undefined,
+                    ]
                   }
-                  testID="button-container"
                 >
-                  <View
-                    accessibilityRole="button"
-                    accessibilityState={
-                      Object {
-                        "disabled": 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]}
+                  <Text
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "overflow": "hidden",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        false,
                         Object {
-                          "borderRadius": 20,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                      ]
-                    }
-                    testID="button"
-                  >
-                    <View
-                      style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "justifyContent": "center",
+                            "marginHorizontal": 16,
+                            "marginVertical": 9,
+                            "textAlign": "center",
+                          },
+                          false,
+                          Object {
+                            "marginHorizontal": 12,
+                          },
+                          Object {
+                            "marginHorizontal": 8,
+                          },
+                          false,
+                          Object {
+                            "color": "rgba(103, 80, 164, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 14,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.1,
+                            "lineHeight": 20,
                           },
                           undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        numberOfLines={1}
-                        selectable={false}
-                        style={
-                          Array [
-                            Object {
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            Object {
-                              "textAlign": "left",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "writingDirection": "ltr",
-                            },
-                            Array [
-                              Object {
-                                "marginHorizontal": 16,
-                                "marginVertical": 9,
-                                "textAlign": "center",
-                              },
-                              false,
-                              Object {
-                                "marginHorizontal": 12,
-                              },
-                              Object {
-                                "marginHorizontal": 8,
-                              },
-                              false,
-                              Object {
-                                "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>
+                        ],
+                      ]
+                    }
+                    testID="button-text"
+                  >
+                    first
+                  </Text>
                 </View>
               </View>
             </View>
@@ -761,10 +735,13 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(247, 243, 249)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -776,6 +753,8 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
       "shadowRadius": 3,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -784,6 +763,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgb(247, 243, 249)",
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -794,108 +774,128 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
         "shadowRadius": 1,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
-      collapsable={false}
       style={
-        Object {
-          "backgroundColor": "rgb(247, 243, 249)",
-          "flex": undefined,
-          "opacity": 1,
-        }
+        Array [
+          Object {
+            "alignSelf": "center",
+            "maxWidth": 960,
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
       <View
+        collapsable={false}
         style={
-          Array [
-            Object {
-              "alignSelf": "center",
-              "maxWidth": 960,
-              "overflow": "hidden",
-              "width": "100%",
-            },
-            undefined,
-          ]
+          Object {
+            "height": 0,
+          }
         }
+      />
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={Object {}}
       >
         <View
-          collapsable={false}
           style={
             Object {
-              "height": 0,
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "marginBottom": 0,
+              "marginHorizontal": 8,
+              "marginTop": 16,
             }
           }
-        />
-        <View
-          collapsable={false}
-          onLayout={[Function]}
-          style={Object {}}
         >
-          <View
+          <Text
+            accessibilityLiveRegion="polite"
+            accessibilityRole="alert"
             style={
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "marginBottom": 0,
-                "marginHorizontal": 8,
-                "marginTop": 16,
-              }
-            }
-          >
-            <Text
-              accessibilityLiveRegion="polite"
-              accessibilityRole="alert"
-              style={
+              Array [
+                Object {
+                  "textAlign": "left",
+                },
+                Object {
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                },
+                Object {
+                  "writingDirection": "ltr",
+                },
                 Array [
                   Object {
-                    "textAlign": "left",
+                    "flex": 1,
+                    "margin": 8,
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
-                    "fontFamily": "System",
-                    "fontWeight": "400",
-                    "letterSpacing": 0,
-                  },
-                  Object {
-                    "writingDirection": "ltr",
                   },
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    Object {
-                      "color": "rgba(28, 27, 31, 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={
+            Object {
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "margin": 4,
+            }
+          }
+        >
           <View
+            collapsable={false}
             style={
               Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-end",
+                "alignSelf": undefined,
+                "backgroundColor": "transparent",
+                "borderRadius": 20,
+                "bottom": undefined,
+                "end": undefined,
+                "flex": undefined,
+                "height": undefined,
+                "left": undefined,
                 "margin": 4,
+                "opacity": undefined,
+                "position": undefined,
+                "right": undefined,
+                "shadowColor": "#000",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+                "start": undefined,
+                "top": undefined,
+                "transform": undefined,
+                "width": undefined,
               }
             }
+            testID="button-container-outer-layer"
           >
             <View
               collapsable={false}
               style={
                 Object {
-                  "alignSelf": undefined,
-                  "bottom": undefined,
-                  "end": undefined,
+                  "backgroundColor": "transparent",
+                  "borderColor": "transparent",
+                  "borderRadius": 20,
+                  "borderStyle": "solid",
+                  "borderWidth": 0,
                   "flex": undefined,
-                  "left": undefined,
-                  "position": undefined,
-                  "right": undefined,
+                  "minWidth": "auto",
                   "shadowColor": "#000",
                   "shadowOffset": Object {
                     "height": 0,
@@ -903,153 +903,149 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                  "start": undefined,
-                  "top": undefined,
                 }
               }
-              testID="button-container-outer-layer"
+              testID="button-container"
             >
               <View
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": 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]}
                 style={
-                  Object {
-                    "flex": undefined,
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 0,
-                      "width": 0,
+                  Array [
+                    Object {
+                      "overflow": "hidden",
                     },
-                    "shadowOpacity": 0,
-                    "shadowRadius": 0,
-                  }
+                    false,
+                    Object {
+                      "borderRadius": 20,
+                    },
+                  ]
                 }
-                testID="button-container-inner-layer"
+                testID="button"
               >
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "backgroundColor": "transparent",
-                      "borderColor": "transparent",
-                      "borderRadius": 20,
-                      "borderStyle": "solid",
-                      "borderWidth": 0,
-                      "flex": undefined,
-                      "margin": 4,
-                      "minWidth": "auto",
-                    }
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      },
+                      undefined,
+                    ]
                   }
-                  testID="button-container"
                 >
-                  <View
-                    accessibilityRole="button"
-                    accessibilityState={
-                      Object {
-                        "disabled": 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]}
+                  <Text
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "overflow": "hidden",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        false,
                         Object {
-                          "borderRadius": 20,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                      ]
-                    }
-                    testID="button"
-                  >
-                    <View
-                      style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "justifyContent": "center",
+                            "marginHorizontal": 16,
+                            "marginVertical": 9,
+                            "textAlign": "center",
+                          },
+                          false,
+                          Object {
+                            "marginHorizontal": 12,
+                          },
+                          Object {
+                            "marginHorizontal": 8,
+                          },
+                          false,
+                          Object {
+                            "color": "rgba(103, 80, 164, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 14,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.1,
+                            "lineHeight": 20,
                           },
                           undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        numberOfLines={1}
-                        selectable={false}
-                        style={
-                          Array [
-                            Object {
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            Object {
-                              "textAlign": "left",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "writingDirection": "ltr",
-                            },
-                            Array [
-                              Object {
-                                "marginHorizontal": 16,
-                                "marginVertical": 9,
-                                "textAlign": "center",
-                              },
-                              false,
-                              Object {
-                                "marginHorizontal": 12,
-                              },
-                              Object {
-                                "marginHorizontal": 8,
-                              },
-                              false,
-                              Object {
-                                "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>
+                        ],
+                      ]
+                    }
+                    testID="button-text"
+                  >
+                    first
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "alignSelf": undefined,
+                "backgroundColor": "transparent",
+                "borderRadius": 20,
+                "bottom": undefined,
+                "end": undefined,
+                "flex": undefined,
+                "height": undefined,
+                "left": undefined,
+                "margin": 4,
+                "opacity": undefined,
+                "position": undefined,
+                "right": undefined,
+                "shadowColor": "#000",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0,
+                "shadowRadius": 0,
+                "start": undefined,
+                "top": undefined,
+                "transform": undefined,
+                "width": undefined,
+              }
+            }
+            testID="button-container-outer-layer"
+          >
             <View
               collapsable={false}
               style={
                 Object {
-                  "alignSelf": undefined,
-                  "bottom": undefined,
-                  "end": undefined,
+                  "backgroundColor": "transparent",
+                  "borderColor": "transparent",
+                  "borderRadius": 20,
+                  "borderStyle": "solid",
+                  "borderWidth": 0,
                   "flex": undefined,
-                  "left": undefined,
-                  "position": undefined,
-                  "right": undefined,
+                  "minWidth": "auto",
                   "shadowColor": "#000",
                   "shadowOffset": Object {
                     "height": 0,
@@ -1057,139 +1053,103 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   },
                   "shadowOpacity": 0,
                   "shadowRadius": 0,
-                  "start": undefined,
-                  "top": undefined,
                 }
               }
-              testID="button-container-outer-layer"
+              testID="button-container"
             >
               <View
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": 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]}
                 style={
-                  Object {
-                    "flex": undefined,
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 0,
-                      "width": 0,
+                  Array [
+                    Object {
+                      "overflow": "hidden",
                     },
-                    "shadowOpacity": 0,
-                    "shadowRadius": 0,
-                  }
+                    false,
+                    Object {
+                      "borderRadius": 20,
+                    },
+                  ]
                 }
-                testID="button-container-inner-layer"
+                testID="button"
               >
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "backgroundColor": "transparent",
-                      "borderColor": "transparent",
-                      "borderRadius": 20,
-                      "borderStyle": "solid",
-                      "borderWidth": 0,
-                      "flex": undefined,
-                      "margin": 4,
-                      "minWidth": "auto",
-                    }
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      },
+                      undefined,
+                    ]
                   }
-                  testID="button-container"
                 >
-                  <View
-                    accessibilityRole="button"
-                    accessibilityState={
-                      Object {
-                        "disabled": 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]}
+                  <Text
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "overflow": "hidden",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
-                        false,
                         Object {
-                          "borderRadius": 20,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                      ]
-                    }
-                    testID="button"
-                  >
-                    <View
-                      style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "justifyContent": "center",
+                            "marginHorizontal": 16,
+                            "marginVertical": 9,
+                            "textAlign": "center",
+                          },
+                          false,
+                          Object {
+                            "marginHorizontal": 12,
+                          },
+                          Object {
+                            "marginHorizontal": 8,
+                          },
+                          false,
+                          Object {
+                            "color": "rgba(103, 80, 164, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 14,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.1,
+                            "lineHeight": 20,
                           },
                           undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        numberOfLines={1}
-                        selectable={false}
-                        style={
-                          Array [
-                            Object {
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            Object {
-                              "textAlign": "left",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "writingDirection": "ltr",
-                            },
-                            Array [
-                              Object {
-                                "marginHorizontal": 16,
-                                "marginVertical": 9,
-                                "textAlign": "center",
-                              },
-                              false,
-                              Object {
-                                "marginHorizontal": 12,
-                              },
-                              Object {
-                                "marginHorizontal": 8,
-                              },
-                              false,
-                              Object {
-                                "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>
+                        ],
+                      ]
+                    }
+                    testID="button-text"
+                  >
+                    second
+                  </Text>
                 </View>
               </View>
             </View>
@@ -1207,10 +1167,13 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(247, 243, 249)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1222,6 +1185,8 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
       "shadowRadius": 3,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -1230,6 +1195,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgb(247, 243, 249)",
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -1240,120 +1206,108 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
         "shadowRadius": 1,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
-      collapsable={false}
       style={
-        Object {
-          "backgroundColor": "rgb(247, 243, 249)",
-          "flex": undefined,
-          "opacity": 1,
-        }
+        Array [
+          Object {
+            "alignSelf": "center",
+            "maxWidth": 960,
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
       <View
+        collapsable={false}
         style={
-          Array [
-            Object {
-              "alignSelf": "center",
-              "maxWidth": 960,
-              "overflow": "hidden",
-              "width": "100%",
-            },
-            undefined,
-          ]
+          Object {
+            "height": 0,
+          }
         }
+      />
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={Object {}}
       >
         <View
-          collapsable={false}
           style={
             Object {
-              "height": 0,
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "marginBottom": 0,
+              "marginHorizontal": 8,
+              "marginTop": 16,
             }
           }
-        />
-        <View
-          collapsable={false}
-          onLayout={[Function]}
-          style={Object {}}
         >
           <View
             style={
               Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "marginBottom": 0,
-                "marginHorizontal": 8,
-                "marginTop": 16,
+                "margin": 8,
               }
             }
           >
-            <View
-              style={
+            <Image
+              accessibilityIgnoresInvertColors={true}
+              source={
                 Object {
-                  "margin": 8,
+                  "uri": "https://callstack.com/images/team/Satya.png",
                 }
               }
-            >
-              <Image
-                accessibilityIgnoresInvertColors={true}
-                source={
-                  Object {
-                    "uri": "https://callstack.com/images/team/Satya.png",
-                  }
-                }
-                style={
-                  Object {
-                    "height": 40,
-                    "width": 40,
-                  }
-                }
-              />
-            </View>
-            <Text
-              accessibilityLiveRegion="polite"
-              accessibilityRole="alert"
               style={
+                Object {
+                  "height": 40,
+                  "width": 40,
+                }
+              }
+            />
+          </View>
+          <Text
+            accessibilityLiveRegion="polite"
+            accessibilityRole="alert"
+            style={
+              Array [
+                Object {
+                  "textAlign": "left",
+                },
+                Object {
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                },
+                Object {
+                  "writingDirection": "ltr",
+                },
                 Array [
                   Object {
-                    "textAlign": "left",
+                    "flex": 1,
+                    "margin": 8,
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
-                    "fontFamily": "System",
-                    "fontWeight": "400",
-                    "letterSpacing": 0,
-                  },
-                  Object {
-                    "writingDirection": "ltr",
                   },
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    Object {
-                      "color": "rgba(28, 27, 31, 1)",
-                    },
-                  ],
-                ]
-              }
-            >
-              Two line text string with two actions. One to two lines is preferable on mobile.
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "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={
+            Object {
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "margin": 4,
+            }
+          }
+        />
       </View>
     </View>
   </View>
@@ -1366,10 +1320,13 @@ exports[`renders visible banner, without action buttons and without image 1`] =
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(247, 243, 249)",
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1381,6 +1338,8 @@ exports[`renders visible banner, without action buttons and without image 1`] =
       "shadowRadius": 3,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -1389,6 +1348,7 @@ exports[`renders visible banner, without action buttons and without image 1`] =
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgb(247, 243, 249)",
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -1399,98 +1359,86 @@ exports[`renders visible banner, without action buttons and without image 1`] =
         "shadowRadius": 1,
       }
     }
-    testID="surface-inner-layer"
+    testID="surface"
   >
     <View
-      collapsable={false}
       style={
-        Object {
-          "backgroundColor": "rgb(247, 243, 249)",
-          "flex": undefined,
-          "opacity": 1,
-        }
+        Array [
+          Object {
+            "alignSelf": "center",
+            "maxWidth": 960,
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          undefined,
+        ]
       }
-      testID="surface"
     >
       <View
+        collapsable={false}
         style={
-          Array [
-            Object {
-              "alignSelf": "center",
-              "maxWidth": 960,
-              "overflow": "hidden",
-              "width": "100%",
-            },
-            undefined,
-          ]
+          Object {
+            "height": 0,
+          }
         }
+      />
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={Object {}}
       >
         <View
-          collapsable={false}
           style={
             Object {
-              "height": 0,
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "marginBottom": 0,
+              "marginHorizontal": 8,
+              "marginTop": 16,
             }
           }
-        />
-        <View
-          collapsable={false}
-          onLayout={[Function]}
-          style={Object {}}
         >
-          <View
+          <Text
+            accessibilityLiveRegion="polite"
+            accessibilityRole="alert"
             style={
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "flex-start",
-                "marginBottom": 0,
-                "marginHorizontal": 8,
-                "marginTop": 16,
-              }
-            }
-          >
-            <Text
-              accessibilityLiveRegion="polite"
-              accessibilityRole="alert"
-              style={
+              Array [
+                Object {
+                  "textAlign": "left",
+                },
+                Object {
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                },
+                Object {
+                  "writingDirection": "ltr",
+                },
                 Array [
                   Object {
-                    "textAlign": "left",
+                    "flex": 1,
+                    "margin": 8,
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
-                    "fontFamily": "System",
-                    "fontWeight": "400",
-                    "letterSpacing": 0,
-                  },
-                  Object {
-                    "writingDirection": "ltr",
                   },
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "margin": 8,
-                    },
-                    Object {
-                      "color": "rgba(28, 27, 31, 1)",
-                    },
-                  ],
-                ]
-              }
-            >
-              Two line text string with two actions. One to two lines is preferable on mobile.
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "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={
+            Object {
+              "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 f8ae5027d0..a5888a71aa 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -75,10 +75,13 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -90,14 +93,19 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -108,82 +116,84 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
           }
-          testID="bottom-navigation-bar-content"
+          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "alignItems": "center",
+                  "height": 80,
+                  "justifyContent": "center",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "height": 80,
+                    "alignSelf": "center",
+                    "height": 32,
                     "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -192,208 +202,208 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   style={
                     Object {
                       "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
                       "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
-                    }
-                  />
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
-                    />
-                  </View>
+                    }
+                  />
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "alignItems": "center",
+                  "height": 80,
+                  "justifyContent": "center",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "height": 80,
+                    "alignSelf": "center",
+                    "height": 32,
                     "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -401,192 +411,192 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
-                    />
-                  </View>
+                    }
+                  />
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "alignItems": "center",
+                  "height": 80,
+                  "justifyContent": "center",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "height": 80,
+                    "alignSelf": "center",
+                    "height": 32,
                     "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -594,169 +604,154 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰚇
+                  </Text>
                 </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`hides labels in shifting bottom navigation 1`] = `
-<View
-  style={
-    Array [
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`hides labels in shifting bottom navigation 1`] = `
+<View
+  style={
+    Array [
       Object {
         "flex": 1,
         "overflow": "hidden",
@@ -828,10 +823,13 @@ exports[`hides labels in shifting bottom navigation 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -843,14 +841,19 @@ exports[`hides labels in shifting bottom navigation 1`] = `
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -861,82 +864,84 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
           }
-          testID="bottom-navigation-bar-content"
+          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "alignItems": "center",
+                  "height": 80,
+                  "justifyContent": "center",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "height": 80,
+                    "alignSelf": "center",
+                    "height": 32,
                     "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -945,208 +950,208 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   style={
                     Object {
                       "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
                       "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
-                    }
-                  />
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
-                    />
-                  </View>
+                    }
+                  />
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "alignItems": "center",
+                  "height": 80,
+                  "justifyContent": "center",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "height": 80,
+                    "alignSelf": "center",
+                    "height": 32,
                     "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -1154,192 +1159,192 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
-                    />
-                  </View>
+                    }
+                  />
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "alignItems": "center",
+                  "height": 80,
+                  "justifyContent": "center",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "height": 80,
+                    "alignSelf": "center",
+                    "height": 32,
                     "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -1347,154 +1352,139 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      Array [
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
-                    />
-                  </View>
+                    }
+                  />
                 </View>
               </View>
             </View>
@@ -1713,10 +1703,13 @@ exports[`renders bottom navigation with getLazy 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -1728,14 +1721,19 @@ exports[`renders bottom navigation with getLazy 1`] = `
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -1746,81 +1744,83 @@ exports[`renders bottom navigation with getLazy 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
           }
-          testID="bottom-navigation-bar-content"
+          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -1829,323 +1829,323 @@ exports[`renders bottom navigation with getLazy 1`] = `
                   style={
                     Object {
                       "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
                       "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
-                  />
-                  <View
-                    collapsable={false}
+                  >
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "alignItems": "center",
-                        "bottom": 0,
                         "left": 0,
-                        "opacity": 1,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(28, 27, 31, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 0
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           Object {
                             "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 0
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -2153,307 +2153,147 @@ exports[`renders bottom navigation with getLazy 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰄀
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
                           },
                           Object {
-                            "textAlign": "left",
+                            "backgroundColor": "transparent",
                           },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "bottom": 0,
                         "left": 0,
-                        "opacity": 1,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -2461,307 +2301,159 @@ exports[`renders bottom navigation with getLazy 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 1
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 1
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -2769,307 +2461,147 @@ exports[`renders bottom navigation with getLazy 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰋑
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰋑
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰚇
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
                           },
                           Object {
-                            "textAlign": "left",
+                            "backgroundColor": "transparent",
                           },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 3
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "bottom": 0,
                         "left": 0,
-                        "opacity": 1,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 3
-                    </Text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -3077,464 +2609,159 @@ exports[`renders bottom navigation with getLazy 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰒛
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰒛
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 2
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 4
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 4
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 2
+                  </Text>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders bottom navigation with scene animation 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        Object {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        Array [
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          Object {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={true}
-        style={
-          Object {
-            "flex": 1,
-            "opacity": 1,
-            "transform": Array [
-              Object {
-                "translateX": 0,
-              },
+          <View
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "alignSelf": undefined,
-        "bottom": 0,
-        "end": undefined,
-        "flex": undefined,
-        "left": 0,
-        "position": undefined,
-        "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": Object {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-        "start": undefined,
-        "top": undefined,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": Object {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar-inner-layer"
-    >
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
-        style={
-          Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
-          }
-        }
-        testID="bottom-navigation-bar"
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
+                "selected": false,
+              }
             }
-          }
-          testID="bottom-navigation-bar-content"
-        >
-          <View
-            accessibilityRole="tablist"
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -3542,276 +2769,147 @@ exports[`renders bottom navigation with scene animation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 0,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
-                    }
-                  />
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                    󰋑
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰋑
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -3819,259 +2917,159 @@ exports[`renders bottom navigation with scene animation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 3
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 3
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -4079,259 +3077,147 @@ exports[`renders bottom navigation with scene animation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
+                    󰒛
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰒛
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -4339,482 +3225,107 @@ exports[`renders bottom navigation with scene animation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰋑
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰋑
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                      ]
-                    }
-                  >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 3
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 4
+                  </Text>
                 </View>
-              </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                pointerEvents="none"
-                style={
-                  Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
-                  }
-                }
-              >
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰒛
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰒛
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                      ]
-                    }
-                  >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 4
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 4
+                  </Text>
                 </View>
               </View>
             </View>
@@ -4826,7 +3337,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
 </View>
 `;
 
-exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
+exports[`renders bottom navigation with scene animation 1`] = `
 <View
   style={
     Array [
@@ -4876,7 +3387,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
     >
       <View
         collapsable={false}
-        renderToHardwareTextureAndroid={false}
+        renderToHardwareTextureAndroid={true}
         style={
           Object {
             "flex": 1,
@@ -4901,10 +3412,13 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -4916,14 +3430,19 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -4934,81 +3453,88 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
           }
-          testID="bottom-navigation-bar-content"
+          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 0,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -5017,188 +3543,275 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   style={
                     Object {
                       "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
                       "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
-                    }
-                  />
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰍉
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <text
-                      color="rgba(28, 27, 31, 1)"
-                    >
-                      Route: 0
-                    </text>
-                  </View>
-                  <View
-                    collapsable={false}
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(28, 27, 31, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ]
                     }
                   >
-                    <text
-                      color="rgba(28, 27, 31, 1)"
-                    >
-                      Route: 0
-                    </text>
-                  </View>
+                    Route: 0
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -5206,172 +3819,259 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰄀
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 1
-                    </text>
-                  </View>
-                  <View
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ]
+                    }
                   >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 1
-                    </text>
-                  </View>
+                    Route: 1
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -5379,329 +4079,259 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰚇
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 2
-                    </text>
-                  </View>
-                  <View
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 2
-                    </text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders custom icon and label in shifting bottom navigation 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        Object {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        Array [
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          Object {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          Object {
-            "flex": 1,
-            "opacity": 1,
-            "transform": Array [
-              Object {
-                "translateX": 0,
-              },
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 2
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "alignSelf": undefined,
-        "bottom": 0,
-        "end": undefined,
-        "flex": undefined,
-        "left": 0,
-        "position": undefined,
-        "right": 0,
-        "shadowColor": "#000",
-        "shadowOffset": Object {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-        "start": undefined,
-        "top": undefined,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "flex": undefined,
-          "shadowColor": "#000",
-          "shadowOffset": Object {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar-inner-layer"
-    >
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
-        style={
-          Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
-          }
-        }
-        testID="bottom-navigation-bar"
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
+                "selected": false,
+              }
             }
-          }
-          testID="bottom-navigation-bar-content"
-        >
-          <View
-            accessibilityRole="tablist"
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -5709,176 +4339,147 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 0,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
-                    }
-                  />
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                    󰋑
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰋑
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <text
-                      color="rgba(28, 27, 31, 1)"
-                    >
-                      Route: 0
-                    </text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -5886,159 +4487,111 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 1
-                    </text>
-                  </View>
+                    Route: 3
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -6046,319 +4599,147 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 2
-                    </text>
-                  </View>
+                    󰒛
+                  </Text>
                 </View>
-              </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                pointerEvents="none"
-                style={
-                  Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
-                  }
-                }
-              >
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰒛
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 3
-                    </text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -6366,122 +4747,54 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(29, 25, 43, 1)"
-                    />
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <icon
-                      color="rgba(73, 69, 79, 1)"
-                    />
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <text
-                      color="rgba(73, 69, 79, 1)"
-                    >
-                      Route: 4
-                    </text>
-                  </View>
+                    Route: 4
+                  </Text>
                 </View>
               </View>
             </View>
@@ -6493,7 +4806,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
 </View>
 `;
 
-exports[`renders custom icon and label with custom colors in non-shifting bottom navigation 1`] = `
+exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
 <View
   style={
     Array [
@@ -6568,10 +4881,13 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -6583,14 +4899,19 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -6601,81 +4922,2065 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
-          }
-          testID="bottom-navigation-bar-content"
-        >
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
+          }
+          testID="bottom-navigation-bar-content-wrapper"
+        >
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
+                      "height": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(28, 27, 31, 1)"
+                  >
+                    Route: 0
+                  </text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(28, 27, 31, 1)"
+                  >
+                    Route: 0
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 1
+                  </text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 1
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 2
+                  </text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 2
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders custom icon and label in shifting bottom navigation 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="bottom-navigation"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        Object {
+          "backgroundColor": "rgba(255, 251, 254, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityElementsHidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        Array [
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          Object {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          Object {
+            "flex": 1,
+            "opacity": 1,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+              Object {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        Route: 0
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "alignSelf": undefined,
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "end": undefined,
+        "flex": undefined,
+        "height": undefined,
+        "left": 0,
+        "opacity": undefined,
+        "position": undefined,
+        "right": 0,
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+        "start": undefined,
+        "top": undefined,
+        "transform": undefined,
+        "width": undefined,
+      }
+    }
+    testID="bottom-navigation-bar-outer-layer"
+  >
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "flex": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        }
+      }
+      testID="bottom-navigation-bar"
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
+          }
+        }
+        testID="bottom-navigation-bar-content"
+      >
+        <View
+          accessibilityRole="tablist"
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
+          }
+          testID="bottom-navigation-bar-content-wrapper"
+        >
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 0,
+                      },
+                    ],
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
+                      "height": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(28, 27, 31, 1)"
+                  >
+                    Route: 0
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 1
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 2
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 3
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(29, 25, 43, 1)"
+                  />
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <icon
+                    color="rgba(73, 69, 79, 1)"
+                  />
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 4
+                  </text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders custom icon and label with custom colors in non-shifting bottom navigation 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="bottom-navigation"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        Object {
+          "backgroundColor": "rgba(255, 251, 254, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityElementsHidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        Array [
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          Object {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          Object {
+            "flex": 1,
+            "opacity": 1,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+              Object {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        Route: 0
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "alignSelf": undefined,
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "end": undefined,
+        "flex": undefined,
+        "height": undefined,
+        "left": 0,
+        "opacity": undefined,
+        "position": undefined,
+        "right": 0,
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+        "start": undefined,
+        "top": undefined,
+        "transform": undefined,
+        "width": undefined,
+      }
+    }
+    testID="bottom-navigation-bar-outer-layer"
+  >
+    <View
+      collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "flex": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        }
+      }
+      testID="bottom-navigation-bar"
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
+          }
+        }
+        testID="bottom-navigation-bar-content"
+      >
+        <View
+          accessibilityRole="tablist"
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
+          }
+          testID="bottom-navigation-bar-content-wrapper"
+        >
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
+                      "height": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#FBF7DB",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#853D4B",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "#FBF7DB",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 0
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "#853D4B",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 0
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -6683,324 +6988,307 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "#FBF7DB",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
-                  />
-                  <View
-                    collapsable={false}
+                  >
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
+                      Array [
+                        Object {
+                          "color": "#853D4B",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "alignItems": "center",
-                        "bottom": 0,
                         "left": 0,
-                        "opacity": 1,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FBF7DB",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#853D4B",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "#FBF7DB",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 1
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
+                            "color": "#853D4B",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 1
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -7008,307 +7296,147 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FBF7DB",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#853D4B",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "#FBF7DB",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰚇
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "color": "#853D4B",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
                           },
                           Object {
-                            "textAlign": "left",
+                            "backgroundColor": "transparent",
                           },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "bottom": 0,
                         "left": 0,
-                        "opacity": 1,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -7316,270 +7444,107 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FBF7DB",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#853D4B",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "#FBF7DB",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 2
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
+                            "color": "#853D4B",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 2
+                  </Text>
                 </View>
               </View>
             </View>
@@ -7666,10 +7631,13 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -7681,14 +7649,19 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -7699,81 +7672,88 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
           }
-          testID="bottom-navigation-bar-content"
+          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 0,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -7782,275 +7762,275 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   style={
                     Object {
                       "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
                       "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
                       "transform": Array [
                         Object {
-                          "translateY": 0,
+                          "scaleX": 1,
                         },
                       ],
-                      "width": 32,
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "#FBF7DB",
+                          "fontSize": 24,
+                        },
+                        Array [
                           Object {
-                            "scaleX": 1,
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
-                    }
-                  />
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#FBF7DB",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#853D4B",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "#853D4B",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰍉
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 0
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -8058,259 +8038,259 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "#FBF7DB",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "#FBF7DB",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#853D4B",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "#853D4B",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰄀
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 1
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -8318,222 +8298,202 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "#FBF7DB",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "#FBF7DB",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "#853D4B",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "#853D4B",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰚇
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "#FBF7DB",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 2
+                  </Text>
                 </View>
               </View>
             </View>
@@ -8620,10 +8580,13 @@ exports[`renders non-shifting bottom navigation 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -8635,14 +8598,19 @@ exports[`renders non-shifting bottom navigation 1`] = `
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -8653,81 +8621,408 @@ exports[`renders non-shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
           }
-          testID="bottom-navigation-bar-content"
+          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
+                      "height": 32,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    collapsable={false}
+                    numberOfLines={1}
+                    style={
+                      Object {
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(28, 27, 31, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 0
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(28, 27, 31, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 0
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -8735,324 +9030,307 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
-                  />
-                  <View
-                    collapsable={false}
+                  >
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
+                      Array [
+                        Object {
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "alignItems": "center",
-                        "bottom": 0,
                         "left": 0,
-                        "opacity": 1,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 1
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 1
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "width": 32,
                   }
                 }
               >
@@ -9060,307 +9338,147 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰚇
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
-                  }
-                >
-                  <View
-                    collapsable={false}
-                    style={
+                    Array [
                       Object {
-                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
+                      },
+                      Object {
                         "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
-                  <View
+                        "top": 2,
+                      },
+                    ]
+                  }
+                >
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
+                  />
                 </View>
               </View>
-            </View>
-            <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "selected": false,
-                }
-              }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
-            >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "height": 16,
+                    "paddingBottom": 2,
                   }
                 }
               >
@@ -9368,270 +9486,107 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "width": 32,
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
+                  <Text
+                    maxFontSizeMultiplier={1}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
                         },
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    Route: 2
+                  </Text>
                 </View>
                 <View
                   collapsable={false}
                   style={
                     Object {
-                      "height": 16,
-                      "paddingBottom": 2,
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
-                            "fontFamily": "System",
+                            "backgroundColor": "transparent",
                             "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          Object {
-                            "textAlign": "left",
+                            "height": 56,
+                            "textAlign": "center",
                           },
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 2
+                  </Text>
                 </View>
               </View>
             </View>
@@ -9718,10 +9673,13 @@ exports[`renders shifting bottom navigation 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "transparent",
         "bottom": 0,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": 0,
+        "opacity": undefined,
         "position": undefined,
         "right": 0,
         "shadowColor": "#000",
@@ -9733,14 +9691,19 @@ exports[`renders shifting bottom navigation 1`] = `
         "shadowRadius": 0,
         "start": undefined,
         "top": undefined,
+        "transform": undefined,
+        "width": undefined,
       }
     }
     testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
+      onLayout={[Function]}
+      pointerEvents="none"
       style={
         Object {
+          "backgroundColor": "transparent",
           "flex": undefined,
           "shadowColor": "#000",
           "shadowOffset": Object {
@@ -9751,81 +9714,88 @@ exports[`renders shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar-inner-layer"
+      testID="bottom-navigation-bar"
     >
       <View
         collapsable={false}
-        onLayout={[Function]}
-        pointerEvents="none"
         style={
           Object {
-            "backgroundColor": "transparent",
-            "flex": undefined,
+            "alignItems": "center",
+            "backgroundColor": "rgb(243, 237, 246)",
+            "overflow": "hidden",
           }
         }
-        testID="bottom-navigation-bar"
+        testID="bottom-navigation-bar-content"
       >
         <View
-          collapsable={false}
+          accessibilityRole="tablist"
           style={
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "rgb(243, 237, 246)",
-              "overflow": "hidden",
-            }
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "marginBottom": 0,
+                "marginHorizontal": 0,
+              },
+              false,
+            ]
           }
-          testID="bottom-navigation-bar-content"
+          testID="bottom-navigation-bar-content-wrapper"
         >
           <View
-            accessibilityRole="tablist"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": true,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flexDirection": "row",
+                  "flex": 1,
+                  "paddingVertical": 6,
                 },
                 Object {
-                  "marginBottom": 0,
-                  "marginHorizontal": 0,
+                  "paddingVertical": 0,
                 },
-                false,
               ]
             }
-            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": true,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 0,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -9834,275 +9804,275 @@ exports[`renders shifting bottom navigation 1`] = `
                   style={
                     Object {
                       "alignSelf": "center",
+                      "backgroundColor": "rgba(232, 222, 248, 1)",
+                      "borderRadius": 16,
                       "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
                       "transform": Array [
                         Object {
-                          "translateY": 0,
+                          "scaleX": 1,
                         },
                       ],
-                      "width": 32,
+                      "width": 64,
+                    }
+                  }
+                />
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignSelf": "center",
-                        "backgroundColor": "rgba(232, 222, 248, 1)",
-                        "borderRadius": 16,
-                        "height": 32,
-                        "transform": Array [
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
                           Object {
-                            "scaleX": 1,
+                            "backgroundColor": "transparent",
                           },
                         ],
-                        "width": 64,
-                      }
-                    }
-                  />
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                    󰍉
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰍉
-                    </Text>
-                  </View>
-                  <View
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰍉
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
+                        "opacity": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 0
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 0
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -10110,259 +10080,259 @@ exports[`renders shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰄀
-                    </Text>
-                  </View>
-                  <View
+                    󰄀
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰄀
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 1
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 1
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -10370,259 +10340,259 @@ exports[`renders shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰚇
-                    </Text>
-                  </View>
-                  <View
+                    󰚇
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰚇
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 2
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 2
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -10630,259 +10600,259 @@ exports[`renders shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰋑
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰋑
-                    </Text>
-                  </View>
-                  <View
+                    󰋑
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰋑
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 3
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 3
+                  </Text>
                 </View>
               </View>
             </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "selected": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "paddingVertical": 6,
+                },
+                Object {
+                  "paddingVertical": 0,
+                },
+              ]
+            }
+          >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              pointerEvents="none"
+              style={
                 Object {
-                  "selected": false,
+                  "paddingBottom": 16,
+                  "paddingTop": 12,
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "paddingVertical": 6,
-                  },
-                  Object {
-                    "paddingVertical": 0,
-                  },
-                ]
-              }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "paddingBottom": 16,
-                    "paddingTop": 12,
+                    "alignSelf": "center",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "marginBottom": 4,
+                    "marginHorizontal": 12,
+                    "marginTop": 0,
+                    "transform": Array [
+                      Object {
+                        "translateY": 7,
+                      },
+                    ],
+                    "width": 32,
                   }
                 }
               >
@@ -10890,222 +10860,202 @@ exports[`renders shifting bottom navigation 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "alignSelf": "center",
-                      "height": 32,
-                      "justifyContent": "center",
-                      "marginBottom": 4,
-                      "marginHorizontal": 12,
-                      "marginTop": 0,
-                      "transform": Array [
-                        Object {
-                          "translateY": 7,
-                        },
-                      ],
-                      "width": 32,
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
                     }
                   }
                 >
-                  <View
-                    collapsable={false}
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
+                      Array [
+                        Object {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
                         Array [
                           Object {
-                            "color": "rgba(29, 25, 43, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰒛
-                    </Text>
-                  </View>
-                  <View
-                    collapsable={false}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 1,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 4,
-                      }
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                        Object {
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      accessibilityElementsHidden={true}
-                      allowFontScaling={false}
-                      importantForAccessibility="no-hide-descendants"
-                      pointerEvents="none"
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "color": "rgba(73, 69, 79, 1)",
-                            "fontSize": 24,
-                          },
-                          Array [
-                            Object {
-                              "lineHeight": 24,
-                              "transform": Array [
-                                Object {
-                                  "scaleX": 1,
-                                },
-                              ],
-                            },
-                            Object {
-                              "backgroundColor": "transparent",
-                            },
-                          ],
-                          Object {
-                            "fontFamily": "Material Design Icons",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          Object {},
-                        ]
-                      }
-                    >
-                      󰒛
-                    </Text>
-                  </View>
-                  <View
+                    󰒛
+                  </Text>
+                </View>
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 1,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 4,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityElementsHidden={true}
+                    allowFontScaling={false}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
-                          "left": 0,
-                          "position": "absolute",
+                          "color": "rgba(73, 69, 79, 1)",
+                          "fontSize": 24,
                         },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                            "transform": Array [
+                              Object {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          Object {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
                         Object {
-                          "right": 0,
-                          "top": 2,
+                          "fontFamily": "Material Design Icons",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                         },
+                        Object {},
                       ]
                     }
                   >
-                    <Text
-                      collapsable={false}
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "alignSelf": "flex-end",
-                          "backgroundColor": "rgba(179, 38, 30, 1)",
-                          "borderRadius": 8,
-                          "color": "rgba(255, 255, 255, 1)",
-                          "fontSize": 8,
-                          "height": 16,
-                          "lineHeight": 16,
-                          "minWidth": 16,
-                          "opacity": 0,
-                          "overflow": "hidden",
-                          "paddingHorizontal": 3,
-                          "textAlign": "center",
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    />
-                  </View>
+                    󰒛
+                  </Text>
                 </View>
                 <View
-                  collapsable={false}
                   style={
-                    Object {
-                      "height": 16,
-                      "paddingBottom": 2,
-                    }
+                    Array [
+                      Object {
+                        "left": 0,
+                        "position": "absolute",
+                      },
+                      Object {
+                        "right": 0,
+                        "top": 2,
+                      },
+                    ]
                   }
                 >
-                  <View
+                  <Text
                     collapsable={false}
+                    numberOfLines={1}
                     style={
                       Object {
-                        "bottom": 0,
-                        "left": 0,
+                        "alignSelf": "flex-end",
+                        "backgroundColor": "rgba(179, 38, 30, 1)",
+                        "borderRadius": 8,
+                        "color": "rgba(255, 255, 255, 1)",
+                        "fontSize": 8,
+                        "height": 16,
+                        "lineHeight": 16,
+                        "minWidth": 16,
                         "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
+                        "overflow": "hidden",
+                        "paddingHorizontal": 3,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
                       }
                     }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1}
-                      style={
+                  />
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 16,
+                    "paddingBottom": 2,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    Object {
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "backgroundColor": "transparent",
+                            "fontSize": 12,
+                            "height": 56,
+                            "textAlign": "center",
+                          },
+                          Object {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            Object {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      Route: 4
-                    </Text>
-                  </View>
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 4
+                  </Text>
                 </View>
               </View>
             </View>
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index f1c03b5fc9..8b7bb4d2b8 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -6,10 +6,14 @@ exports[`renders button with an accessibility hint 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +25,8 @@ exports[`renders button with an accessibility hint 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -29,7 +35,13 @@ exports[`renders button with an accessibility hint 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -39,116 +51,100 @@ exports[`renders button with an accessibility hint 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityHint="hint"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityHint="hint"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Button with accessibility hint
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Button with accessibility hint
+        </Text>
       </View>
     </View>
   </View>
@@ -161,10 +157,14 @@ exports[`renders button with an accessibility label 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -176,6 +176,8 @@ exports[`renders button with an accessibility label 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -184,7 +186,13 @@ exports[`renders button with an accessibility label 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -194,116 +202,100 @@ exports[`renders button with an accessibility label 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityLabel="label"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityLabel="label"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Button with accessibility label
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Button with accessibility label
+        </Text>
       </View>
     </View>
   </View>
@@ -316,10 +308,14 @@ exports[`renders button with button color 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "#e91e63",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -331,6 +327,8 @@ exports[`renders button with button color 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -339,7 +337,13 @@ exports[`renders button with button color 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "#e91e63",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -349,115 +353,99 @@ exports[`renders button with button color 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "#e91e63",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Custom Button
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Custom Button
+        </Text>
       </View>
     </View>
   </View>
@@ -470,10 +458,14 @@ exports[`renders button with color 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -485,6 +477,8 @@ exports[`renders button with color 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -493,7 +487,13 @@ exports[`renders button with color 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -503,115 +503,99 @@ exports[`renders button with color 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "#e91e63",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "#e91e63",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Custom Button
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Custom Button
+        </Text>
       </View>
     </View>
   </View>
@@ -624,10 +608,14 @@ exports[`renders button with custom testID 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -639,6 +627,8 @@ exports[`renders button with custom testID 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="custom:testID-container-outer-layer"
@@ -647,7 +637,13 @@ exports[`renders button with custom testID 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -657,115 +653,99 @@ exports[`renders button with custom testID 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="custom:testID-container-inner-layer"
+    testID="custom:testID-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="custom:testID-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="custom:testID"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="custom:testID"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="custom:testID-text"
-          >
-            Button with custom testID
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="custom:testID-text"
+        >
+          Button with custom testID
+        </Text>
       </View>
     </View>
   </View>
@@ -778,10 +758,14 @@ exports[`renders button with icon 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -793,6 +777,8 @@ exports[`renders button with icon 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -801,7 +787,13 @@ exports[`renders button with icon 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -811,171 +803,155 @@ exports[`renders button with icon 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
         <View
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "marginLeft": 12,
+                "marginRight": -4,
+              },
+              Object {
+                "marginLeft": 16,
+                "marginRight": -16,
+              },
+              Object {
+                "marginLeft": 12,
+                "marginRight": -8,
               },
-              undefined,
             ]
           }
+          testID="button-icon-container"
         >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginLeft": 12,
-                  "marginRight": -4,
-                },
-                Object {
-                  "marginLeft": 16,
-                  "marginRight": -16,
-                },
-                Object {
-                  "marginLeft": 12,
-                  "marginRight": -8,
-                },
-              ]
-            }
-            testID="button-icon-container"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontSize": 18,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 18,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰄀
-            </Text>
-          </View>
           <Text
-            numberOfLines={1}
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
             selectable={false}
             style={
               Array [
                 Object {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
-                },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontSize": 18,
                 },
                 Array [
                   Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 16,
+                    "lineHeight": 18,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  undefined,
-                  false,
                   Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
+                    "backgroundColor": "transparent",
                   },
-                  undefined,
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="button-text"
           >
-            Icon Button
+            󰄀
           </Text>
         </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
+              Array [
+                Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Icon Button
+        </Text>
       </View>
     </View>
   </View>
@@ -988,10 +964,14 @@ exports[`renders button with icon in reverse order 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1003,6 +983,8 @@ exports[`renders button with icon in reverse order 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -1011,7 +993,13 @@ exports[`renders button with icon in reverse order 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -1021,173 +1009,157 @@ exports[`renders button with icon in reverse order 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
-            false,
             Object {
-              "borderRadius": 20,
+              "flexDirection": "row-reverse",
             },
           ]
         }
-        testID="button"
       >
         <View
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "marginLeft": -4,
+                "marginRight": 12,
               },
               Object {
-                "flexDirection": "row-reverse",
+                "marginLeft": -16,
+                "marginRight": 16,
+              },
+              Object {
+                "marginLeft": -8,
+                "marginRight": 12,
               },
             ]
           }
+          testID="button-icon-container"
         >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginLeft": -4,
-                  "marginRight": 12,
-                },
-                Object {
-                  "marginLeft": -16,
-                  "marginRight": 16,
-                },
-                Object {
-                  "marginLeft": -8,
-                  "marginRight": 12,
-                },
-              ]
-            }
-            testID="button-icon-container"
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontSize": 18,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 18,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅂
-            </Text>
-          </View>
           <Text
-            numberOfLines={1}
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
             selectable={false}
             style={
               Array [
                 Object {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
-                },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontSize": 18,
                 },
                 Array [
                   Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 16,
+                    "lineHeight": 18,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  undefined,
-                  false,
                   Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
+                    "backgroundColor": "transparent",
                   },
-                  undefined,
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="button-text"
           >
-            Right Icon
+            󰅂
           </Text>
         </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
+              Array [
+                Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Right Icon
+        </Text>
       </View>
     </View>
   </View>
@@ -1200,10 +1172,14 @@ exports[`renders contained contained with mode 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(103, 80, 164, 1)",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1215,6 +1191,8 @@ exports[`renders contained contained with mode 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -1223,7 +1201,13 @@ exports[`renders contained contained with mode 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgba(103, 80, 164, 1)",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -1233,116 +1217,100 @@ exports[`renders contained contained with mode 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(103, 80, 164, 1)",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(255, 255, 255, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 24,
-                    "marginVertical": 10,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(255, 255, 255, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Contained Button
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Contained Button
+        </Text>
       </View>
     </View>
   </View>
@@ -1355,10 +1323,14 @@ exports[`renders disabled button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1370,6 +1342,8 @@ exports[`renders disabled button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -1378,7 +1352,13 @@ exports[`renders disabled button 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -1388,115 +1368,99 @@ exports[`renders disabled button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
                 },
+                false,
                 Object {
-                  "textAlign": "left",
+                  "marginHorizontal": 12,
                 },
+                undefined,
+                false,
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(28, 27, 31, 0.38)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Disabled Button
-          </Text>
-        </View>
+                  "color": "rgba(28, 27, 31, 0.38)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Disabled Button
+        </Text>
       </View>
     </View>
   </View>
@@ -1509,10 +1473,14 @@ exports[`renders loading button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1524,6 +1492,8 @@ exports[`renders loading button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -1532,7 +1502,13 @@ exports[`renders loading button 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -1542,105 +1518,104 @@ exports[`renders loading button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
         <View
+          accessibilityRole="progressbar"
+          accessibilityState={
+            Object {
+              "busy": true,
+            }
+          }
+          accessible={true}
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
-              undefined,
+              Array [
+                Object {
+                  "marginLeft": 12,
+                  "marginRight": -4,
+                },
+                Object {
+                  "marginLeft": 16,
+                  "marginRight": -16,
+                },
+                Object {
+                  "marginLeft": 12,
+                  "marginRight": -8,
+                },
+              ],
             ]
           }
         >
           <View
-            accessibilityRole="progressbar"
-            accessibilityState={
+            collapsable={false}
+            style={
               Object {
-                "busy": true,
+                "height": 18,
+                "opacity": 1,
+                "width": 18,
               }
             }
-            accessible={true}
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Array [
-                  Object {
-                    "marginLeft": 12,
-                    "marginRight": -4,
-                  },
-                  Object {
-                    "marginLeft": 16,
-                    "marginRight": -16,
-                  },
-                  Object {
-                    "marginLeft": 12,
-                    "marginRight": -8,
-                  },
-                ],
-              ]
-            }
           >
             <View
               collapsable={false}
               style={
                 Object {
-                  "height": 18,
-                  "opacity": 1,
-                  "width": 18,
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 }
               }
             >
@@ -1648,13 +1623,13 @@ exports[`renders loading button 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "height": 18,
+                    "transform": Array [
+                      Object {
+                        "rotate": "45deg",
+                      },
+                    ],
+                    "width": 18,
                   }
                 }
               >
@@ -1662,12 +1637,8 @@ exports[`renders loading button 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 18,
-                      "transform": Array [
-                        Object {
-                          "rotate": "45deg",
-                        },
-                      ],
+                      "height": 9,
+                      "overflow": "hidden",
                       "width": 18,
                     }
                   }
@@ -1676,8 +1647,15 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 9,
-                        "overflow": "hidden",
+                        "height": 18,
+                        "transform": Array [
+                          Object {
+                            "translateY": 0,
+                          },
+                          Object {
+                            "rotate": "-165deg",
+                          },
+                        ],
                         "width": 18,
                       }
                     }
@@ -1686,15 +1664,8 @@ exports[`renders loading button 1`] = `
                       collapsable={false}
                       style={
                         Object {
-                          "height": 18,
-                          "transform": Array [
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "rotate": "-165deg",
-                            },
-                          ],
+                          "height": 9,
+                          "overflow": "hidden",
                           "width": 18,
                         }
                       }
@@ -1703,40 +1674,44 @@ exports[`renders loading button 1`] = `
                         collapsable={false}
                         style={
                           Object {
-                            "height": 9,
-                            "overflow": "hidden",
+                            "borderColor": "rgba(103, 80, 164, 1)",
+                            "borderRadius": 9,
+                            "borderWidth": 1.8,
+                            "height": 18,
                             "width": 18,
                           }
                         }
-                      >
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "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={
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "height": 18,
+                    "transform": Array [
+                      Object {
+                        "rotate": "45deg",
+                      },
+                    ],
+                    "width": 18,
                   }
                 }
               >
@@ -1744,12 +1719,9 @@ exports[`renders loading button 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 18,
-                      "transform": Array [
-                        Object {
-                          "rotate": "45deg",
-                        },
-                      ],
+                      "height": 9,
+                      "overflow": "hidden",
+                      "top": 9,
                       "width": 18,
                     }
                   }
@@ -1758,9 +1730,15 @@ exports[`renders loading button 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 9,
-                        "overflow": "hidden",
-                        "top": 9,
+                        "height": 18,
+                        "transform": Array [
+                          Object {
+                            "translateY": -9,
+                          },
+                          Object {
+                            "rotate": "345deg",
+                          },
+                        ],
                         "width": 18,
                       }
                     }
@@ -1769,15 +1747,8 @@ exports[`renders loading button 1`] = `
                       collapsable={false}
                       style={
                         Object {
-                          "height": 18,
-                          "transform": Array [
-                            Object {
-                              "translateY": -9,
-                            },
-                            Object {
-                              "rotate": "345deg",
-                            },
-                          ],
+                          "height": 9,
+                          "overflow": "hidden",
                           "width": 18,
                         }
                       }
@@ -1786,79 +1757,68 @@ exports[`renders loading button 1`] = `
                         collapsable={false}
                         style={
                           Object {
-                            "height": 9,
-                            "overflow": "hidden",
+                            "borderColor": "rgba(103, 80, 164, 1)",
+                            "borderRadius": 9,
+                            "borderWidth": 1.8,
+                            "height": 18,
                             "width": 18,
                           }
                         }
-                      >
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "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={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 16,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 16,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Loading Button
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Loading Button
+        </Text>
       </View>
     </View>
   </View>
@@ -1871,10 +1831,14 @@ exports[`renders outlined button with mode 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1886,6 +1850,8 @@ exports[`renders outlined button with mode 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -1894,7 +1860,13 @@ exports[`renders outlined button with mode 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 1,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -1904,116 +1876,100 @@ exports[`renders outlined button with mode 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 1,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 24,
+                  "marginVertical": 10,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 24,
-                    "marginVertical": 10,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Outlined Button
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Outlined Button
+        </Text>
       </View>
     </View>
   </View>
@@ -2026,10 +1982,14 @@ exports[`renders text button by default 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -2041,6 +2001,8 @@ exports[`renders text button by default 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -2049,7 +2011,13 @@ exports[`renders text button by default 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -2059,115 +2027,99 @@ exports[`renders text button by default 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Text Button
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Text Button
+        </Text>
       </View>
     </View>
   </View>
@@ -2180,10 +2132,14 @@ exports[`renders text button with mode 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -2195,6 +2151,8 @@ exports[`renders text button with mode 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="button-container-outer-layer"
@@ -2203,7 +2161,13 @@ exports[`renders text button with mode 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "minWidth": 64,
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -2213,115 +2177,99 @@ exports[`renders text button with mode 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="button-container-inner-layer"
+    testID="button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "transparent",
-          "borderRadius": 20,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "minWidth": 64,
+          "disabled": true,
         }
       }
-      testID="button-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
-            },
-            false,
-            Object {
-              "borderRadius": 20,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
             },
+            undefined,
           ]
         }
-        testID="button"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginHorizontal": 16,
+                  "marginVertical": 9,
+                  "textAlign": "center",
+                },
+                false,
+                Object {
+                  "marginHorizontal": 12,
+                },
+                undefined,
+                false,
+                Object {
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 16,
-                    "marginVertical": 9,
-                    "textAlign": "center",
-                  },
-                  false,
-                  Object {
-                    "marginHorizontal": 12,
-                  },
-                  undefined,
-                  false,
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="button-text"
-          >
-            Text Button
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+          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 d239026598..7706df508a 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -6,10 +6,14 @@ exports[`renders chip with close button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "borderRadius": 8,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +25,8 @@ exports[`renders chip with close button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="chip-container-outer-layer"
@@ -29,7 +35,13 @@ exports[`renders chip with close button 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "flexDirection": "column",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -39,200 +51,66 @@ exports[`renders chip with close button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="chip-container-inner-layer"
+    testID="chip-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(232, 222, 248, 1)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 8,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "flexDirection": "column",
+          "disabled": true,
+          "selected": false,
         }
       }
-      testID="chip-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "borderRadius": 8,
+            },
+            Object {
+              "flexGrow": 1,
+            },
+          ],
+        ]
+      }
+      testID="chip"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-            "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]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 4,
+              "position": "relative",
+            },
+            Object {
+              "paddingLeft": 0,
+            },
+            Object {
+              "paddingRight": 34,
             },
-            false,
-            Array [
-              Object {
-                "borderRadius": 8,
-              },
-              Object {
-                "flexGrow": 1,
-              },
-            ],
           ]
         }
-        testID="chip"
       >
         <View
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "flexGrow": 1,
-                "paddingLeft": 4,
-                "position": "relative",
-              },
-              Object {
-                "paddingLeft": 0,
-              },
-              Object {
-                "paddingRight": 34,
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "alignSelf": "center",
-                  "padding": 4,
-                },
-                Object {
-                  "paddingLeft": 8,
-                  "paddingRight": 0,
-                },
-                null,
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontSize": 18,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 18,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰋼
-            </Text>
-          </View>
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
-              Array [
-                Object {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
-                },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  Object {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  Object {
-                    "marginLeft": 8,
-                    "marginRight": 0,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            Example Chip
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
-          Object {
-            "alignItems": "center",
-            "height": "100%",
-            "justifyContent": "center",
-            "position": "absolute",
-            "right": 0,
-          }
-        }
-      >
-        <View
-          accessibilityLabel="Close"
-          accessibilityRole="button"
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             Array [
               Object {
@@ -240,12 +118,10 @@ exports[`renders chip with close button 1`] = `
                 "padding": 4,
               },
               Object {
-                "marginRight": 4,
-              },
-              Object {
-                "marginRight": 8,
-                "padding": 0,
+                "paddingLeft": 8,
+                "paddingRight": 0,
               },
+              null,
             ]
           }
         >
@@ -258,7 +134,7 @@ exports[`renders chip with close button 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(29, 25, 43, 1)",
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontSize": 18,
                 },
                 Array [
@@ -283,9 +159,129 @@ exports[`renders chip with close button 1`] = `
               ]
             }
           >
-            󰅖
+            󰋼
           </Text>
         </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
+              Array [
+                Object {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginLeft": 8,
+                  "marginRight": 0,
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          Example Chip
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "height": "100%",
+          "justifyContent": "center",
+          "position": "absolute",
+          "right": 0,
+        }
+      }
+    >
+      <View
+        accessibilityLabel="Close"
+        accessibilityRole="button"
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "padding": 4,
+            },
+            Object {
+              "marginRight": 4,
+            },
+            Object {
+              "marginRight": 8,
+              "padding": 0,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
+              },
+              Array [
+                Object {
+                  "lineHeight": 18,
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Design Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          󰅖
+        </Text>
       </View>
     </View>
   </View>
@@ -298,10 +294,14 @@ exports[`renders chip with custom close button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "borderRadius": 8,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -313,6 +313,8 @@ exports[`renders chip with custom close button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="chip-container-outer-layer"
@@ -321,7 +323,13 @@ exports[`renders chip with custom close button 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "flexDirection": "column",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -331,200 +339,66 @@ exports[`renders chip with custom close button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="chip-container-inner-layer"
+    testID="chip-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(232, 222, 248, 1)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 8,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "flexDirection": "column",
+          "disabled": true,
+          "selected": false,
         }
       }
-      testID="chip-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "borderRadius": 8,
+            },
+            Object {
+              "flexGrow": 1,
+            },
+          ],
+        ]
+      }
+      testID="chip"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-            "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]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 4,
+              "position": "relative",
+            },
+            Object {
+              "paddingLeft": 0,
+            },
+            Object {
+              "paddingRight": 34,
             },
-            false,
-            Array [
-              Object {
-                "borderRadius": 8,
-              },
-              Object {
-                "flexGrow": 1,
-              },
-            ],
           ]
         }
-        testID="chip"
-      >
-        <View
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "flexGrow": 1,
-                "paddingLeft": 4,
-                "position": "relative",
-              },
-              Object {
-                "paddingLeft": 0,
-              },
-              Object {
-                "paddingRight": 34,
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "alignSelf": "center",
-                  "padding": 4,
-                },
-                Object {
-                  "paddingLeft": 8,
-                  "paddingRight": 0,
-                },
-                null,
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontSize": 18,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 18,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰋼
-            </Text>
-          </View>
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
-              Array [
-                Object {
-                  "fontFamily": "System",
-                  "fontSize": 14,
-                  "fontWeight": "500",
-                  "letterSpacing": 0.1,
-                  "lineHeight": 20,
-                },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  Object {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  Object {
-                    "marginLeft": 8,
-                    "marginRight": 0,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            Example Chip
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
-          Object {
-            "alignItems": "center",
-            "height": "100%",
-            "justifyContent": "center",
-            "position": "absolute",
-            "right": 0,
-          }
-        }
       >
         <View
-          accessibilityLabel="Close"
-          accessibilityRole="button"
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             Array [
               Object {
@@ -532,12 +406,10 @@ exports[`renders chip with custom close button 1`] = `
                 "padding": 4,
               },
               Object {
-                "marginRight": 4,
-              },
-              Object {
-                "marginRight": 8,
-                "padding": 0,
+                "paddingLeft": 8,
+                "paddingRight": 0,
               },
+              null,
             ]
           }
         >
@@ -550,7 +422,7 @@ exports[`renders chip with custom close button 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(29, 25, 43, 1)",
+                  "color": "rgba(103, 80, 164, 1)",
                   "fontSize": 18,
                 },
                 Array [
@@ -575,9 +447,129 @@ exports[`renders chip with custom close button 1`] = `
               ]
             }
           >
-            󰁅
+            󰋼
           </Text>
         </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
+              Array [
+                Object {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontFamily": "System",
+                  "fontSize": 14,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.1,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginLeft": 8,
+                  "marginRight": 0,
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          Example Chip
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "height": "100%",
+          "justifyContent": "center",
+          "position": "absolute",
+          "right": 0,
+        }
+      }
+    >
+      <View
+        accessibilityLabel="Close"
+        accessibilityRole="button"
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "center",
+              "padding": 4,
+            },
+            Object {
+              "marginRight": 4,
+            },
+            Object {
+              "marginRight": 8,
+              "padding": 0,
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "color": "rgba(29, 25, 43, 1)",
+                "fontSize": 18,
+              },
+              Array [
+                Object {
+                  "lineHeight": 18,
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Design Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          󰁅
+        </Text>
       </View>
     </View>
   </View>
@@ -590,10 +582,14 @@ exports[`renders chip with icon 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "borderRadius": 8,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -605,6 +601,8 @@ exports[`renders chip with icon 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="chip-container-outer-layer"
@@ -613,7 +611,13 @@ exports[`renders chip with icon 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "flexDirection": "column",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -623,138 +627,143 @@ exports[`renders chip with icon 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="chip-container-inner-layer"
+    testID="chip-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(232, 222, 248, 1)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 8,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "flexDirection": "column",
+          "disabled": true,
+          "selected": false,
         }
       }
-      testID="chip-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "borderRadius": 8,
+            },
+            Object {
+              "flexGrow": 1,
+            },
+          ],
+        ]
+      }
+      testID="chip"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-            "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]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 4,
+              "position": "relative",
+            },
+            Object {
+              "paddingLeft": 0,
+            },
+            Object {
+              "paddingRight": 0,
             },
-            false,
-            Array [
-              Object {
-                "borderRadius": 8,
-              },
-              Object {
-                "flexGrow": 1,
-              },
-            ],
           ]
         }
-        testID="chip"
       >
         <View
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "flexGrow": 1,
-                "paddingLeft": 4,
-                "position": "relative",
-              },
-              Object {
-                "paddingLeft": 0,
+                "alignSelf": "center",
+                "padding": 4,
               },
               Object {
+                "paddingLeft": 8,
                 "paddingRight": 0,
               },
+              null,
             ]
           }
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "alignSelf": "center",
-                  "padding": 4,
-                },
-                Object {
-                  "paddingLeft": 8,
-                  "paddingRight": 0,
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontSize": 18,
                 },
-                null,
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
                 Array [
                   Object {
-                    "color": "rgba(103, 80, 164, 1)",
-                    "fontSize": 18,
+                    "lineHeight": 18,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  Array [
-                    Object {
-                      "lineHeight": 18,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
                   Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "backgroundColor": "transparent",
                   },
-                  Object {},
-                ]
-              }
-            >
-              󰋼
-            </Text>
-          </View>
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
+                ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            󰋼
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
               Array [
                 Object {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -762,37 +771,16 @@ exports[`renders chip with icon 1`] = `
                   "lineHeight": 20,
                 },
                 Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
+                  "marginLeft": 8,
+                  "marginRight": 16,
                 },
-                Array [
-                  Object {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  Object {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  Object {
-                    "marginLeft": 8,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            Example Chip
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+        >
+          Example Chip
+        </Text>
       </View>
     </View>
   </View>
@@ -805,10 +793,14 @@ exports[`renders chip with onPress 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "borderRadius": 8,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -820,6 +812,8 @@ exports[`renders chip with onPress 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="chip-container-outer-layer"
@@ -828,7 +822,13 @@ exports[`renders chip with onPress 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "flexDirection": "column",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -838,86 +838,91 @@ exports[`renders chip with onPress 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="chip-container-inner-layer"
+    testID="chip-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(232, 222, 248, 1)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 8,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "flexDirection": "column",
+          "disabled": false,
+          "selected": false,
         }
       }
-      testID="chip-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "borderRadius": 8,
+            },
+            Object {
+              "flexGrow": 1,
+            },
+          ],
+        ]
+      }
+      testID="chip"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": false,
-            "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]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 4,
+              "position": "relative",
+            },
+            Object {
+              "paddingLeft": 0,
+            },
+            Object {
+              "paddingRight": 0,
             },
-            false,
-            Array [
-              Object {
-                "borderRadius": 8,
-              },
-              Object {
-                "flexGrow": 1,
-              },
-            ],
           ]
         }
-        testID="chip"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "flexGrow": 1,
-                "paddingLeft": 4,
-                "position": "relative",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               Object {
-                "paddingLeft": 0,
+                "textAlign": "left",
               },
               Object {
-                "paddingRight": 0,
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -925,37 +930,16 @@ exports[`renders chip with onPress 1`] = `
                   "lineHeight": 20,
                 },
                 Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
+                  "marginLeft": 16,
+                  "marginRight": 16,
                 },
-                Array [
-                  Object {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  Object {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  Object {
-                    "marginLeft": 16,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            Example Chip
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+        >
+          Example Chip
+        </Text>
       </View>
     </View>
   </View>
@@ -968,10 +952,14 @@ exports[`renders outlined disabled chip 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 8,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -983,6 +971,8 @@ exports[`renders outlined disabled chip 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="chip-container-outer-layer"
@@ -991,7 +981,13 @@ exports[`renders outlined disabled chip 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(73, 69, 79, 0.12)",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 1,
         "flex": undefined,
+        "flexDirection": "column",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -1001,86 +997,91 @@ exports[`renders outlined disabled chip 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="chip-container-inner-layer"
+    testID="chip-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "rgba(73, 69, 79, 0.12)",
-          "borderRadius": 8,
-          "borderStyle": "solid",
-          "borderWidth": 1,
-          "flex": undefined,
-          "flexDirection": "column",
+          "disabled": true,
+          "selected": false,
         }
       }
-      testID="chip-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "borderRadius": 8,
+            },
+            Object {
+              "flexGrow": 1,
+            },
+          ],
+        ]
+      }
+      testID="chip"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-            "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]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 4,
+              "position": "relative",
+            },
+            Object {
+              "paddingLeft": 0,
+            },
+            Object {
+              "paddingRight": 0,
             },
-            false,
-            Array [
-              Object {
-                "borderRadius": 8,
-              },
-              Object {
-                "flexGrow": 1,
-              },
-            ],
           ]
         }
-        testID="chip"
       >
-        <View
+        <Text
+          numberOfLines={1}
+          selectable={false}
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "flexGrow": 1,
-                "paddingLeft": 4,
-                "position": "relative",
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
               },
               Object {
-                "paddingLeft": 0,
+                "textAlign": "left",
               },
               Object {
-                "paddingRight": 0,
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
               },
-            ]
-          }
-        >
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
               Array [
                 Object {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "rgba(28, 27, 31, 0.38)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1088,37 +1089,16 @@ exports[`renders outlined disabled chip 1`] = `
                   "lineHeight": 20,
                 },
                 Object {
-                  "textAlign": "left",
+                  "marginLeft": 16,
+                  "marginRight": 16,
                 },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  Object {
-                    "color": "rgba(28, 27, 31, 0.38)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  Object {
-                    "marginLeft": 16,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            Example Chip
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+        >
+          Example Chip
+        </Text>
       </View>
     </View>
   </View>
@@ -1131,10 +1111,14 @@ exports[`renders selected chip 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(232, 222, 248)",
+      "borderRadius": 8,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1146,6 +1130,8 @@ exports[`renders selected chip 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="chip-container-outer-layer"
@@ -1154,7 +1140,13 @@ exports[`renders selected chip 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgb(232, 222, 248)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 0,
         "flex": undefined,
+        "flexDirection": "column",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -1164,138 +1156,143 @@ exports[`renders selected chip 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="chip-container-inner-layer"
+    testID="chip-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgb(232, 222, 248)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 8,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "flex": undefined,
-          "flexDirection": "column",
+          "disabled": true,
+          "selected": true,
         }
       }
-      testID="chip-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "borderRadius": 8,
+            },
+            Object {
+              "flexGrow": 1,
+            },
+          ],
+        ]
+      }
+      testID="chip"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-            "selected": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 4,
+              "position": "relative",
+            },
+            Object {
+              "paddingLeft": 0,
+            },
+            Object {
+              "paddingRight": 0,
             },
-            false,
-            Array [
-              Object {
-                "borderRadius": 8,
-              },
-              Object {
-                "flexGrow": 1,
-              },
-            ],
           ]
         }
-        testID="chip"
       >
         <View
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "flexGrow": 1,
-                "paddingLeft": 4,
-                "position": "relative",
-              },
-              Object {
-                "paddingLeft": 0,
+                "alignSelf": "center",
+                "padding": 4,
               },
               Object {
+                "paddingLeft": 8,
                 "paddingRight": 0,
               },
+              null,
             ]
           }
         >
-          <View
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "alignSelf": "center",
-                  "padding": 4,
-                },
-                Object {
-                  "paddingLeft": 8,
-                  "paddingRight": 0,
+                  "color": "rgba(29, 25, 43, 1)",
+                  "fontSize": 18,
                 },
-                null,
-              ]
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
                 Array [
                   Object {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontSize": 18,
+                    "lineHeight": 18,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  Array [
-                    Object {
-                      "lineHeight": 18,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
                   Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "backgroundColor": "transparent",
                   },
-                  Object {},
-                ]
-              }
-            >
-              󰄬
-            </Text>
-          </View>
-          <Text
-            numberOfLines={1}
-            selectable={false}
-            style={
+                ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            󰄬
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
               Array [
                 Object {
+                  "marginVertical": 6,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "rgba(29, 25, 43, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1303,37 +1300,16 @@ exports[`renders selected chip 1`] = `
                   "lineHeight": 20,
                 },
                 Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
+                  "marginLeft": 8,
+                  "marginRight": 16,
                 },
-                Array [
-                  Object {
-                    "marginVertical": 6,
-                    "textAlignVertical": "center",
-                  },
-                  Object {
-                    "color": "rgba(29, 25, 43, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                  Object {
-                    "marginLeft": 8,
-                    "marginRight": 16,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            Example Chip
-          </Text>
-        </View>
+                undefined,
+              ],
+            ]
+          }
+        >
+          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 0eb3a44e9f..1cec04437d 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -269,10 +269,15 @@ exports[`renders data table pagination 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -284,6 +289,8 @@ exports[`renders data table pagination 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -292,7 +299,13 @@ exports[`renders data table pagination 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -302,114 +315,95 @@ exports[`renders data table pagination 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-left"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-left"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅁
-            </Text>
-          </View>
+            󰅁
+          </Text>
         </View>
       </View>
     </View>
@@ -418,10 +412,15 @@ exports[`renders data table pagination 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -433,6 +432,8 @@ exports[`renders data table pagination 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -441,7 +442,13 @@ exports[`renders data table pagination 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -451,114 +458,95 @@ exports[`renders data table pagination 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-right"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-right"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅂
-            </Text>
-          </View>
+            󰅂
+          </Text>
         </View>
       </View>
     </View>
@@ -625,10 +613,15 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -640,6 +633,8 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -648,7 +643,13 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -658,114 +659,95 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="page-first"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="page-first"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰘀
-            </Text>
-          </View>
+            󰘀
+          </Text>
         </View>
       </View>
     </View>
@@ -774,10 +756,15 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -789,6 +776,8 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -797,7 +786,13 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -807,114 +802,95 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-left"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-left"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅁
-            </Text>
-          </View>
+            󰅁
+          </Text>
         </View>
       </View>
     </View>
@@ -923,10 +899,15 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -938,6 +919,8 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -946,7 +929,13 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -956,114 +945,95 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-right"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-right"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅂
-            </Text>
-          </View>
+            󰅂
+          </Text>
         </View>
       </View>
     </View>
@@ -1072,10 +1042,15 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -1087,6 +1062,8 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -1095,7 +1072,13 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -1105,114 +1088,95 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="page-last"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="page-last"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰘁
-            </Text>
-          </View>
+            󰘁
+          </Text>
         </View>
       </View>
     </View>
@@ -1279,10 +1243,15 @@ exports[`renders data table pagination with label 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -1294,6 +1263,8 @@ exports[`renders data table pagination with label 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -1302,7 +1273,13 @@ exports[`renders data table pagination with label 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -1312,114 +1289,95 @@ exports[`renders data table pagination with label 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-left"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-left"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅁
-            </Text>
-          </View>
+            󰅁
+          </Text>
         </View>
       </View>
     </View>
@@ -1428,10 +1386,15 @@ exports[`renders data table pagination with label 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -1443,6 +1406,8 @@ exports[`renders data table pagination with label 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -1451,7 +1416,13 @@ exports[`renders data table pagination with label 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -1461,114 +1432,95 @@ exports[`renders data table pagination with label 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-right"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-right"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅂
-            </Text>
-          </View>
+            󰅂
+          </Text>
         </View>
       </View>
     </View>
@@ -1641,10 +1593,15 @@ exports[`renders data table pagination with options select 1`] = `
         style={
           Object {
             "alignSelf": undefined,
+            "backgroundColor": "transparent",
+            "borderRadius": 20,
             "bottom": undefined,
             "end": undefined,
             "flex": undefined,
+            "height": undefined,
             "left": undefined,
+            "marginRight": 16,
+            "opacity": undefined,
             "position": undefined,
             "right": undefined,
             "shadowColor": "#000",
@@ -1656,6 +1613,8 @@ exports[`renders data table pagination with options select 1`] = `
             "shadowRadius": 0,
             "start": undefined,
             "top": undefined,
+            "transform": undefined,
+            "width": undefined,
           }
         }
         testID="button-container-outer-layer"
@@ -1664,7 +1623,13 @@ exports[`renders data table pagination with options select 1`] = `
           collapsable={false}
           style={
             Object {
+              "backgroundColor": "transparent",
+              "borderColor": "rgba(121, 116, 126, 1)",
+              "borderRadius": 20,
+              "borderStyle": "solid",
+              "borderWidth": 1,
               "flex": undefined,
+              "minWidth": 64,
               "shadowColor": "#000",
               "shadowOffset": Object {
                 "height": 0,
@@ -1672,175 +1637,158 @@ exports[`renders data table pagination with options select 1`] = `
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
+              "textAlign": "center",
             }
           }
-          testID="button-container-inner-layer"
+          testID="button-container"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "backgroundColor": "transparent",
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderStyle": "solid",
-                "borderWidth": 1,
-                "flex": undefined,
-                "marginRight": 16,
-                "minWidth": 64,
-                "textAlign": "center",
+                "disabled": false,
               }
             }
-            testID="button-container"
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "overflow": "hidden",
+                },
+                false,
+                Object {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+            testID="button"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": 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]}
               style={
                 Array [
                   Object {
-                    "overflow": "hidden",
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                   },
-                  false,
                   Object {
-                    "borderRadius": 20,
+                    "flexDirection": "row-reverse",
                   },
                 ]
               }
-              testID="button"
             >
               <View
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
+                      "marginLeft": -4,
+                      "marginRight": 12,
                     },
                     Object {
-                      "flexDirection": "row-reverse",
+                      "marginLeft": -16,
+                      "marginRight": 16,
                     },
+                    false,
                   ]
                 }
+                testID="button-icon-container"
               >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "marginLeft": -4,
-                        "marginRight": 12,
-                      },
-                      Object {
-                        "marginLeft": -16,
-                        "marginRight": 16,
-                      },
-                      false,
-                    ]
-                  }
-                  testID="button-icon-container"
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    allowFontScaling={false}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      Array [
-                        Object {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontSize": 18,
-                        },
-                        Array [
-                          Object {
-                            "lineHeight": 18,
-                            "transform": Array [
-                              Object {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          Object {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                        Object {
-                          "fontFamily": "Material Design Icons",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        Object {},
-                      ]
-                    }
-                  >
-                    󰍝
-                  </Text>
-                </View>
                 <Text
-                  numberOfLines={1}
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
                   selectable={false}
                   style={
                     Array [
                       Object {
-                        "fontFamily": "System",
-                        "fontSize": 14,
-                        "fontWeight": "500",
-                        "letterSpacing": 0.1,
-                        "lineHeight": 20,
-                      },
-                      Object {
-                        "textAlign": "left",
-                      },
-                      Object {
-                        "color": "rgba(28, 27, 31, 1)",
-                        "writingDirection": "ltr",
+                        "color": "rgba(103, 80, 164, 1)",
+                        "fontSize": 18,
                       },
                       Array [
                         Object {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
+                          "lineHeight": 18,
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
-                        false,
                         Object {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
+                          "backgroundColor": "transparent",
                         },
-                        undefined,
-                        false,
-                        Object {
-                          "color": "rgba(103, 80, 164, 1)",
-                          "fontFamily": "System",
-                          "fontSize": 14,
-                          "fontWeight": "500",
-                          "letterSpacing": 0.1,
-                          "lineHeight": 20,
-                        },
-                        undefined,
                       ],
+                      Object {
+                        "fontFamily": "Material Design Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
                     ]
                   }
-                  testID="button-text"
                 >
-                  2
+                  󰍝
                 </Text>
               </View>
+              <Text
+                numberOfLines={1}
+                selectable={false}
+                style={
+                  Array [
+                    Object {
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
+                    },
+                    Object {
+                      "textAlign": "left",
+                    },
+                    Object {
+                      "color": "rgba(28, 27, 31, 1)",
+                      "writingDirection": "ltr",
+                    },
+                    Array [
+                      Object {
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      false,
+                      Object {
+                        "marginHorizontal": 24,
+                        "marginVertical": 10,
+                      },
+                      undefined,
+                      false,
+                      Object {
+                        "color": "rgba(103, 80, 164, 1)",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                testID="button-text"
+              >
+                2
+              </Text>
             </View>
           </View>
         </View>
@@ -1890,10 +1838,15 @@ exports[`renders data table pagination with options select 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -1905,6 +1858,8 @@ exports[`renders data table pagination with options select 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -1913,7 +1868,13 @@ exports[`renders data table pagination with options select 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -1923,114 +1884,95 @@ exports[`renders data table pagination with options select 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="page-first"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="page-first"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰘀
-            </Text>
-          </View>
+            󰘀
+          </Text>
         </View>
       </View>
     </View>
@@ -2039,10 +1981,15 @@ exports[`renders data table pagination with options select 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -2054,6 +2001,8 @@ exports[`renders data table pagination with options select 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -2062,7 +2011,13 @@ exports[`renders data table pagination with options select 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -2072,114 +2027,95 @@ exports[`renders data table pagination with options select 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-left"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-left"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅁
-            </Text>
-          </View>
+            󰅁
+          </Text>
         </View>
       </View>
     </View>
@@ -2188,10 +2124,15 @@ exports[`renders data table pagination with options select 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -2203,6 +2144,8 @@ exports[`renders data table pagination with options select 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -2211,7 +2154,13 @@ exports[`renders data table pagination with options select 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -2221,114 +2170,95 @@ exports[`renders data table pagination with options select 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="chevron-right"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="chevron-right"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰅂
-            </Text>
-          </View>
+            󰅂
+          </Text>
         </View>
       </View>
     </View>
@@ -2337,10 +2267,15 @@ exports[`renders data table pagination with options select 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -2352,6 +2287,8 @@ exports[`renders data table pagination with options select 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="icon-button-container-outer-layer"
@@ -2360,7 +2297,13 @@ exports[`renders data table pagination with options select 1`] = `
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -2370,114 +2313,95 @@ exports[`renders data table pagination with options select 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="icon-button-container-inner-layer"
+        testID="icon-button-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityLabel="page-last"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 6,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="icon-button-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityLabel="page-last"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(28, 27, 31, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="icon-button"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(28, 27, 31, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰘁
-            </Text>
-          </View>
+            󰘁
+          </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 8b6b6b902a..5fec1a8679 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -6,10 +6,14 @@ exports[`renders FAB with custom size prop 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 25,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,14 +25,23 @@ exports[`renders FAB with custom size prop 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 25,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -39,144 +52,126 @@ exports[`renders FAB with custom size prop 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 25,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 25,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 25,
+              "height": 100,
+              "width": 100,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 25,
-                "height": 100,
-                "width": 100,
+                "height": 50,
+                "width": 50,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 50,
-                  "width": 50,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 50,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 50,
+                      "lineHeight": 50,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 50,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
@@ -191,10 +186,14 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -206,14 +205,23 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -224,144 +232,126 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 16,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 56,
+              "width": 56,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 16,
-                "height": 56,
-                "width": 56,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "#AA0114",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "color": "#AA0114",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
@@ -376,10 +366,14 @@ exports[`renders default FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -391,14 +385,23 @@ exports[`renders default FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -409,144 +412,126 @@ exports[`renders default FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 16,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 56,
+              "width": 56,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 16,
-                "height": 56,
-                "width": 56,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
@@ -561,10 +546,14 @@ exports[`renders disabled FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(28, 27, 31, 0.12)",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -576,14 +565,23 @@ exports[`renders disabled FAB 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(28, 27, 31, 0.12)",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -594,144 +592,126 @@ exports[`renders disabled FAB 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(28, 27, 31, 0.12)",
-          "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": true,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 16,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 56,
+              "width": 56,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 16,
-                "height": 56,
-                "width": 56,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(28, 27, 31, 0.38)",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(28, 27, 31, 0.38)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
@@ -746,10 +726,14 @@ exports[`renders extended FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -761,14 +745,23 @@ exports[`renders extended FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -779,185 +772,167 @@ exports[`renders extended FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityLabel="Add items"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 16,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityLabel="Add items"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 56,
+              "paddingHorizontal": 16,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 16,
-                "height": 56,
-                "paddingHorizontal": 16,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
-          <Text
-            selectable={false}
-            style={
+        </View>
+        <Text
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
               Array [
                 Object {
+                  "marginHorizontal": 8,
+                },
+                false,
+                Object {
+                  "color": "rgba(33, 0, 93, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 8,
-                  },
-                  false,
-                  Object {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                ],
-              ]
-            }
-            testID="fab-text"
-          >
-            Add items
-          </Text>
-        </View>
+              ],
+            ]
+          }
+          testID="fab-text"
+        >
+          Add items
+        </Text>
       </View>
     </View>
   </View>
@@ -970,10 +945,14 @@ exports[`renders extended FAB with custom size prop 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 25,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -985,14 +964,23 @@ exports[`renders extended FAB with custom size prop 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 25,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -1003,184 +991,166 @@ exports[`renders extended FAB with custom size prop 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityLabel="Add items"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 25,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 25,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityLabel="Add items"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 100,
+              "paddingHorizontal": 16,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "height": 100,
-                "paddingHorizontal": 16,
-              },
-            ]
-          }
-          testID="fab-content"
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 50,
-                  "width": 50,
-                },
-              ]
+                "height": 50,
+                "width": 50,
+              },
+            ]
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 50,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 50,
+                      "lineHeight": 50,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 50,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
-          <Text
-            selectable={false}
-            style={
+        </View>
+        <Text
+          selectable={false}
+          style={
+            Array [
+              Object {
+                "fontFamily": "System",
+                "fontSize": 14,
+                "fontWeight": "500",
+                "letterSpacing": 0.1,
+                "lineHeight": 20,
+              },
+              Object {
+                "textAlign": "left",
+              },
+              Object {
+                "color": "rgba(28, 27, 31, 1)",
+                "writingDirection": "ltr",
+              },
               Array [
                 Object {
+                  "marginHorizontal": 8,
+                },
+                false,
+                Object {
+                  "color": "rgba(33, 0, 93, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
                   "letterSpacing": 0.1,
                   "lineHeight": 20,
                 },
-                Object {
-                  "textAlign": "left",
-                },
-                Object {
-                  "color": "rgba(28, 27, 31, 1)",
-                  "writingDirection": "ltr",
-                },
-                Array [
-                  Object {
-                    "marginHorizontal": 8,
-                  },
-                  false,
-                  Object {
-                    "color": "rgba(33, 0, 93, 1)",
-                    "fontFamily": "System",
-                    "fontSize": 14,
-                    "fontWeight": "500",
-                    "letterSpacing": 0.1,
-                    "lineHeight": 20,
-                  },
-                ],
-              ]
-            }
-            testID="fab-text"
-          >
-            Add items
-          </Text>
-        </View>
+              ],
+            ]
+          }
+          testID="fab-text"
+        >
+          Add items
+        </Text>
       </View>
     </View>
   </View>
@@ -1193,10 +1163,14 @@ exports[`renders large FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 28,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1208,14 +1182,23 @@ exports[`renders large FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 28,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -1226,144 +1209,126 @@ exports[`renders large FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 28,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 28,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 28,
+              "height": 96,
+              "width": 96,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 28,
-                "height": 96,
-                "width": 96,
+                "height": 36,
+                "width": 36,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 36,
-                  "width": 36,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 36,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 36,
+                      "lineHeight": 36,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 36,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
@@ -1378,10 +1343,14 @@ exports[`renders loading FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1393,14 +1362,23 @@ exports[`renders loading FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -1411,100 +1389,97 @@ exports[`renders loading FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 16,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 56,
+              "width": 56,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
+          accessibilityRole="progressbar"
+          accessibilityState={
+            Object {
+              "busy": true,
+            }
+          }
+          accessible={true}
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
-              Object {
-                "borderRadius": 16,
-                "height": 56,
-                "width": 56,
-              },
+              undefined,
             ]
           }
-          testID="fab-content"
         >
           <View
-            accessibilityRole="progressbar"
-            accessibilityState={
+            collapsable={false}
+            style={
               Object {
-                "busy": true,
+                "height": 18,
+                "opacity": 1,
+                "width": 18,
               }
             }
-            accessible={true}
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                undefined,
-              ]
-            }
           >
             <View
               collapsable={false}
               style={
                 Object {
-                  "height": 18,
-                  "opacity": 1,
-                  "width": 18,
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 }
               }
             >
@@ -1512,13 +1487,13 @@ exports[`renders loading FAB 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "height": 18,
+                    "transform": Array [
+                      Object {
+                        "rotate": "45deg",
+                      },
+                    ],
+                    "width": 18,
                   }
                 }
               >
@@ -1526,12 +1501,8 @@ exports[`renders loading FAB 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 18,
-                      "transform": Array [
-                        Object {
-                          "rotate": "45deg",
-                        },
-                      ],
+                      "height": 9,
+                      "overflow": "hidden",
                       "width": 18,
                     }
                   }
@@ -1540,8 +1511,15 @@ exports[`renders loading FAB 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 9,
-                        "overflow": "hidden",
+                        "height": 18,
+                        "transform": Array [
+                          Object {
+                            "translateY": 0,
+                          },
+                          Object {
+                            "rotate": "-165deg",
+                          },
+                        ],
                         "width": 18,
                       }
                     }
@@ -1550,15 +1528,8 @@ exports[`renders loading FAB 1`] = `
                       collapsable={false}
                       style={
                         Object {
-                          "height": 18,
-                          "transform": Array [
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "rotate": "-165deg",
-                            },
-                          ],
+                          "height": 9,
+                          "overflow": "hidden",
                           "width": 18,
                         }
                       }
@@ -1567,40 +1538,44 @@ exports[`renders loading FAB 1`] = `
                         collapsable={false}
                         style={
                           Object {
-                            "height": 9,
-                            "overflow": "hidden",
+                            "borderColor": "rgba(33, 0, 93, 1)",
+                            "borderRadius": 9,
+                            "borderWidth": 1.8,
+                            "height": 18,
                             "width": 18,
                           }
                         }
-                      >
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "borderColor": "rgba(33, 0, 93, 1)",
-                              "borderRadius": 9,
-                              "borderWidth": 1.8,
-                              "height": 18,
-                              "width": 18,
-                            }
-                          }
-                        />
-                      </View>
+                      />
                     </View>
                   </View>
                 </View>
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "height": 18,
+                    "transform": Array [
+                      Object {
+                        "rotate": "45deg",
+                      },
+                    ],
+                    "width": 18,
                   }
                 }
               >
@@ -1608,12 +1583,9 @@ exports[`renders loading FAB 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 18,
-                      "transform": Array [
-                        Object {
-                          "rotate": "45deg",
-                        },
-                      ],
+                      "height": 9,
+                      "overflow": "hidden",
+                      "top": 9,
                       "width": 18,
                     }
                   }
@@ -1622,9 +1594,15 @@ exports[`renders loading FAB 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 9,
-                        "overflow": "hidden",
-                        "top": 9,
+                        "height": 18,
+                        "transform": Array [
+                          Object {
+                            "translateY": -9,
+                          },
+                          Object {
+                            "rotate": "345deg",
+                          },
+                        ],
                         "width": 18,
                       }
                     }
@@ -1633,15 +1611,8 @@ exports[`renders loading FAB 1`] = `
                       collapsable={false}
                       style={
                         Object {
-                          "height": 18,
-                          "transform": Array [
-                            Object {
-                              "translateY": -9,
-                            },
-                            Object {
-                              "rotate": "345deg",
-                            },
-                          ],
+                          "height": 9,
+                          "overflow": "hidden",
                           "width": 18,
                         }
                       }
@@ -1650,25 +1621,14 @@ exports[`renders loading FAB 1`] = `
                         collapsable={false}
                         style={
                           Object {
-                            "height": 9,
-                            "overflow": "hidden",
+                            "borderColor": "rgba(33, 0, 93, 1)",
+                            "borderRadius": 9,
+                            "borderWidth": 1.8,
+                            "height": 18,
                             "width": 18,
                           }
                         }
-                      >
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "borderColor": "rgba(33, 0, 93, 1)",
-                              "borderRadius": 9,
-                              "borderWidth": 1.8,
-                              "height": 18,
-                              "width": 18,
-                            }
-                          }
-                        />
-                      </View>
+                      />
                     </View>
                   </View>
                 </View>
@@ -1688,10 +1648,14 @@ exports[`renders loading FAB with custom size prop 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 25,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -1703,14 +1667,23 @@ exports[`renders loading FAB with custom size prop 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 25,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -1721,100 +1694,97 @@ exports[`renders loading FAB with custom size prop 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 25,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 25,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 25,
+              "height": 100,
+              "width": 100,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
+          accessibilityRole="progressbar"
+          accessibilityState={
+            Object {
+              "busy": true,
+            }
+          }
+          accessible={true}
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
-              Object {
-                "borderRadius": 25,
-                "height": 100,
-                "width": 100,
-              },
+              undefined,
             ]
           }
-          testID="fab-content"
         >
           <View
-            accessibilityRole="progressbar"
-            accessibilityState={
-              Object {
-                "busy": true,
-              }
-            }
-            accessible={true}
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                undefined,
-              ]
+              Object {
+                "height": 50,
+                "opacity": 1,
+                "width": 50,
+              }
             }
           >
             <View
               collapsable={false}
               style={
                 Object {
-                  "height": 50,
-                  "opacity": 1,
-                  "width": 50,
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 }
               }
             >
@@ -1822,13 +1792,13 @@ exports[`renders loading FAB with custom size prop 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "height": 50,
+                    "transform": Array [
+                      Object {
+                        "rotate": "45deg",
+                      },
+                    ],
+                    "width": 50,
                   }
                 }
               >
@@ -1836,12 +1806,8 @@ exports[`renders loading FAB with custom size prop 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 50,
-                      "transform": Array [
-                        Object {
-                          "rotate": "45deg",
-                        },
-                      ],
+                      "height": 25,
+                      "overflow": "hidden",
                       "width": 50,
                     }
                   }
@@ -1850,8 +1816,15 @@ exports[`renders loading FAB with custom size prop 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 25,
-                        "overflow": "hidden",
+                        "height": 50,
+                        "transform": Array [
+                          Object {
+                            "translateY": 0,
+                          },
+                          Object {
+                            "rotate": "-165deg",
+                          },
+                        ],
                         "width": 50,
                       }
                     }
@@ -1860,15 +1833,8 @@ exports[`renders loading FAB with custom size prop 1`] = `
                       collapsable={false}
                       style={
                         Object {
-                          "height": 50,
-                          "transform": Array [
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "rotate": "-165deg",
-                            },
-                          ],
+                          "height": 25,
+                          "overflow": "hidden",
                           "width": 50,
                         }
                       }
@@ -1877,40 +1843,44 @@ exports[`renders loading FAB with custom size prop 1`] = `
                         collapsable={false}
                         style={
                           Object {
-                            "height": 25,
-                            "overflow": "hidden",
+                            "borderColor": "rgba(33, 0, 93, 1)",
+                            "borderRadius": 25,
+                            "borderWidth": 5,
+                            "height": 50,
                             "width": 50,
                           }
                         }
-                      >
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "borderColor": "rgba(33, 0, 93, 1)",
-                              "borderRadius": 25,
-                              "borderWidth": 5,
-                              "height": 50,
-                              "width": 50,
-                            }
-                          }
-                        />
-                      </View>
+                      />
                     </View>
                   </View>
                 </View>
               </View>
+            </View>
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            >
               <View
                 collapsable={false}
                 style={
                   Object {
-                    "alignItems": "center",
-                    "bottom": 0,
-                    "justifyContent": "center",
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "height": 50,
+                    "transform": Array [
+                      Object {
+                        "rotate": "45deg",
+                      },
+                    ],
+                    "width": 50,
                   }
                 }
               >
@@ -1918,12 +1888,9 @@ exports[`renders loading FAB with custom size prop 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 50,
-                      "transform": Array [
-                        Object {
-                          "rotate": "45deg",
-                        },
-                      ],
+                      "height": 25,
+                      "overflow": "hidden",
+                      "top": 25,
                       "width": 50,
                     }
                   }
@@ -1932,9 +1899,15 @@ exports[`renders loading FAB with custom size prop 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 25,
-                        "overflow": "hidden",
-                        "top": 25,
+                        "height": 50,
+                        "transform": Array [
+                          Object {
+                            "translateY": -25,
+                          },
+                          Object {
+                            "rotate": "345deg",
+                          },
+                        ],
                         "width": 50,
                       }
                     }
@@ -1943,15 +1916,8 @@ exports[`renders loading FAB with custom size prop 1`] = `
                       collapsable={false}
                       style={
                         Object {
-                          "height": 50,
-                          "transform": Array [
-                            Object {
-                              "translateY": -25,
-                            },
-                            Object {
-                              "rotate": "345deg",
-                            },
-                          ],
+                          "height": 25,
+                          "overflow": "hidden",
                           "width": 50,
                         }
                       }
@@ -1960,25 +1926,14 @@ exports[`renders loading FAB with custom size prop 1`] = `
                         collapsable={false}
                         style={
                           Object {
-                            "height": 25,
-                            "overflow": "hidden",
+                            "borderColor": "rgba(33, 0, 93, 1)",
+                            "borderRadius": 25,
+                            "borderWidth": 5,
+                            "height": 50,
                             "width": 50,
                           }
                         }
-                      >
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "borderColor": "rgba(33, 0, 93, 1)",
-                              "borderRadius": 25,
-                              "borderWidth": 5,
-                              "height": 50,
-                              "width": 50,
-                            }
-                          }
-                        />
-                      </View>
+                      />
                     </View>
                   </View>
                 </View>
@@ -1998,10 +1953,14 @@ exports[`renders not visible FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -2013,14 +1972,23 @@ exports[`renders not visible FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="none"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -2031,144 +1999,126 @@ exports[`renders not visible FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="none"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 16,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 56,
+              "width": 56,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 16,
-                "height": 56,
-                "width": 56,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
@@ -2183,10 +2133,14 @@ exports[`renders small FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 12,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 1,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -2198,14 +2152,23 @@ exports[`renders small FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 12,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -2216,144 +2179,126 @@ exports[`renders small FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 12,
-          "flex": undefined,
-          "opacity": 1,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 12,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 12,
+              "height": 40,
+              "width": 40,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 12,
-                "height": 40,
-                "width": 40,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
@@ -2368,10 +2313,14 @@ exports[`renders visible FAB 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(234, 221, 255, 1)",
+      "borderRadius": 16,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": 0,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -2383,14 +2332,23 @@ exports[`renders visible FAB 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "transform": Array [
+        Object {
+          "scale": 0,
+        },
+      ],
+      "width": undefined,
     }
   }
   testID="fab-container-outer-layer"
 >
   <View
     collapsable={false}
+    pointerEvents="auto"
     style={
       Object {
+        "backgroundColor": "rgba(234, 221, 255, 1)",
+        "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -2401,144 +2359,126 @@ exports[`renders visible FAB 1`] = `
         "shadowRadius": 3,
       }
     }
-    testID="fab-container-inner-layer"
+    testID="fab-container"
   >
     <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-          "flex": undefined,
-          "opacity": 0,
-          "overflow": "hidden",
-          "transform": Array [
-            Object {
-              "scale": 0,
-            },
-          ],
+          "disabled": false,
         }
       }
-      testID="fab-container"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Object {
+            "borderRadius": 16,
+          },
+        ]
+      }
+      testID="fab"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": 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]}
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 16,
+              "height": 56,
+              "width": 56,
             },
-            false,
-            undefined,
           ]
         }
-        testID="fab"
+        testID="fab-content"
       >
         <View
-          pointerEvents="none"
           style={
             Array [
               Object {
                 "alignItems": "center",
-                "flexDirection": "row",
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 16,
-                "height": 56,
-                "width": 56,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
-          testID="fab-content"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": Array [
+                  Object {
+                    "rotate": "0deg",
+                  },
+                ],
+              }
             }
           >
-            <View
-              collapsable={false}
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
+                Array [
+                  Object {
+                    "color": "rgba(33, 0, 93, 1)",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 24,
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
                     Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
+                      "backgroundColor": "transparent",
                     },
-                    Object {},
-                  ]
-                }
-              >
-                󰐕
-              </Text>
-            </View>
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰐕
+            </Text>
           </View>
         </View>
       </View>
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
index 2d3547e034..aa07f434d2 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -6,10 +6,15 @@ exports[`renders disabled icon button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 40,
       "left": undefined,
+      "margin": 6,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +26,8 @@ exports[`renders disabled icon button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 40,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -29,7 +36,13 @@ exports[`renders disabled icon button 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(28, 27, 31, 0.12)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -39,118 +52,99 @@ exports[`renders disabled icon button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
+      accessibilityTraits={
+        Array [
+          "button",
+          "disabled",
+        ]
+      }
+      accessible={true}
+      centered={true}
       collapsable={false}
-      style={
+      focusable={true}
+      hitSlop={
         Object {
-          "backgroundColor": undefined,
-          "borderColor": "rgba(28, 27, 31, 0.12)",
-          "borderRadius": 20,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 40,
-          "margin": 6,
-          "overflow": "hidden",
-          "width": 40,
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="icon-button-container"
-    >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
           Object {
-            "disabled": true,
-          }
-        }
-        accessibilityTraits={
+            "overflow": "hidden",
+          },
+          false,
           Array [
-            "button",
-            "disabled",
-          ]
-        }
-        accessible={true}
-        centered={true}
-        collapsable={false}
-        focusable={true}
-        hitSlop={
-          Object {
-            "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]}
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 20,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "color": "rgba(28, 27, 31, 0.38)",
+              "fontSize": 24,
             },
-            false,
             Array [
               Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
               },
               Object {
-                "borderRadius": 20,
+                "backgroundColor": "transparent",
               },
             ],
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
           ]
         }
-        testID="icon-button"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(28, 27, 31, 0.38)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          󰄀
-        </Text>
-      </View>
+        󰄀
+      </Text>
     </View>
   </View>
 </View>
@@ -162,10 +156,15 @@ exports[`renders icon button by default 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 40,
       "left": undefined,
+      "margin": 6,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -177,6 +176,8 @@ exports[`renders icon button by default 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 40,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -185,7 +186,13 @@ exports[`renders icon button by default 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -195,113 +202,94 @@ exports[`renders icon button by default 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": undefined,
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 20,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 40,
-          "margin": 6,
-          "overflow": "hidden",
-          "width": 40,
+          "disabled": true,
         }
       }
-      testID="icon-button-container"
-    >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
+      accessibilityTraits="button"
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
-        accessibilityTraits="button"
-        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]}
+      style={
+        Array [
           Object {
-            "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]}
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 20,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 24,
             },
-            false,
             Array [
               Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
               },
               Object {
-                "borderRadius": 20,
+                "backgroundColor": "transparent",
               },
             ],
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
           ]
         }
-        testID="icon-button"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          󰄀
-        </Text>
-      </View>
+        󰄀
+      </Text>
     </View>
   </View>
 </View>
@@ -313,10 +301,15 @@ exports[`renders icon button with color 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 40,
       "left": undefined,
+      "margin": 6,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -328,6 +321,8 @@ exports[`renders icon button with color 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 40,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -336,7 +331,13 @@ exports[`renders icon button with color 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -346,113 +347,94 @@ exports[`renders icon button with color 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": undefined,
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 20,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 40,
-          "margin": 6,
-          "overflow": "hidden",
-          "width": 40,
+          "disabled": true,
         }
       }
-      testID="icon-button-container"
-    >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
+      accessibilityTraits="button"
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
-        accessibilityTraits="button"
-        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]}
+      style={
+        Array [
           Object {
-            "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]}
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 20,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "color": "#e91e63",
+              "fontSize": 24,
             },
-            false,
             Array [
               Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
               },
               Object {
-                "borderRadius": 20,
+                "backgroundColor": "transparent",
               },
             ],
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
           ]
         }
-        testID="icon-button"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "#e91e63",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          󰄀
-        </Text>
-      </View>
+        󰄀
+      </Text>
     </View>
   </View>
 </View>
@@ -464,10 +446,15 @@ exports[`renders icon button with size 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 23,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 46,
       "left": undefined,
+      "margin": 6,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -479,6 +466,8 @@ exports[`renders icon button with size 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 46,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -487,7 +476,13 @@ exports[`renders icon button with size 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 23,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -497,113 +492,94 @@ exports[`renders icon button with size 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": undefined,
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 23,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 46,
-          "margin": 6,
-          "overflow": "hidden",
-          "width": 46,
+          "disabled": true,
         }
       }
-      testID="icon-button-container"
-    >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
+      accessibilityTraits="button"
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
-        accessibilityTraits="button"
-        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]}
+      style={
+        Array [
           Object {
-            "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]}
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 23,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 30,
             },
-            false,
             Array [
               Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
+                "lineHeight": 30,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
               },
               Object {
-                "borderRadius": 23,
+                "backgroundColor": "transparent",
               },
             ],
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
           ]
         }
-        testID="icon-button"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontSize": 30,
-              },
-              Array [
-                Object {
-                  "lineHeight": 30,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          󰄀
-        </Text>
-      </View>
+        󰄀
+      </Text>
     </View>
   </View>
 </View>
@@ -615,10 +591,15 @@ exports[`renders icon change animated 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 40,
       "left": undefined,
+      "margin": 6,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -630,6 +611,8 @@ exports[`renders icon change animated 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 40,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -638,7 +621,13 @@ exports[`renders icon change animated 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 20,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -648,145 +637,126 @@ exports[`renders icon change animated 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
+      accessibilityTraits="button"
+      accessible={true}
+      centered={true}
       collapsable={false}
-      style={
+      focusable={true}
+      hitSlop={
         Object {
-          "backgroundColor": undefined,
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 20,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 40,
-          "margin": 6,
-          "overflow": "hidden",
-          "width": 40,
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="icon-button-container"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          false,
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 20,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
     >
       <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-          }
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        centered={true}
-        collapsable={false}
-        focusable={true}
-        hitSlop={
-          Object {
-            "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]}
         style={
           Array [
             Object {
-              "overflow": "hidden",
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 24,
+              "width": 24,
             },
-            false,
-            Array [
-              Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
-              },
-              Object {
-                "borderRadius": 20,
-              },
-            ],
           ]
         }
-        testID="icon-button"
       >
         <View
+          collapsable={false}
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "justifyContent": "center",
-              },
-              Object {
-                "height": 24,
-                "width": 24,
-              },
-            ]
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "opacity": 1,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": Array [
+                Object {
+                  "rotate": "0deg",
+                },
+              ],
+            }
           }
         >
-          <View
-            collapsable={false}
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": Array [
-                  Object {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
+              Array [
+                Object {
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
+                },
                 Array [
                   Object {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
                   Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "backgroundColor": "transparent",
                   },
-                  Object {},
-                ]
-              }
-            >
-              󰄀
-            </Text>
-          </View>
+                ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            󰄀
+          </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 77a3f87cbc..3de447dbad 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -103,10 +103,14 @@ exports[`renders list item with custom description 1`] = `
             style={
               Object {
                 "alignSelf": undefined,
+                "backgroundColor": "rgba(232, 222, 248, 1)",
+                "borderRadius": 8,
                 "bottom": undefined,
                 "end": undefined,
                 "flex": undefined,
+                "height": undefined,
                 "left": undefined,
+                "opacity": undefined,
                 "position": undefined,
                 "right": undefined,
                 "shadowColor": "#000",
@@ -118,6 +122,8 @@ exports[`renders list item with custom description 1`] = `
                 "shadowRadius": 0,
                 "start": undefined,
                 "top": undefined,
+                "transform": undefined,
+                "width": undefined,
               }
             }
             testID="chip-container-outer-layer"
@@ -126,7 +132,13 @@ exports[`renders list item with custom description 1`] = `
               collapsable={false}
               style={
                 Object {
+                  "backgroundColor": "rgba(232, 222, 248, 1)",
+                  "borderColor": "rgba(121, 116, 126, 1)",
+                  "borderRadius": 8,
+                  "borderStyle": "solid",
+                  "borderWidth": 0,
                   "flex": undefined,
+                  "flexDirection": "column",
                   "shadowColor": "#000",
                   "shadowOffset": Object {
                     "height": 0,
@@ -136,138 +148,143 @@ exports[`renders list item with custom description 1`] = `
                   "shadowRadius": 0,
                 }
               }
-              testID="chip-container-inner-layer"
+              testID="chip-container"
             >
               <View
-                collapsable={false}
-                style={
+                accessibilityRole="button"
+                accessibilityState={
                   Object {
-                    "backgroundColor": "rgba(232, 222, 248, 1)",
-                    "borderColor": "rgba(121, 116, 126, 1)",
-                    "borderRadius": 8,
-                    "borderStyle": "solid",
-                    "borderWidth": 0,
-                    "flex": undefined,
-                    "flexDirection": "column",
+                    "disabled": false,
+                    "selected": false,
                   }
                 }
-                testID="chip-container"
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "overflow": "hidden",
+                    },
+                    false,
+                    Array [
+                      Object {
+                        "borderRadius": 8,
+                      },
+                      Object {
+                        "flexGrow": 1,
+                      },
+                    ],
+                  ]
+                }
+                testID="chip"
               >
                 <View
-                  accessibilityRole="button"
-                  accessibilityState={
-                    Object {
-                      "disabled": false,
-                      "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]}
                   style={
                     Array [
                       Object {
-                        "overflow": "hidden",
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "flexGrow": 1,
+                        "paddingLeft": 4,
+                        "position": "relative",
+                      },
+                      Object {
+                        "paddingLeft": 0,
+                      },
+                      Object {
+                        "paddingRight": 0,
                       },
-                      false,
-                      Array [
-                        Object {
-                          "borderRadius": 8,
-                        },
-                        Object {
-                          "flexGrow": 1,
-                        },
-                      ],
                     ]
                   }
-                  testID="chip"
                 >
                   <View
                     style={
                       Array [
                         Object {
-                          "alignItems": "center",
-                          "flexDirection": "row",
-                          "flexGrow": 1,
-                          "paddingLeft": 4,
-                          "position": "relative",
-                        },
-                        Object {
-                          "paddingLeft": 0,
+                          "alignSelf": "center",
+                          "padding": 4,
                         },
                         Object {
+                          "paddingLeft": 8,
                           "paddingRight": 0,
                         },
+                        null,
                       ]
                     }
                   >
-                    <View
+                    <Text
+                      accessibilityElementsHidden={true}
+                      allowFontScaling={false}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
                       style={
                         Array [
                           Object {
-                            "alignSelf": "center",
-                            "padding": 4,
+                            "color": "rgba(103, 80, 164, 1)",
+                            "fontSize": 18,
                           },
-                          Object {
-                            "paddingLeft": 8,
-                            "paddingRight": 0,
-                          },
-                          null,
-                        ]
-                      }
-                    >
-                      <Text
-                        accessibilityElementsHidden={true}
-                        allowFontScaling={false}
-                        importantForAccessibility="no-hide-descendants"
-                        pointerEvents="none"
-                        selectable={false}
-                        style={
                           Array [
                             Object {
-                              "color": "rgba(103, 80, 164, 1)",
-                              "fontSize": 18,
+                              "lineHeight": 18,
+                              "transform": Array [
+                                Object {
+                                  "scaleX": 1,
+                                },
+                              ],
                             },
-                            Array [
-                              Object {
-                                "lineHeight": 18,
-                                "transform": Array [
-                                  Object {
-                                    "scaleX": 1,
-                                  },
-                                ],
-                              },
-                              Object {
-                                "backgroundColor": "transparent",
-                              },
-                            ],
                             Object {
-                              "fontFamily": "Material Design Icons",
-                              "fontStyle": "normal",
-                              "fontWeight": "normal",
+                              "backgroundColor": "transparent",
                             },
-                            Object {},
-                          ]
-                        }
-                      >
-                        󰈦
-                      </Text>
-                    </View>
-                    <Text
-                      numberOfLines={1}
-                      selectable={false}
-                      style={
+                          ],
+                          Object {
+                            "fontFamily": "Material Design Icons",
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          Object {},
+                        ]
+                      }
+                    >
+                      󰈦
+                    </Text>
+                  </View>
+                  <Text
+                    numberOfLines={1}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
+                        },
                         Array [
                           Object {
+                            "marginVertical": 6,
+                            "textAlignVertical": "center",
+                          },
+                          Object {
+                            "color": "rgba(29, 25, 43, 1)",
                             "fontFamily": "System",
                             "fontSize": 14,
                             "fontWeight": "500",
@@ -275,37 +292,16 @@ exports[`renders list item with custom description 1`] = `
                             "lineHeight": 20,
                           },
                           Object {
-                            "textAlign": "left",
+                            "marginLeft": 8,
+                            "marginRight": 16,
                           },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "marginVertical": 6,
-                              "textAlignVertical": "center",
-                            },
-                            Object {
-                              "color": "rgba(29, 25, 43, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 14,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.1,
-                              "lineHeight": 20,
-                            },
-                            Object {
-                              "marginLeft": 8,
-                              "marginRight": 16,
-                            },
-                            undefined,
-                          ],
-                        ]
-                      }
-                    >
-                      DOCS.pdf
-                    </Text>
-                  </View>
+                          undefined,
+                        ],
+                      ]
+                    }
+                  >
+                    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 5b3bdd5b3b..daa8f91b9c 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -19,10 +19,14 @@ Array [
         style={
           Object {
             "alignSelf": undefined,
+            "backgroundColor": "transparent",
+            "borderRadius": 20,
             "bottom": undefined,
             "end": undefined,
             "flex": undefined,
+            "height": undefined,
             "left": undefined,
+            "opacity": undefined,
             "position": undefined,
             "right": undefined,
             "shadowColor": "#000",
@@ -34,6 +38,8 @@ Array [
             "shadowRadius": 0,
             "start": undefined,
             "top": undefined,
+            "transform": undefined,
+            "width": undefined,
           }
         }
         testID="button-container-outer-layer"
@@ -42,7 +48,13 @@ Array [
           collapsable={false}
           style={
             Object {
+              "backgroundColor": "transparent",
+              "borderColor": "rgba(121, 116, 126, 1)",
+              "borderRadius": 20,
+              "borderStyle": "solid",
+              "borderWidth": 1,
               "flex": undefined,
+              "minWidth": 64,
               "shadowColor": "#000",
               "shadowOffset": Object {
                 "height": 0,
@@ -52,116 +64,100 @@ Array [
               "shadowRadius": 0,
             }
           }
-          testID="button-container-inner-layer"
+          testID="button-container"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "backgroundColor": "transparent",
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderStyle": "solid",
-                "borderWidth": 1,
-                "flex": undefined,
-                "minWidth": 64,
+                "disabled": true,
               }
             }
-            testID="button-container"
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "overflow": "hidden",
+                },
+                false,
+                Object {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+            testID="button"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": true,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
               style={
                 Array [
                   Object {
-                    "overflow": "hidden",
-                  },
-                  false,
-                  Object {
-                    "borderRadius": 20,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                   },
+                  undefined,
                 ]
               }
-              testID="button"
             >
-              <View
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
+                    },
+                    Object {
+                      "textAlign": "left",
+                    },
+                    Object {
+                      "color": "rgba(28, 27, 31, 1)",
+                      "writingDirection": "ltr",
                     },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  numberOfLines={1}
-                  selectable={false}
-                  style={
                     Array [
                       Object {
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      false,
+                      Object {
+                        "marginHorizontal": 24,
+                        "marginVertical": 10,
+                      },
+                      undefined,
+                      false,
+                      Object {
+                        "color": "rgba(103, 80, 164, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
                         "letterSpacing": 0.1,
                         "lineHeight": 20,
                       },
-                      Object {
-                        "textAlign": "left",
-                      },
-                      Object {
-                        "color": "rgba(28, 27, 31, 1)",
-                        "writingDirection": "ltr",
-                      },
-                      Array [
-                        Object {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        false,
-                        Object {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        Object {
-                          "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>
+                      undefined,
+                    ],
+                  ]
+                }
+                testID="button-text"
+              >
+                Open menu
+              </Text>
             </View>
           </View>
         </View>
@@ -241,10 +237,16 @@ Array [
           style={
             Object {
               "alignSelf": undefined,
+              "backgroundColor": "rgb(243, 237, 246)",
+              "borderRadius": 4,
+              "borderTopLeftRadius": 0,
+              "borderTopRightRadius": 0,
               "bottom": undefined,
               "end": undefined,
               "flex": undefined,
+              "height": undefined,
               "left": undefined,
+              "opacity": 0,
               "position": undefined,
               "right": undefined,
               "shadowColor": "#000",
@@ -256,6 +258,15 @@ Array [
               "shadowRadius": 6,
               "start": undefined,
               "top": undefined,
+              "transform": Array [
+                Object {
+                  "scaleX": 0,
+                },
+                Object {
+                  "scaleY": 0,
+                },
+              ],
+              "width": undefined,
             }
           }
           testID="menu-surface-outer-layer"
@@ -264,7 +275,12 @@ Array [
             collapsable={false}
             style={
               Object {
+                "backgroundColor": "rgb(243, 237, 246)",
+                "borderRadius": 4,
+                "borderTopLeftRadius": 0,
+                "borderTopRightRadius": 0,
                 "flex": undefined,
+                "paddingVertical": 8,
                 "shadowColor": "#000",
                 "shadowOffset": Object {
                   "height": 1,
@@ -274,243 +290,219 @@ Array [
                 "shadowRadius": 2,
               }
             }
-            testID="menu-surface-inner-layer"
+            testID="menu-surface"
           >
             <View
+              accessibilityRole="menuitem"
+              accessibilityState={
+                Object {
+                  "disabled": 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]}
               style={
-                Object {
-                  "backgroundColor": "rgb(243, 237, 246)",
-                  "borderRadius": 4,
-                  "borderTopLeftRadius": 0,
-                  "borderTopRightRadius": 0,
-                  "flex": undefined,
-                  "opacity": 0,
-                  "paddingVertical": 8,
-                  "transform": Array [
+                Array [
+                  false,
+                  false,
+                  Array [
                     Object {
-                      "scaleX": 0,
+                      "height": 48,
+                      "justifyContent": "center",
+                      "maxWidth": 280,
+                      "minWidth": 112,
                     },
                     Object {
-                      "scaleY": 0,
+                      "paddingHorizontal": 12,
                     },
+                    undefined,
+                    undefined,
                   ],
-                }
+                ]
               }
-              testID="menu-surface"
+              testID="menu-item"
             >
               <View
-                accessibilityRole="menuitem"
-                accessibilityState={
+                style={
                   Object {
-                    "disabled": false,
+                    "flexDirection": "row",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Array [
-                    false,
-                    false,
+              >
+                <View
+                  pointerEvents="none"
+                  style={
                     Array [
+                      false,
                       Object {
-                        "height": 48,
                         "justifyContent": "center",
-                        "maxWidth": 280,
-                        "minWidth": 112,
                       },
                       Object {
-                        "paddingHorizontal": 12,
+                        "maxWidth": 268,
+                        "minWidth": 100,
+                      },
+                      Object {
+                        "marginLeft": 4,
                       },
                       undefined,
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="menu-item"
-              >
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                    }
+                    ]
                   }
                 >
-                  <View
-                    pointerEvents="none"
+                  <Text
+                    maxFontSizeMultiplier={1.5}
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
-                        false,
                         Object {
-                          "justifyContent": "center",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "letterSpacing": 0.15,
+                          "lineHeight": 24,
                         },
                         Object {
-                          "maxWidth": 268,
-                          "minWidth": 100,
+                          "textAlign": "left",
                         },
                         Object {
-                          "marginLeft": 4,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1.5}
-                      numberOfLines={1}
-                      selectable={false}
-                      style={
                         Array [
+                          false,
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
                             "letterSpacing": 0.15,
                             "lineHeight": 24,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            false,
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "letterSpacing": 0.15,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                        ]
-                      }
-                      testID="menu-item-title"
-                    >
-                      Undo
-                    </Text>
-                  </View>
+                          undefined,
+                        ],
+                      ]
+                    }
+                    testID="menu-item-title"
+                  >
+                    Undo
+                  </Text>
                 </View>
               </View>
+            </View>
+            <View
+              accessibilityRole="menuitem"
+              accessibilityState={
+                Object {
+                  "disabled": 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]}
+              style={
+                Array [
+                  false,
+                  false,
+                  Array [
+                    Object {
+                      "height": 48,
+                      "justifyContent": "center",
+                      "maxWidth": 280,
+                      "minWidth": 112,
+                    },
+                    Object {
+                      "paddingHorizontal": 12,
+                    },
+                    undefined,
+                    undefined,
+                  ],
+                ]
+              }
+              testID="menu-item"
+            >
               <View
-                accessibilityRole="menuitem"
-                accessibilityState={
+                style={
                   Object {
-                    "disabled": false,
+                    "flexDirection": "row",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Array [
-                    false,
-                    false,
+              >
+                <View
+                  pointerEvents="none"
+                  style={
                     Array [
+                      false,
                       Object {
-                        "height": 48,
                         "justifyContent": "center",
-                        "maxWidth": 280,
-                        "minWidth": 112,
                       },
                       Object {
-                        "paddingHorizontal": 12,
+                        "maxWidth": 268,
+                        "minWidth": 100,
+                      },
+                      Object {
+                        "marginLeft": 4,
                       },
                       undefined,
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="menu-item"
-              >
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                    }
+                    ]
                   }
                 >
-                  <View
-                    pointerEvents="none"
+                  <Text
+                    maxFontSizeMultiplier={1.5}
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
-                        false,
                         Object {
-                          "justifyContent": "center",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "letterSpacing": 0.15,
+                          "lineHeight": 24,
                         },
                         Object {
-                          "maxWidth": 268,
-                          "minWidth": 100,
+                          "textAlign": "left",
                         },
                         Object {
-                          "marginLeft": 4,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1.5}
-                      numberOfLines={1}
-                      selectable={false}
-                      style={
                         Array [
+                          false,
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
                             "letterSpacing": 0.15,
                             "lineHeight": 24,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            false,
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "letterSpacing": 0.15,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                        ]
-                      }
-                      testID="menu-item-title"
-                    >
-                      Redo
-                    </Text>
-                  </View>
+                          undefined,
+                        ],
+                      ]
+                    }
+                    testID="menu-item-title"
+                  >
+                    Redo
+                  </Text>
                 </View>
               </View>
             </View>
@@ -540,10 +532,14 @@ exports[`renders not visible menu 1`] = `
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": undefined,
           "left": undefined,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -555,6 +551,8 @@ exports[`renders not visible menu 1`] = `
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": undefined,
         }
       }
       testID="button-container-outer-layer"
@@ -563,7 +561,13 @@ exports[`renders not visible menu 1`] = `
         collapsable={false}
         style={
           Object {
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderStyle": "solid",
+            "borderWidth": 1,
             "flex": undefined,
+            "minWidth": 64,
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -573,116 +577,100 @@ exports[`renders not visible menu 1`] = `
             "shadowRadius": 0,
           }
         }
-        testID="button-container-inner-layer"
+        testID="button-container"
       >
         <View
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessible={true}
           collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "backgroundColor": "transparent",
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "flex": undefined,
-              "minWidth": 64,
-            }
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              false,
+              Object {
+                "borderRadius": 20,
+              },
+            ]
           }
-          testID="button-container"
+          testID="button"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": true,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
-                },
-                false,
-                Object {
-                  "borderRadius": 20,
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
                 },
+                undefined,
               ]
             }
-            testID="button"
           >
-            <View
+            <Text
+              numberOfLines={1}
+              selectable={false}
               style={
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.1,
+                    "lineHeight": 20,
+                  },
+                  Object {
+                    "textAlign": "left",
+                  },
+                  Object {
+                    "color": "rgba(28, 27, 31, 1)",
+                    "writingDirection": "ltr",
                   },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                numberOfLines={1}
-                selectable={false}
-                style={
                   Array [
                     Object {
+                      "marginHorizontal": 16,
+                      "marginVertical": 9,
+                      "textAlign": "center",
+                    },
+                    false,
+                    Object {
+                      "marginHorizontal": 24,
+                      "marginVertical": 10,
+                    },
+                    undefined,
+                    false,
+                    Object {
+                      "color": "rgba(103, 80, 164, 1)",
                       "fontFamily": "System",
                       "fontSize": 14,
                       "fontWeight": "500",
                       "letterSpacing": 0.1,
                       "lineHeight": 20,
                     },
-                    Object {
-                      "textAlign": "left",
-                    },
-                    Object {
-                      "color": "rgba(28, 27, 31, 1)",
-                      "writingDirection": "ltr",
-                    },
-                    Array [
-                      Object {
-                        "marginHorizontal": 16,
-                        "marginVertical": 9,
-                        "textAlign": "center",
-                      },
-                      false,
-                      Object {
-                        "marginHorizontal": 24,
-                        "marginVertical": 10,
-                      },
-                      undefined,
-                      false,
-                      Object {
-                        "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>
+                    undefined,
+                  ],
+                ]
+              }
+              testID="button-text"
+            >
+              Open menu
+            </Text>
           </View>
         </View>
       </View>
@@ -710,10 +698,14 @@ Array [
         style={
           Object {
             "alignSelf": undefined,
+            "backgroundColor": "transparent",
+            "borderRadius": 20,
             "bottom": undefined,
             "end": undefined,
             "flex": undefined,
+            "height": undefined,
             "left": undefined,
+            "opacity": undefined,
             "position": undefined,
             "right": undefined,
             "shadowColor": "#000",
@@ -725,6 +717,8 @@ Array [
             "shadowRadius": 0,
             "start": undefined,
             "top": undefined,
+            "transform": undefined,
+            "width": undefined,
           }
         }
         testID="button-container-outer-layer"
@@ -733,7 +727,13 @@ Array [
           collapsable={false}
           style={
             Object {
+              "backgroundColor": "transparent",
+              "borderColor": "rgba(121, 116, 126, 1)",
+              "borderRadius": 20,
+              "borderStyle": "solid",
+              "borderWidth": 1,
               "flex": undefined,
+              "minWidth": 64,
               "shadowColor": "#000",
               "shadowOffset": Object {
                 "height": 0,
@@ -743,116 +743,100 @@ Array [
               "shadowRadius": 0,
             }
           }
-          testID="button-container-inner-layer"
+          testID="button-container"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "backgroundColor": "transparent",
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderStyle": "solid",
-                "borderWidth": 1,
-                "flex": undefined,
-                "minWidth": 64,
+                "disabled": true,
               }
             }
-            testID="button-container"
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "overflow": "hidden",
+                },
+                false,
+                Object {
+                  "borderRadius": 20,
+                },
+              ]
+            }
+            testID="button"
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": true,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
               style={
                 Array [
                   Object {
-                    "overflow": "hidden",
-                  },
-                  false,
-                  Object {
-                    "borderRadius": 20,
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                   },
+                  undefined,
                 ]
               }
-              testID="button"
             >
-              <View
+              <Text
+                numberOfLines={1}
+                selectable={false}
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
+                      "fontFamily": "System",
+                      "fontSize": 14,
+                      "fontWeight": "500",
+                      "letterSpacing": 0.1,
+                      "lineHeight": 20,
+                    },
+                    Object {
+                      "textAlign": "left",
+                    },
+                    Object {
+                      "color": "rgba(28, 27, 31, 1)",
+                      "writingDirection": "ltr",
                     },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  numberOfLines={1}
-                  selectable={false}
-                  style={
                     Array [
                       Object {
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      false,
+                      Object {
+                        "marginHorizontal": 24,
+                        "marginVertical": 10,
+                      },
+                      undefined,
+                      false,
+                      Object {
+                        "color": "rgba(103, 80, 164, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
                         "letterSpacing": 0.1,
                         "lineHeight": 20,
                       },
-                      Object {
-                        "textAlign": "left",
-                      },
-                      Object {
-                        "color": "rgba(28, 27, 31, 1)",
-                        "writingDirection": "ltr",
-                      },
-                      Array [
-                        Object {
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        false,
-                        Object {
-                          "marginHorizontal": 24,
-                          "marginVertical": 10,
-                        },
-                        undefined,
-                        false,
-                        Object {
-                          "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>
+                      undefined,
+                    ],
+                  ]
+                }
+                testID="button-text"
+              >
+                Open menu
+              </Text>
             </View>
           </View>
         </View>
@@ -932,10 +916,14 @@ Array [
           style={
             Object {
               "alignSelf": undefined,
+              "backgroundColor": "rgb(243, 237, 246)",
+              "borderRadius": 4,
               "bottom": undefined,
               "end": undefined,
               "flex": undefined,
+              "height": undefined,
               "left": undefined,
+              "opacity": 0,
               "position": undefined,
               "right": undefined,
               "shadowColor": "#000",
@@ -947,6 +935,15 @@ Array [
               "shadowRadius": 6,
               "start": undefined,
               "top": undefined,
+              "transform": Array [
+                Object {
+                  "scaleX": 0,
+                },
+                Object {
+                  "scaleY": 0,
+                },
+              ],
+              "width": undefined,
             }
           }
           testID="menu-surface-outer-layer"
@@ -955,7 +952,10 @@ Array [
             collapsable={false}
             style={
               Object {
+                "backgroundColor": "rgb(243, 237, 246)",
+                "borderRadius": 4,
                 "flex": undefined,
+                "paddingVertical": 8,
                 "shadowColor": "#000",
                 "shadowOffset": Object {
                   "height": 1,
@@ -965,241 +965,219 @@ Array [
                 "shadowRadius": 2,
               }
             }
-            testID="menu-surface-inner-layer"
+            testID="menu-surface"
           >
             <View
+              accessibilityRole="menuitem"
+              accessibilityState={
+                Object {
+                  "disabled": 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]}
               style={
-                Object {
-                  "backgroundColor": "rgb(243, 237, 246)",
-                  "borderRadius": 4,
-                  "flex": undefined,
-                  "opacity": 0,
-                  "paddingVertical": 8,
-                  "transform": Array [
+                Array [
+                  false,
+                  false,
+                  Array [
                     Object {
-                      "scaleX": 0,
+                      "height": 48,
+                      "justifyContent": "center",
+                      "maxWidth": 280,
+                      "minWidth": 112,
                     },
                     Object {
-                      "scaleY": 0,
+                      "paddingHorizontal": 12,
                     },
+                    undefined,
+                    undefined,
                   ],
-                }
+                ]
               }
-              testID="menu-surface"
+              testID="menu-item"
             >
               <View
-                accessibilityRole="menuitem"
-                accessibilityState={
+                style={
                   Object {
-                    "disabled": false,
+                    "flexDirection": "row",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Array [
-                    false,
-                    false,
+              >
+                <View
+                  pointerEvents="none"
+                  style={
                     Array [
+                      false,
                       Object {
-                        "height": 48,
                         "justifyContent": "center",
-                        "maxWidth": 280,
-                        "minWidth": 112,
                       },
                       Object {
-                        "paddingHorizontal": 12,
+                        "maxWidth": 268,
+                        "minWidth": 100,
+                      },
+                      Object {
+                        "marginLeft": 4,
                       },
                       undefined,
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="menu-item"
-              >
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                    }
+                    ]
                   }
                 >
-                  <View
-                    pointerEvents="none"
+                  <Text
+                    maxFontSizeMultiplier={1.5}
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
-                        false,
                         Object {
-                          "justifyContent": "center",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "letterSpacing": 0.15,
+                          "lineHeight": 24,
                         },
                         Object {
-                          "maxWidth": 268,
-                          "minWidth": 100,
+                          "textAlign": "left",
                         },
                         Object {
-                          "marginLeft": 4,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1.5}
-                      numberOfLines={1}
-                      selectable={false}
-                      style={
                         Array [
+                          false,
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
                             "letterSpacing": 0.15,
                             "lineHeight": 24,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            false,
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "letterSpacing": 0.15,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                        ]
-                      }
-                      testID="menu-item-title"
-                    >
-                      Undo
-                    </Text>
-                  </View>
+                          undefined,
+                        ],
+                      ]
+                    }
+                    testID="menu-item-title"
+                  >
+                    Undo
+                  </Text>
                 </View>
               </View>
+            </View>
+            <View
+              accessibilityRole="menuitem"
+              accessibilityState={
+                Object {
+                  "disabled": 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]}
+              style={
+                Array [
+                  false,
+                  false,
+                  Array [
+                    Object {
+                      "height": 48,
+                      "justifyContent": "center",
+                      "maxWidth": 280,
+                      "minWidth": 112,
+                    },
+                    Object {
+                      "paddingHorizontal": 12,
+                    },
+                    undefined,
+                    undefined,
+                  ],
+                ]
+              }
+              testID="menu-item"
+            >
               <View
-                accessibilityRole="menuitem"
-                accessibilityState={
+                style={
                   Object {
-                    "disabled": false,
+                    "flexDirection": "row",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Array [
-                    false,
-                    false,
+              >
+                <View
+                  pointerEvents="none"
+                  style={
                     Array [
+                      false,
                       Object {
-                        "height": 48,
                         "justifyContent": "center",
-                        "maxWidth": 280,
-                        "minWidth": 112,
                       },
                       Object {
-                        "paddingHorizontal": 12,
+                        "maxWidth": 268,
+                        "minWidth": 100,
+                      },
+                      Object {
+                        "marginLeft": 4,
                       },
                       undefined,
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="menu-item"
-              >
-                <View
-                  style={
-                    Object {
-                      "flexDirection": "row",
-                    }
+                    ]
                   }
                 >
-                  <View
-                    pointerEvents="none"
+                  <Text
+                    maxFontSizeMultiplier={1.5}
+                    numberOfLines={1}
+                    selectable={false}
                     style={
                       Array [
-                        false,
                         Object {
-                          "justifyContent": "center",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "letterSpacing": 0.15,
+                          "lineHeight": 24,
                         },
                         Object {
-                          "maxWidth": 268,
-                          "minWidth": 100,
+                          "textAlign": "left",
                         },
                         Object {
-                          "marginLeft": 4,
+                          "color": "rgba(28, 27, 31, 1)",
+                          "writingDirection": "ltr",
                         },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      maxFontSizeMultiplier={1.5}
-                      numberOfLines={1}
-                      selectable={false}
-                      style={
                         Array [
+                          false,
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
                             "letterSpacing": 0.15,
                             "lineHeight": 24,
                           },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            false,
-                            Object {
-                              "color": "rgba(28, 27, 31, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 16,
-                              "fontWeight": "400",
-                              "letterSpacing": 0.15,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                        ]
-                      }
-                      testID="menu-item-title"
-                    >
-                      Redo
-                    </Text>
-                  </View>
+                          undefined,
+                        ],
+                      ]
+                    }
+                    testID="menu-item-title"
+                  >
+                    Redo
+                  </Text>
                 </View>
               </View>
             </View>
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index 78c1a22642..37c0404991 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -6,10 +6,14 @@ exports[`activity indicator snapshot test 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(238, 232, 244)",
+      "borderRadius": 28,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +25,8 @@ exports[`activity indicator snapshot test 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="search-bar-container-outer-layer"
@@ -29,7 +35,11 @@ exports[`activity indicator snapshot test 1`] = `
     collapsable={false}
     style={
       Object {
+        "alignItems": "center",
+        "backgroundColor": "rgb(238, 232, 244)",
+        "borderRadius": 28,
         "flex": undefined,
+        "flexDirection": "row",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -39,32 +49,50 @@ exports[`activity indicator snapshot test 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="search-bar-container-inner-layer"
+    testID="search-bar-container"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "rgb(238, 232, 244)",
-          "borderRadius": 28,
+          "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
+          "bottom": undefined,
+          "end": undefined,
           "flex": undefined,
-          "flexDirection": "row",
+          "height": 40,
+          "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
+          "position": undefined,
+          "right": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+          "start": undefined,
+          "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
-      testID="search-bar-container"
+      testID="icon-button-container-outer-layer"
     >
       <View
         collapsable={false}
         style={
           Object {
-            "alignSelf": undefined,
-            "bottom": undefined,
-            "end": undefined,
-            "flex": undefined,
-            "left": undefined,
-            "position": undefined,
-            "right": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -72,201 +100,178 @@ exports[`activity indicator snapshot test 1`] = `
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
-            "start": undefined,
-            "top": undefined,
           }
         }
-        testID="icon-button-container-outer-layer"
+        testID="icon-button-container"
       >
         <View
+          accessibilityComponentType="button"
+          accessibilityLabel="search"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
           collapsable={false}
-          style={
+          focusable={true}
+          hitSlop={
             Object {
-              "flex": undefined,
-              "shadowColor": "#000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
-          testID="icon-button-container-inner-layer"
-        >
-          <View
-            collapsable={false}
-            style={
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
               Object {
-                "backgroundColor": undefined,
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderWidth": 0,
-                "elevation": 0,
-                "flex": undefined,
-                "height": 40,
-                "margin": 6,
                 "overflow": "hidden",
-                "width": 40,
-              }
-            }
-            testID="icon-button-container"
-          >
-            <View
-              accessibilityComponentType="button"
-              accessibilityLabel="search"
-              accessibilityRole="button"
-              accessibilityState={
+              },
+              false,
+              Array [
                 Object {
-                  "disabled": true,
-                }
-              }
-              accessibilityTraits="button"
-              accessible={true}
-              centered={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
                 Object {
-                  "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]}
-              style={
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
+                },
                 Array [
                   Object {
-                    "overflow": "hidden",
-                  },
-                  false,
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "flexGrow": 1,
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "borderRadius": 20,
-                    },
-                  ],
-                ]
-              }
-              testID="icon-button"
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(73, 69, 79, 1)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
+                    "lineHeight": 24,
+                    "transform": Array [
                       Object {
-                        "backgroundColor": "transparent",
+                        "scaleX": 1,
                       },
                     ],
-                    Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                󰍉
-              </Text>
-            </View>
-          </View>
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            󰍉
+          </Text>
         </View>
       </View>
-      <TextInput
-        accessibilityRole="search"
-        keyboardAppearance="light"
-        placeholder=""
-        placeholderTextColor="rgba(28, 27, 31, 1)"
-        returnKeyType="search"
-        selectionColor="rgba(103, 80, 164, 1)"
-        style={
-          Array [
-            Object {
-              "alignSelf": "stretch",
-              "flex": 1,
-              "fontSize": 18,
-              "minWidth": 0,
-              "paddingLeft": 8,
-              "textAlign": "left",
-            },
-            Object {
-              "color": "rgba(73, 69, 79, 1)",
-              "fontFamily": "System",
-              "fontSize": 16,
-              "fontWeight": "400",
-              "letterSpacing": 0.15,
-              "lineHeight": 0,
-            },
-            Object {
-              "minHeight": 56,
-              "paddingLeft": 0,
-            },
-            undefined,
-          ]
+    </View>
+    <TextInput
+      accessibilityRole="search"
+      keyboardAppearance="light"
+      placeholder=""
+      placeholderTextColor="rgba(28, 27, 31, 1)"
+      returnKeyType="search"
+      selectionColor="rgba(103, 80, 164, 1)"
+      style={
+        Array [
+          Object {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "fontSize": 18,
+            "minWidth": 0,
+            "paddingLeft": 8,
+            "textAlign": "left",
+          },
+          Object {
+            "color": "rgba(73, 69, 79, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "letterSpacing": 0.15,
+            "lineHeight": 0,
+          },
+          Object {
+            "minHeight": 56,
+            "paddingLeft": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="search-bar"
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <View
+      accessibilityRole="progressbar"
+      accessibilityState={
+        Object {
+          "busy": true,
         }
-        testID="search-bar"
-        underlineColorAndroid="transparent"
-        value=""
-      />
+      }
+      accessible={true}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+          Object {
+            "marginHorizontal": 16,
+          },
+        ]
+      }
+      testID="activity-indicator"
+    >
       <View
-        accessibilityRole="progressbar"
-        accessibilityState={
+        collapsable={false}
+        style={
           Object {
-            "busy": true,
+            "height": 24,
+            "opacity": 1,
+            "width": 24,
           }
         }
-        accessible={true}
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "justifyContent": "center",
-            },
-            Object {
-              "marginHorizontal": 16,
-            },
-          ]
-        }
-        testID="activity-indicator"
       >
         <View
           collapsable={false}
           style={
             Object {
-              "height": 24,
-              "opacity": 1,
-              "width": 24,
+              "alignItems": "center",
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
@@ -274,13 +279,13 @@ exports[`activity indicator snapshot test 1`] = `
             collapsable={false}
             style={
               Object {
-                "alignItems": "center",
-                "bottom": 0,
-                "justifyContent": "center",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "height": 24,
+                "transform": Array [
+                  Object {
+                    "rotate": "45deg",
+                  },
+                ],
+                "width": 24,
               }
             }
           >
@@ -288,12 +293,8 @@ exports[`activity indicator snapshot test 1`] = `
               collapsable={false}
               style={
                 Object {
-                  "height": 24,
-                  "transform": Array [
-                    Object {
-                      "rotate": "45deg",
-                    },
-                  ],
+                  "height": 12,
+                  "overflow": "hidden",
                   "width": 24,
                 }
               }
@@ -302,8 +303,15 @@ exports[`activity indicator snapshot test 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "height": 12,
-                    "overflow": "hidden",
+                    "height": 24,
+                    "transform": Array [
+                      Object {
+                        "translateY": 0,
+                      },
+                      Object {
+                        "rotate": "-165deg",
+                      },
+                    ],
                     "width": 24,
                   }
                 }
@@ -312,15 +320,8 @@ exports[`activity indicator snapshot test 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 24,
-                      "transform": Array [
-                        Object {
-                          "translateY": 0,
-                        },
-                        Object {
-                          "rotate": "-165deg",
-                        },
-                      ],
+                      "height": 12,
+                      "overflow": "hidden",
                       "width": 24,
                     }
                   }
@@ -329,40 +330,44 @@ exports[`activity indicator snapshot test 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 12,
-                        "overflow": "hidden",
+                        "borderColor": "rgba(103, 80, 164, 1)",
+                        "borderRadius": 12,
+                        "borderWidth": 2.4,
+                        "height": 24,
                         "width": 24,
                       }
                     }
-                  >
-                    <View
-                      collapsable={false}
-                      style={
-                        Object {
-                          "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={
+            Object {
+              "alignItems": "center",
+              "bottom": 0,
+              "justifyContent": "center",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
           <View
             collapsable={false}
             style={
               Object {
-                "alignItems": "center",
-                "bottom": 0,
-                "justifyContent": "center",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "height": 24,
+                "transform": Array [
+                  Object {
+                    "rotate": "45deg",
+                  },
+                ],
+                "width": 24,
               }
             }
           >
@@ -370,12 +375,9 @@ exports[`activity indicator snapshot test 1`] = `
               collapsable={false}
               style={
                 Object {
-                  "height": 24,
-                  "transform": Array [
-                    Object {
-                      "rotate": "45deg",
-                    },
-                  ],
+                  "height": 12,
+                  "overflow": "hidden",
+                  "top": 12,
                   "width": 24,
                 }
               }
@@ -384,9 +386,15 @@ exports[`activity indicator snapshot test 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "height": 12,
-                    "overflow": "hidden",
-                    "top": 12,
+                    "height": 24,
+                    "transform": Array [
+                      Object {
+                        "translateY": -12,
+                      },
+                      Object {
+                        "rotate": "345deg",
+                      },
+                    ],
                     "width": 24,
                   }
                 }
@@ -395,15 +403,8 @@ exports[`activity indicator snapshot test 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "height": 24,
-                      "transform": Array [
-                        Object {
-                          "translateY": -12,
-                        },
-                        Object {
-                          "rotate": "345deg",
-                        },
-                      ],
+                      "height": 12,
+                      "overflow": "hidden",
                       "width": 24,
                     }
                   }
@@ -412,25 +413,14 @@ exports[`activity indicator snapshot test 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "height": 12,
-                        "overflow": "hidden",
+                        "borderColor": "rgba(103, 80, 164, 1)",
+                        "borderRadius": 12,
+                        "borderWidth": 2.4,
+                        "height": 24,
                         "width": 24,
                       }
                     }
-                  >
-                    <View
-                      collapsable={false}
-                      style={
-                        Object {
-                          "borderColor": "rgba(103, 80, 164, 1)",
-                          "borderRadius": 12,
-                          "borderWidth": 2.4,
-                          "height": 24,
-                          "width": 24,
-                        }
-                      }
-                    />
-                  </View>
+                  />
                 </View>
               </View>
             </View>
@@ -448,10 +438,14 @@ exports[`renders with placeholder 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(238, 232, 244)",
+      "borderRadius": 28,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -463,6 +457,8 @@ exports[`renders with placeholder 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="search-bar-container-outer-layer"
@@ -471,7 +467,11 @@ exports[`renders with placeholder 1`] = `
     collapsable={false}
     style={
       Object {
+        "alignItems": "center",
+        "backgroundColor": "rgb(238, 232, 244)",
+        "borderRadius": 28,
         "flex": undefined,
+        "flexDirection": "row",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -481,30 +481,215 @@ exports[`renders with placeholder 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="search-bar-container-inner-layer"
+    testID="search-bar-container"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "rgb(238, 232, 244)",
-          "borderRadius": 28,
+          "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
+          "bottom": undefined,
+          "end": undefined,
           "flex": undefined,
-          "flexDirection": "row",
+          "height": 40,
+          "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
+          "position": undefined,
+          "right": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+          "start": undefined,
+          "top": undefined,
+          "transform": undefined,
+          "width": 40,
+        }
+      }
+      testID="icon-button-container-outer-layer"
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          }
         }
+        testID="icon-button-container"
+      >
+        <View
+          accessibilityComponentType="button"
+          accessibilityLabel="search"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "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]}
+          style={
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            󰍉
+          </Text>
+        </View>
+      </View>
+    </View>
+    <TextInput
+      accessibilityRole="search"
+      keyboardAppearance="light"
+      placeholder="Search"
+      placeholderTextColor="rgba(28, 27, 31, 1)"
+      returnKeyType="search"
+      selectionColor="rgba(103, 80, 164, 1)"
+      style={
+        Array [
+          Object {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "fontSize": 18,
+            "minWidth": 0,
+            "paddingLeft": 8,
+            "textAlign": "left",
+          },
+          Object {
+            "color": "rgba(73, 69, 79, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "letterSpacing": 0.15,
+            "lineHeight": 0,
+          },
+          Object {
+            "minHeight": 56,
+            "paddingLeft": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="search-bar"
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+            "position": "absolute",
+            "right": 0,
+          },
+          false,
+        ]
       }
-      testID="search-bar-container"
+      testID="search-bar-icon-wrapper"
     >
       <View
         collapsable={false}
         style={
           Object {
             "alignSelf": undefined,
+            "backgroundColor": "transparent",
+            "borderRadius": 20,
             "bottom": undefined,
             "end": undefined,
             "flex": undefined,
+            "height": 40,
             "left": undefined,
+            "margin": 6,
+            "opacity": undefined,
             "position": undefined,
             "right": undefined,
             "shadowColor": "#000",
@@ -516,6 +701,8 @@ exports[`renders with placeholder 1`] = `
             "shadowRadius": 0,
             "start": undefined,
             "top": undefined,
+            "transform": undefined,
+            "width": 40,
           }
         }
         testID="icon-button-container-outer-layer"
@@ -524,7 +711,13 @@ exports[`renders with placeholder 1`] = `
           collapsable={false}
           style={
             Object {
-              "flex": undefined,
+              "backgroundColor": "transparent",
+              "borderColor": "rgba(121, 116, 126, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+              "elevation": 0,
+              "flex": 1,
+              "overflow": "hidden",
               "shadowColor": "#000",
               "shadowOffset": Object {
                 "height": 0,
@@ -534,314 +727,95 @@ exports[`renders with placeholder 1`] = `
               "shadowRadius": 0,
             }
           }
-          testID="icon-button-container-inner-layer"
+          testID="icon-button-container"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityComponentType="button"
+            accessibilityLabel="clear"
+            accessibilityRole="button"
+            accessibilityState={
               Object {
-                "backgroundColor": undefined,
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderWidth": 0,
-                "elevation": 0,
-                "flex": undefined,
-                "height": 40,
-                "margin": 6,
-                "overflow": "hidden",
-                "width": 40,
+                "disabled": false,
               }
             }
-            testID="icon-button-container"
-          >
-            <View
-              accessibilityComponentType="button"
-              accessibilityLabel="search"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": true,
-                }
+            accessibilityTraits="button"
+            accessible={true}
+            centered={true}
+            collapsable={false}
+            focusable={true}
+            hitSlop={
+              Object {
+                "bottom": 6,
+                "left": 6,
+                "right": 6,
+                "top": 6,
               }
-              accessibilityTraits="button"
-              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]}
+            style={
+              Array [
                 Object {
-                  "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]}
+                  "overflow": "hidden",
+                },
+                false,
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                  },
+                  Object {
+                    "borderRadius": 20,
+                  },
+                ],
+              ]
+            }
+            testID="icon-button"
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
               style={
                 Array [
                   Object {
-                    "overflow": "hidden",
+                    "color": "rgba(255, 255, 255, 0)",
+                    "fontSize": 24,
                   },
-                  false,
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "flexGrow": 1,
-                      "justifyContent": "center",
+                      "lineHeight": 24,
+                      "transform": Array [
+                        Object {
+                          "scaleX": 1,
+                        },
+                      ],
                     },
                     Object {
-                      "borderRadius": 20,
+                      "backgroundColor": "transparent",
                     },
                   ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
                 ]
               }
-              testID="icon-button"
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(73, 69, 79, 1)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                󰍉
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <TextInput
-        accessibilityRole="search"
-        keyboardAppearance="light"
-        placeholder="Search"
-        placeholderTextColor="rgba(28, 27, 31, 1)"
-        returnKeyType="search"
-        selectionColor="rgba(103, 80, 164, 1)"
-        style={
-          Array [
-            Object {
-              "alignSelf": "stretch",
-              "flex": 1,
-              "fontSize": 18,
-              "minWidth": 0,
-              "paddingLeft": 8,
-              "textAlign": "left",
-            },
-            Object {
-              "color": "rgba(73, 69, 79, 1)",
-              "fontFamily": "System",
-              "fontSize": 16,
-              "fontWeight": "400",
-              "letterSpacing": 0.15,
-              "lineHeight": 0,
-            },
-            Object {
-              "minHeight": 56,
-              "paddingLeft": 0,
-            },
-            undefined,
-          ]
-        }
-        testID="search-bar"
-        underlineColorAndroid="transparent"
-        value=""
-      />
-      <View
-        pointerEvents="none"
-        style={
-          Array [
-            Object {
-              "marginLeft": 16,
-              "position": "absolute",
-              "right": 0,
-            },
-            false,
-          ]
-        }
-        testID="search-bar-icon-wrapper"
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "alignSelf": undefined,
-              "bottom": undefined,
-              "end": undefined,
-              "flex": undefined,
-              "left": undefined,
-              "position": undefined,
-              "right": undefined,
-              "shadowColor": "#000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
-              "start": undefined,
-              "top": undefined,
-            }
-          }
-          testID="icon-button-container-outer-layer"
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "flex": undefined,
-                "shadowColor": "#000",
-                "shadowOffset": Object {
-                  "height": 0,
-                  "width": 0,
-                },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
-              }
-            }
-            testID="icon-button-container-inner-layer"
-          >
-            <View
-              collapsable={false}
-              style={
-                Object {
-                  "backgroundColor": undefined,
-                  "borderColor": "rgba(121, 116, 126, 1)",
-                  "borderRadius": 20,
-                  "borderWidth": 0,
-                  "elevation": 0,
-                  "flex": undefined,
-                  "height": 40,
-                  "margin": 6,
-                  "overflow": "hidden",
-                  "width": 40,
-                }
-              }
-              testID="icon-button-container"
-            >
-              <View
-                accessibilityComponentType="button"
-                accessibilityLabel="clear"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessibilityTraits="button"
-                accessible={true}
-                centered={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
-                  Object {
-                    "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]}
-                style={
-                  Array [
-                    Object {
-                      "overflow": "hidden",
-                    },
-                    false,
-                    Array [
-                      Object {
-                        "alignItems": "center",
-                        "flexGrow": 1,
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "borderRadius": 20,
-                      },
-                    ],
-                  ]
-                }
-                testID="icon-button"
-              >
-                <Text
-                  accessibilityElementsHidden={true}
-                  allowFontScaling={false}
-                  importantForAccessibility="no-hide-descendants"
-                  pointerEvents="none"
-                  selectable={false}
-                  style={
-                    Array [
-                      Object {
-                        "color": "rgba(255, 255, 255, 0)",
-                        "fontSize": 24,
-                      },
-                      Array [
-                        Object {
-                          "lineHeight": 24,
-                          "transform": Array [
-                            Object {
-                              "scaleX": 1,
-                            },
-                          ],
-                        },
-                        Object {
-                          "backgroundColor": "transparent",
-                        },
-                      ],
-                      Object {
-                        "fontFamily": "Material Design Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      Object {},
-                    ]
-                  }
-                >
-                  󰅖
-                </Text>
-              </View>
-            </View>
+              󰅖
+            </Text>
           </View>
         </View>
       </View>
@@ -856,10 +830,14 @@ exports[`renders with text 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgb(238, 232, 244)",
+      "borderRadius": 28,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -871,6 +849,8 @@ exports[`renders with text 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": undefined,
     }
   }
   testID="search-bar-container-outer-layer"
@@ -879,7 +859,11 @@ exports[`renders with text 1`] = `
     collapsable={false}
     style={
       Object {
+        "alignItems": "center",
+        "backgroundColor": "rgb(238, 232, 244)",
+        "borderRadius": 28,
         "flex": undefined,
+        "flexDirection": "row",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -889,32 +873,50 @@ exports[`renders with text 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="search-bar-container-inner-layer"
+    testID="search-bar-container"
   >
     <View
       collapsable={false}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "rgb(238, 232, 244)",
-          "borderRadius": 28,
+          "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
+          "bottom": undefined,
+          "end": undefined,
           "flex": undefined,
-          "flexDirection": "row",
+          "height": 40,
+          "left": undefined,
+          "margin": 6,
+          "opacity": undefined,
+          "position": undefined,
+          "right": undefined,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+          "start": undefined,
+          "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
-      testID="search-bar-container"
+      testID="icon-button-container-outer-layer"
     >
       <View
         collapsable={false}
         style={
           Object {
-            "alignSelf": undefined,
-            "bottom": undefined,
-            "end": undefined,
-            "flex": undefined,
-            "left": undefined,
-            "position": undefined,
-            "right": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -922,194 +924,188 @@ exports[`renders with text 1`] = `
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
-            "start": undefined,
-            "top": undefined,
           }
         }
-        testID="icon-button-container-outer-layer"
+        testID="icon-button-container"
       >
         <View
+          accessibilityComponentType="button"
+          accessibilityLabel="search"
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": true,
+            }
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
           collapsable={false}
-          style={
+          focusable={true}
+          hitSlop={
             Object {
-              "flex": undefined,
-              "shadowColor": "#000",
-              "shadowOffset": Object {
-                "height": 0,
-                "width": 0,
-              },
-              "shadowOpacity": 0,
-              "shadowRadius": 0,
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
           }
-          testID="icon-button-container-inner-layer"
-        >
-          <View
-            collapsable={false}
-            style={
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
               Object {
-                "backgroundColor": undefined,
-                "borderColor": "rgba(121, 116, 126, 1)",
-                "borderRadius": 20,
-                "borderWidth": 0,
-                "elevation": 0,
-                "flex": undefined,
-                "height": 40,
-                "margin": 6,
                 "overflow": "hidden",
-                "width": 40,
-              }
-            }
-            testID="icon-button-container"
-          >
-            <View
-              accessibilityComponentType="button"
-              accessibilityLabel="search"
-              accessibilityRole="button"
-              accessibilityState={
+              },
+              false,
+              Array [
                 Object {
-                  "disabled": true,
-                }
-              }
-              accessibilityTraits="button"
-              accessible={true}
-              centered={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
                 Object {
-                  "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]}
-              style={
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="icon-button"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
+                },
                 Array [
                   Object {
-                    "overflow": "hidden",
-                  },
-                  false,
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "flexGrow": 1,
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "borderRadius": 20,
-                    },
-                  ],
-                ]
-              }
-              testID="icon-button"
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(73, 69, 79, 1)",
-                      "fontSize": 24,
-                    },
-                    Array [
+                    "lineHeight": 24,
+                    "transform": Array [
                       Object {
-                        "lineHeight": 24,
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
+                        "scaleX": 1,
                       },
                     ],
-                    Object {
-                      "fontFamily": "Material Design Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                󰍉
-              </Text>
-            </View>
-          </View>
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            󰍉
+          </Text>
         </View>
       </View>
-      <TextInput
-        accessibilityRole="search"
-        keyboardAppearance="light"
-        placeholder="Search"
-        placeholderTextColor="rgba(28, 27, 31, 1)"
-        returnKeyType="search"
-        selectionColor="rgba(103, 80, 164, 1)"
-        style={
-          Array [
-            Object {
-              "alignSelf": "stretch",
-              "flex": 1,
-              "fontSize": 18,
-              "minWidth": 0,
-              "paddingLeft": 8,
-              "textAlign": "left",
-            },
-            Object {
-              "color": "rgba(73, 69, 79, 1)",
-              "fontFamily": "System",
-              "fontSize": 16,
-              "fontWeight": "400",
-              "letterSpacing": 0.15,
-              "lineHeight": 0,
-            },
-            Object {
-              "minHeight": 56,
-              "paddingLeft": 0,
-            },
-            undefined,
-          ]
-        }
-        testID="search-bar"
-        underlineColorAndroid="transparent"
-        value="query"
-      />
+    </View>
+    <TextInput
+      accessibilityRole="search"
+      keyboardAppearance="light"
+      placeholder="Search"
+      placeholderTextColor="rgba(28, 27, 31, 1)"
+      returnKeyType="search"
+      selectionColor="rgba(103, 80, 164, 1)"
+      style={
+        Array [
+          Object {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "fontSize": 18,
+            "minWidth": 0,
+            "paddingLeft": 8,
+            "textAlign": "left",
+          },
+          Object {
+            "color": "rgba(73, 69, 79, 1)",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "letterSpacing": 0.15,
+            "lineHeight": 0,
+          },
+          Object {
+            "minHeight": 56,
+            "paddingLeft": 0,
+          },
+          undefined,
+        ]
+      }
+      testID="search-bar"
+      underlineColorAndroid="transparent"
+      value="query"
+    />
+    <View
+      pointerEvents="auto"
+      style={
+        Array [
+          false,
+          false,
+        ]
+      }
+      testID="search-bar-icon-wrapper"
+    >
       <View
-        pointerEvents="auto"
+        collapsable={false}
         style={
-          Array [
-            false,
-            false,
-          ]
+          Object {
+            "alignSelf": undefined,
+            "backgroundColor": "transparent",
+            "borderRadius": 20,
+            "bottom": undefined,
+            "end": undefined,
+            "flex": undefined,
+            "height": 40,
+            "left": undefined,
+            "margin": 6,
+            "opacity": undefined,
+            "position": undefined,
+            "right": undefined,
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+            "start": undefined,
+            "top": undefined,
+            "transform": undefined,
+            "width": 40,
+          }
         }
-        testID="search-bar-icon-wrapper"
+        testID="icon-button-container-outer-layer"
       >
         <View
           collapsable={false}
           style={
             Object {
-              "alignSelf": undefined,
-              "bottom": undefined,
-              "end": undefined,
-              "flex": undefined,
-              "left": undefined,
-              "position": undefined,
-              "right": undefined,
+              "backgroundColor": "transparent",
+              "borderColor": "rgba(121, 116, 126, 1)",
+              "borderRadius": 20,
+              "borderWidth": 0,
+              "elevation": 0,
+              "flex": 1,
+              "overflow": "hidden",
               "shadowColor": "#000",
               "shadowOffset": Object {
                 "height": 0,
@@ -1117,135 +1113,97 @@ exports[`renders with text 1`] = `
               },
               "shadowOpacity": 0,
               "shadowRadius": 0,
-              "start": undefined,
-              "top": undefined,
             }
           }
-          testID="icon-button-container-outer-layer"
+          testID="icon-button-container"
         >
           <View
+            accessibilityComponentType="button"
+            accessibilityLabel="clear"
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            accessibilityTraits="button"
+            accessible={true}
+            centered={true}
             collapsable={false}
-            style={
+            focusable={true}
+            hitSlop={
               Object {
-                "flex": undefined,
-                "shadowColor": "#000",
-                "shadowOffset": Object {
-                  "height": 0,
-                  "width": 0,
-                },
-                "shadowOpacity": 0,
-                "shadowRadius": 0,
+                "bottom": 6,
+                "left": 6,
+                "right": 6,
+                "top": 6,
               }
             }
-            testID="icon-button-container-inner-layer"
-          >
-            <View
-              collapsable={false}
-              style={
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
                 Object {
-                  "backgroundColor": undefined,
-                  "borderColor": "rgba(121, 116, 126, 1)",
-                  "borderRadius": 20,
-                  "borderWidth": 0,
-                  "elevation": 0,
-                  "flex": undefined,
-                  "height": 40,
-                  "margin": 6,
                   "overflow": "hidden",
-                  "width": 40,
-                }
-              }
-              testID="icon-button-container"
-            >
-              <View
-                accessibilityComponentType="button"
-                accessibilityLabel="clear"
-                accessibilityRole="button"
-                accessibilityState={
+                },
+                false,
+                Array [
                   Object {
-                    "disabled": false,
-                  }
-                }
-                accessibilityTraits="button"
-                accessible={true}
-                centered={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={
+                    "alignItems": "center",
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                  },
                   Object {
-                    "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]}
-                style={
+                    "borderRadius": 20,
+                  },
+                ],
+              ]
+            }
+            testID="icon-button"
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "rgba(73, 69, 79, 1)",
+                    "fontSize": 24,
+                  },
                   Array [
                     Object {
-                      "overflow": "hidden",
-                    },
-                    false,
-                    Array [
-                      Object {
-                        "alignItems": "center",
-                        "flexGrow": 1,
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "borderRadius": 20,
-                      },
-                    ],
-                  ]
-                }
-                testID="icon-button"
-              >
-                <Text
-                  accessibilityElementsHidden={true}
-                  allowFontScaling={false}
-                  importantForAccessibility="no-hide-descendants"
-                  pointerEvents="none"
-                  selectable={false}
-                  style={
-                    Array [
-                      Object {
-                        "color": "rgba(73, 69, 79, 1)",
-                        "fontSize": 24,
-                      },
-                      Array [
-                        Object {
-                          "lineHeight": 24,
-                          "transform": Array [
-                            Object {
-                              "scaleX": 1,
-                            },
-                          ],
-                        },
+                      "lineHeight": 24,
+                      "transform": Array [
                         Object {
-                          "backgroundColor": "transparent",
+                          "scaleX": 1,
                         },
                       ],
-                      Object {
-                        "fontFamily": "Material Design Icons",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      Object {},
-                    ]
-                  }
-                >
-                  󰅖
-                </Text>
-              </View>
-            </View>
+                    },
+                    Object {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                  Object {
+                    "fontFamily": "Material Design Icons",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              󰅖
+            </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 22db9eaae1..d913e9979d 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -25,10 +25,15 @@ exports[`renders snackbar with Text as a child 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "rgba(49, 48, 51, 1)",
+        "borderRadius": 4,
         "bottom": undefined,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": undefined,
+        "margin": 8,
+        "opacity": 1,
         "position": undefined,
         "right": undefined,
         "shadowColor": "#000",
@@ -40,15 +45,28 @@ exports[`renders snackbar with Text as a child 1`] = `
         "shadowRadius": 6,
         "start": undefined,
         "top": undefined,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": undefined,
       }
     }
     testID="surface-outer-layer"
   >
     <View
+      accessibilityLiveRegion="polite"
       collapsable={false}
+      pointerEvents="box-none"
       style={
         Object {
+          "backgroundColor": "rgba(49, 48, 51, 1)",
+          "borderRadius": 4,
           "flex": undefined,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "minHeight": 48,
           "shadowColor": "#000",
           "shadowOffset": Object {
             "height": 1,
@@ -58,45 +76,21 @@ exports[`renders snackbar with Text as a child 1`] = `
           "shadowRadius": 2,
         }
       }
-      testID="surface-inner-layer"
+      testID="surface"
     >
       <View
-        accessibilityLiveRegion="polite"
-        collapsable={false}
-        pointerEvents="box-none"
         style={
           Object {
-            "backgroundColor": "rgba(49, 48, 51, 1)",
-            "borderRadius": 4,
-            "flex": undefined,
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "margin": 8,
-            "minHeight": 48,
-            "opacity": 1,
-            "transform": Array [
-              Object {
-                "scale": 1,
-              },
-            ],
+            "flex": 1,
+            "marginHorizontal": 16,
+            "marginVertical": 14,
           }
         }
-        testID="surface"
       >
-        <View
-          style={
-            Object {
-              "flex": 1,
-              "marginHorizontal": 16,
-              "marginVertical": 14,
-            }
-          }
-        >
-          <View>
-            <Text>
-              Snackbar content
-            </Text>
-          </View>
+        <View>
+          <Text>
+            Snackbar content
+          </Text>
         </View>
       </View>
     </View>
@@ -127,10 +121,15 @@ exports[`renders snackbar with View & Text as a child 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "rgba(49, 48, 51, 1)",
+        "borderRadius": 4,
         "bottom": undefined,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": undefined,
+        "margin": 8,
+        "opacity": 1,
         "position": undefined,
         "right": undefined,
         "shadowColor": "#000",
@@ -142,15 +141,28 @@ exports[`renders snackbar with View & Text as a child 1`] = `
         "shadowRadius": 6,
         "start": undefined,
         "top": undefined,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": undefined,
       }
     }
     testID="surface-outer-layer"
   >
     <View
+      accessibilityLiveRegion="polite"
       collapsable={false}
+      pointerEvents="box-none"
       style={
         Object {
+          "backgroundColor": "rgba(49, 48, 51, 1)",
+          "borderRadius": 4,
           "flex": undefined,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "minHeight": 48,
           "shadowColor": "#000",
           "shadowOffset": Object {
             "height": 1,
@@ -160,70 +172,46 @@ exports[`renders snackbar with View & Text as a child 1`] = `
           "shadowRadius": 2,
         }
       }
-      testID="surface-inner-layer"
+      testID="surface"
     >
       <View
-        accessibilityLiveRegion="polite"
-        collapsable={false}
-        pointerEvents="box-none"
         style={
           Object {
-            "backgroundColor": "rgba(49, 48, 51, 1)",
-            "borderRadius": 4,
-            "flex": undefined,
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "margin": 8,
-            "minHeight": 48,
-            "opacity": 1,
-            "transform": Array [
-              Object {
-                "scale": 1,
-              },
-            ],
+            "flex": 1,
+            "marginHorizontal": 16,
+            "marginVertical": 14,
           }
         }
-        testID="surface"
       >
-        <View
-          style={
-            Object {
-              "flex": 1,
-              "marginHorizontal": 16,
-              "marginVertical": 14,
+        <View>
+          <View
+            style={
+              Object {
+                "alignItems": "center",
+                "flexDirection": "row",
+              }
             }
-          }
-        >
-          <View>
+          >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
+                  "backgroundColor": "#ef9a9a",
+                  "padding": 15,
                 }
               }
-            >
-              <View
-                style={
-                  Object {
-                    "backgroundColor": "#ef9a9a",
-                    "padding": 15,
-                  }
-                }
-              />
-              <Text
-                style={
-                  Object {
-                    "color": "#ffffff",
-                    "flexShrink": 1,
-                    "flexWrap": "wrap",
-                    "marginLeft": 10,
-                  }
+            />
+            <Text
+              style={
+                Object {
+                  "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>
@@ -255,10 +243,15 @@ exports[`renders snackbar with action button 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "rgba(49, 48, 51, 1)",
+        "borderRadius": 4,
         "bottom": undefined,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": undefined,
+        "margin": 8,
+        "opacity": 1,
         "position": undefined,
         "right": undefined,
         "shadowColor": "#000",
@@ -270,15 +263,28 @@ exports[`renders snackbar with action button 1`] = `
         "shadowRadius": 6,
         "start": undefined,
         "top": undefined,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": undefined,
       }
     }
     testID="surface-outer-layer"
   >
     <View
+      accessibilityLiveRegion="polite"
       collapsable={false}
+      pointerEvents="box-none"
       style={
         Object {
+          "backgroundColor": "rgba(49, 48, 51, 1)",
+          "borderRadius": 4,
           "flex": undefined,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "minHeight": 48,
           "shadowColor": "#000",
           "shadowOffset": Object {
             "height": 1,
@@ -288,89 +294,98 @@ exports[`renders snackbar with action button 1`] = `
           "shadowRadius": 2,
         }
       }
-      testID="surface-inner-layer"
+      testID="surface"
     >
-      <View
-        accessibilityLiveRegion="polite"
-        collapsable={false}
-        pointerEvents="box-none"
+      <Text
         style={
-          Object {
-            "backgroundColor": "rgba(49, 48, 51, 1)",
-            "borderRadius": 4,
-            "flex": undefined,
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "margin": 8,
-            "minHeight": 48,
-            "opacity": 1,
-            "transform": Array [
-              Object {
-                "scale": 1,
-              },
-            ],
-          }
-        }
-        testID="surface"
-      >
-        <Text
-          style={
+          Array [
+            Object {
+              "fontFamily": "System",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0.25,
+              "lineHeight": 20,
+            },
+            Object {
+              "textAlign": "left",
+            },
+            Object {
+              "color": "rgba(28, 27, 31, 1)",
+              "writingDirection": "ltr",
+            },
             Array [
               Object {
-                "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "flex": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 14,
               },
               Object {
-                "textAlign": "left",
+                "color": "rgba(244, 239, 244, 1)",
               },
-              Object {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
-              },
-              Array [
-                Object {
-                  "flex": 1,
-                  "marginHorizontal": 16,
-                  "marginVertical": 14,
-                },
-                Object {
-                  "color": "rgba(244, 239, 244, 1)",
-                },
-              ],
-            ]
-          }
-        >
-          Snackbar content
-        </Text>
+            ],
+          ]
+        }
+      >
+        Snackbar content
+      </Text>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+              "minHeight": 48,
+            },
+            Object {
+              "marginLeft": -12,
+            },
+          ]
+        }
+      >
         <View
+          collapsable={false}
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "flex-end",
-                "minHeight": 48,
-              },
-              Object {
-                "marginLeft": -12,
+            Object {
+              "alignSelf": undefined,
+              "backgroundColor": "transparent",
+              "borderRadius": 20,
+              "bottom": undefined,
+              "end": undefined,
+              "flex": undefined,
+              "height": undefined,
+              "left": undefined,
+              "marginLeft": 4,
+              "marginRight": 8,
+              "opacity": undefined,
+              "position": undefined,
+              "right": undefined,
+              "shadowColor": "#000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
               },
-            ]
+              "shadowOpacity": 0,
+              "shadowRadius": 0,
+              "start": undefined,
+              "top": undefined,
+              "transform": undefined,
+              "width": undefined,
+            }
           }
+          testID="button-container-outer-layer"
         >
           <View
             collapsable={false}
             style={
               Object {
-                "alignSelf": undefined,
-                "bottom": undefined,
-                "end": undefined,
+                "backgroundColor": "transparent",
+                "borderColor": "transparent",
+                "borderRadius": 20,
+                "borderStyle": "solid",
+                "borderWidth": 0,
                 "flex": undefined,
-                "left": undefined,
-                "position": undefined,
-                "right": undefined,
+                "minWidth": 64,
                 "shadowColor": "#000",
                 "shadowOffset": Object {
                   "height": 0,
@@ -378,138 +393,101 @@ exports[`renders snackbar with action button 1`] = `
                 },
                 "shadowOpacity": 0,
                 "shadowRadius": 0,
-                "start": undefined,
-                "top": undefined,
               }
             }
-            testID="button-container-outer-layer"
+            testID="button-container"
           >
             <View
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "disabled": 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]}
               style={
-                Object {
-                  "flex": undefined,
-                  "shadowColor": "#000",
-                  "shadowOffset": Object {
-                    "height": 0,
-                    "width": 0,
+                Array [
+                  Object {
+                    "overflow": "hidden",
                   },
-                  "shadowOpacity": 0,
-                  "shadowRadius": 0,
-                }
+                  false,
+                  Object {
+                    "borderRadius": 20,
+                  },
+                ]
               }
-              testID="button-container-inner-layer"
+              testID="button"
             >
               <View
-                collapsable={false}
                 style={
-                  Object {
-                    "backgroundColor": "transparent",
-                    "borderColor": "transparent",
-                    "borderRadius": 20,
-                    "borderStyle": "solid",
-                    "borderWidth": 0,
-                    "flex": undefined,
-                    "marginLeft": 4,
-                    "marginRight": 8,
-                    "minWidth": 64,
-                  }
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                    },
+                    undefined,
+                  ]
                 }
-                testID="button-container"
               >
-                <View
-                  accessibilityRole="button"
-                  accessibilityState={
-                    Object {
-                      "disabled": 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]}
+                <Text
+                  numberOfLines={1}
+                  selectable={false}
                   style={
                     Array [
                       Object {
-                        "overflow": "hidden",
+                        "fontFamily": "System",
+                        "fontSize": 14,
+                        "fontWeight": "500",
+                        "letterSpacing": 0.1,
+                        "lineHeight": 20,
                       },
-                      false,
                       Object {
-                        "borderRadius": 20,
+                        "textAlign": "left",
+                      },
+                      Object {
+                        "color": "rgba(28, 27, 31, 1)",
+                        "writingDirection": "ltr",
                       },
-                    ]
-                  }
-                  testID="button"
-                >
-                  <View
-                    style={
                       Array [
                         Object {
-                          "alignItems": "center",
-                          "flexDirection": "row",
-                          "justifyContent": "center",
+                          "marginHorizontal": 16,
+                          "marginVertical": 9,
+                          "textAlign": "center",
+                        },
+                        false,
+                        Object {
+                          "marginHorizontal": 12,
+                        },
+                        false,
+                        false,
+                        Object {
+                          "color": "rgba(208, 188, 255, 1)",
+                          "fontFamily": "System",
+                          "fontSize": 14,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.1,
+                          "lineHeight": 20,
                         },
                         undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      numberOfLines={1}
-                      selectable={false}
-                      style={
-                        Array [
-                          Object {
-                            "fontFamily": "System",
-                            "fontSize": 14,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.1,
-                            "lineHeight": 20,
-                          },
-                          Object {
-                            "textAlign": "left",
-                          },
-                          Object {
-                            "color": "rgba(28, 27, 31, 1)",
-                            "writingDirection": "ltr",
-                          },
-                          Array [
-                            Object {
-                              "marginHorizontal": 16,
-                              "marginVertical": 9,
-                              "textAlign": "center",
-                            },
-                            false,
-                            Object {
-                              "marginHorizontal": 12,
-                            },
-                            false,
-                            false,
-                            Object {
-                              "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>
+                      ],
+                    ]
+                  }
+                  testID="button-text"
+                >
+                  Undo
+                </Text>
               </View>
             </View>
           </View>
@@ -543,10 +521,15 @@ exports[`renders snackbar with content 1`] = `
     style={
       Object {
         "alignSelf": undefined,
+        "backgroundColor": "rgba(49, 48, 51, 1)",
+        "borderRadius": 4,
         "bottom": undefined,
         "end": undefined,
         "flex": undefined,
+        "height": undefined,
         "left": undefined,
+        "margin": 8,
+        "opacity": 1,
         "position": undefined,
         "right": undefined,
         "shadowColor": "#000",
@@ -558,15 +541,28 @@ exports[`renders snackbar with content 1`] = `
         "shadowRadius": 6,
         "start": undefined,
         "top": undefined,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": undefined,
       }
     }
     testID="surface-outer-layer"
   >
     <View
+      accessibilityLiveRegion="polite"
       collapsable={false}
+      pointerEvents="box-none"
       style={
         Object {
+          "backgroundColor": "rgba(49, 48, 51, 1)",
+          "borderRadius": 4,
           "flex": undefined,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "minHeight": 48,
           "shadowColor": "#000",
           "shadowOffset": Object {
             "height": 1,
@@ -576,64 +572,40 @@ exports[`renders snackbar with content 1`] = `
           "shadowRadius": 2,
         }
       }
-      testID="surface-inner-layer"
+      testID="surface"
     >
-      <View
-        accessibilityLiveRegion="polite"
-        collapsable={false}
-        pointerEvents="box-none"
+      <Text
         style={
-          Object {
-            "backgroundColor": "rgba(49, 48, 51, 1)",
-            "borderRadius": 4,
-            "flex": undefined,
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "margin": 8,
-            "minHeight": 48,
-            "opacity": 1,
-            "transform": Array [
-              Object {
-                "scale": 1,
-              },
-            ],
-          }
-        }
-        testID="surface"
-      >
-        <Text
-          style={
+          Array [
+            Object {
+              "fontFamily": "System",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0.25,
+              "lineHeight": 20,
+            },
+            Object {
+              "textAlign": "left",
+            },
+            Object {
+              "color": "rgba(28, 27, 31, 1)",
+              "writingDirection": "ltr",
+            },
             Array [
               Object {
-                "fontFamily": "System",
-                "fontSize": 14,
-                "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "flex": 1,
+                "marginHorizontal": 16,
+                "marginVertical": 14,
               },
               Object {
-                "textAlign": "left",
+                "color": "rgba(244, 239, 244, 1)",
               },
-              Object {
-                "color": "rgba(28, 27, 31, 1)",
-                "writingDirection": "ltr",
-              },
-              Array [
-                Object {
-                  "flex": 1,
-                  "marginHorizontal": 16,
-                  "marginVertical": 14,
-                },
-                Object {
-                  "color": "rgba(244, 239, 244, 1)",
-                },
-              ],
-            ]
-          }
-        >
-          Snackbar content
-        </Text>
-      </View>
+            ],
+          ]
+        }
+      >
+        Snackbar content
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index 91a4975518..d397e7558e 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1268,10 +1268,15 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 0,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -1283,6 +1288,8 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="right-icon-adornment-container-outer-layer"
@@ -1291,7 +1298,13 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -1301,113 +1314,94 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "shadowRadius": 0,
           }
         }
-        testID="right-icon-adornment-container-inner-layer"
+        testID="right-icon-adornment-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 0,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="right-icon-adornment-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="right-icon-adornment"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="right-icon-adornment"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰋑
-            </Text>
-          </View>
+            󰋑
+          </Text>
         </View>
       </View>
     </View>
@@ -1630,10 +1624,15 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
       style={
         Object {
           "alignSelf": undefined,
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
           "bottom": undefined,
           "end": undefined,
           "flex": undefined,
+          "height": 40,
           "left": undefined,
+          "margin": 0,
+          "opacity": undefined,
           "position": undefined,
           "right": undefined,
           "shadowColor": "#000",
@@ -1645,6 +1644,8 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
           "shadowRadius": 0,
           "start": undefined,
           "top": undefined,
+          "transform": undefined,
+          "width": 40,
         }
       }
       testID="left-icon-adornment-container-outer-layer"
@@ -1653,7 +1654,13 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
         collapsable={false}
         style={
           Object {
-            "flex": undefined,
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 20,
+            "borderWidth": 0,
+            "elevation": 0,
+            "flex": 1,
+            "overflow": "hidden",
             "shadowColor": "#000",
             "shadowOffset": Object {
               "height": 0,
@@ -1663,113 +1670,94 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "shadowRadius": 0,
           }
         }
-        testID="left-icon-adornment-container-inner-layer"
+        testID="left-icon-adornment-container"
       >
         <View
-          collapsable={false}
-          style={
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityState={
             Object {
-              "backgroundColor": undefined,
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 20,
-              "borderWidth": 0,
-              "elevation": 0,
-              "flex": undefined,
-              "height": 40,
-              "margin": 0,
-              "overflow": "hidden",
-              "width": 40,
+              "disabled": false,
             }
           }
-          testID="left-icon-adornment-container"
-        >
-          <View
-            accessibilityComponentType="button"
-            accessibilityRole="button"
-            accessibilityState={
-              Object {
-                "disabled": false,
-              }
+          accessibilityTraits="button"
+          accessible={true}
+          centered={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 6,
+              "left": 6,
+              "right": 6,
+              "top": 6,
             }
-            accessibilityTraits="button"
-            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]}
+          style={
+            Array [
               Object {
-                "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]}
+                "overflow": "hidden",
+              },
+              false,
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "borderRadius": 20,
+                },
+              ],
+            ]
+          }
+          testID="left-icon-adornment"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
-                  "overflow": "hidden",
+                  "color": "rgba(73, 69, 79, 1)",
+                  "fontSize": 24,
                 },
-                false,
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "flexGrow": 1,
-                    "justifyContent": "center",
+                    "lineHeight": 24,
+                    "transform": Array [
+                      Object {
+                        "scaleX": 1,
+                      },
+                    ],
                   },
                   Object {
-                    "borderRadius": 20,
+                    "backgroundColor": "transparent",
                   },
                 ],
+                Object {
+                  "fontFamily": "Material Design Icons",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
               ]
             }
-            testID="left-icon-adornment"
           >
-            <Text
-              accessibilityElementsHidden={true}
-              allowFontScaling={false}
-              importantForAccessibility="no-hide-descendants"
-              pointerEvents="none"
-              selectable={false}
-              style={
-                Array [
-                  Object {
-                    "color": "rgba(73, 69, 79, 1)",
-                    "fontSize": 24,
-                  },
-                  Array [
-                    Object {
-                      "lineHeight": 24,
-                      "transform": Array [
-                        Object {
-                          "scaleX": 1,
-                        },
-                      ],
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                  ],
-                  Object {
-                    "fontFamily": "Material Design Icons",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              󰋑
-            </Text>
-          </View>
+            󰋑
+          </Text>
         </View>
       </View>
     </View>
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index 5f3768a9bb..5ff176c5c8 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -6,10 +6,15 @@ exports[`renders disabled toggle button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(29, 25, 43, 0.12)",
+      "borderRadius": 4,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 42,
       "left": undefined,
+      "margin": 0,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -21,6 +26,8 @@ exports[`renders disabled toggle button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 42,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -29,7 +36,13 @@ exports[`renders disabled toggle button 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "rgba(29, 25, 43, 0.12)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 4,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -39,117 +52,98 @@ exports[`renders disabled toggle button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(29, 25, 43, 0.12)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 4,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 42,
-          "margin": 0,
-          "overflow": "hidden",
-          "width": 42,
+          "disabled": true,
+          "selected": true,
         }
       }
-      testID="icon-button-container"
-    >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-            "selected": true,
-          }
+      accessibilityTraits={
+        Array [
+          "button",
+          "disabled",
+        ]
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
-        accessibilityTraits={
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          false,
+          false,
           Array [
-            "button",
-            "disabled",
-          ]
-        }
-        accessible={true}
-        centered={true}
-        collapsable={false}
-        focusable={true}
-        hitSlop={
-          Object {
-            "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]}
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 4,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
           Array [
-            false,
-            false,
+            Object {
+              "color": "rgba(28, 27, 31, 0.38)",
+              "fontSize": 24,
+            },
             Array [
               Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
               },
               Object {
-                "borderRadius": 4,
+                "backgroundColor": "transparent",
               },
             ],
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
           ]
         }
-        testID="icon-button"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(28, 27, 31, 0.38)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          󰋑
-        </Text>
-      </View>
+        󰋑
+      </Text>
     </View>
   </View>
 </View>
@@ -161,10 +155,15 @@ exports[`renders toggle button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "rgba(29, 25, 43, 0.12)",
+      "borderRadius": 4,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 42,
       "left": undefined,
+      "margin": 0,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -176,6 +175,8 @@ exports[`renders toggle button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 42,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -184,7 +185,13 @@ exports[`renders toggle button 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "rgba(29, 25, 43, 0.12)",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 4,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -194,112 +201,93 @@ exports[`renders toggle button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "disabled": false,
+          "selected": true,
+        }
+      }
+      accessibilityTraits="button"
+      accessible={true}
+      centered={true}
       collapsable={false}
-      style={
+      focusable={true}
+      hitSlop={
         Object {
-          "backgroundColor": "rgba(29, 25, 43, 0.12)",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 4,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 42,
-          "margin": 0,
-          "overflow": "hidden",
-          "width": 42,
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
       }
-      testID="icon-button-container"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          false,
+          false,
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 4,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
     >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": false,
-            "selected": true,
-          }
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        centered={true}
-        collapsable={false}
-        focusable={true}
-        hitSlop={
-          Object {
-            "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]}
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
           Array [
-            false,
-            false,
+            Object {
+              "color": "rgba(73, 69, 79, 1)",
+              "fontSize": 24,
+            },
             Array [
               Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
               },
               Object {
-                "borderRadius": 4,
+                "backgroundColor": "transparent",
               },
             ],
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
           ]
         }
-        testID="icon-button"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(73, 69, 79, 1)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          󰋑
-        </Text>
-      </View>
+        󰋑
+      </Text>
     </View>
   </View>
 </View>
@@ -311,10 +299,15 @@ exports[`renders unchecked toggle button 1`] = `
   style={
     Object {
       "alignSelf": undefined,
+      "backgroundColor": "transparent",
+      "borderRadius": 4,
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 42,
       "left": undefined,
+      "margin": 0,
+      "opacity": undefined,
       "position": undefined,
       "right": undefined,
       "shadowColor": "#000",
@@ -326,6 +319,8 @@ exports[`renders unchecked toggle button 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "transform": undefined,
+      "width": 42,
     }
   }
   testID="icon-button-container-outer-layer"
@@ -334,7 +329,13 @@ exports[`renders unchecked toggle button 1`] = `
     collapsable={false}
     style={
       Object {
-        "flex": undefined,
+        "backgroundColor": "transparent",
+        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderRadius": 4,
+        "borderWidth": 0,
+        "elevation": 0,
+        "flex": 1,
+        "overflow": "hidden",
         "shadowColor": "#000",
         "shadowOffset": Object {
           "height": 0,
@@ -344,117 +345,98 @@ exports[`renders unchecked toggle button 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="icon-button-container-inner-layer"
+    testID="icon-button-container"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityComponentType="button"
+      accessibilityRole="button"
+      accessibilityState={
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "rgba(121, 116, 126, 1)",
-          "borderRadius": 4,
-          "borderWidth": 0,
-          "elevation": 0,
-          "flex": undefined,
-          "height": 42,
-          "margin": 0,
-          "overflow": "hidden",
-          "width": 42,
+          "disabled": true,
+          "selected": false,
         }
       }
-      testID="icon-button-container"
-    >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": true,
-            "selected": false,
-          }
+      accessibilityTraits={
+        Array [
+          "button",
+          "disabled",
+        ]
+      }
+      accessible={true}
+      centered={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
         }
-        accessibilityTraits={
+      }
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          false,
+          false,
           Array [
-            "button",
-            "disabled",
-          ]
-        }
-        accessible={true}
-        centered={true}
-        collapsable={false}
-        focusable={true}
-        hitSlop={
-          Object {
-            "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]}
+            Object {
+              "alignItems": "center",
+              "flexGrow": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "borderRadius": 4,
+            },
+          ],
+        ]
+      }
+      testID="icon-button"
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
+        selectable={false}
         style={
           Array [
-            false,
-            false,
+            Object {
+              "color": "rgba(28, 27, 31, 0.38)",
+              "fontSize": 24,
+            },
             Array [
               Object {
-                "alignItems": "center",
-                "flexGrow": 1,
-                "justifyContent": "center",
+                "lineHeight": 24,
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
               },
               Object {
-                "borderRadius": 4,
+                "backgroundColor": "transparent",
               },
             ],
+            Object {
+              "fontFamily": "Material Design Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
           ]
         }
-        testID="icon-button"
       >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          selectable={false}
-          style={
-            Array [
-              Object {
-                "color": "rgba(28, 27, 31, 0.38)",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "lineHeight": 24,
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          󰋑
-        </Text>
-      </View>
+        󰋑
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/utils/__tests__/splitStyles.test.ts b/src/utils/__tests__/splitStyles.test.ts
new file mode 100644
index 0000000000..7019159325
--- /dev/null
+++ b/src/utils/__tests__/splitStyles.test.ts
@@ -0,0 +1,84 @@
+import type { ViewStyle } from 'react-native';
+
+import { splitStyles } from '../splitStyles';
+
+describe('splitStyles', () => {
+  const styles: Readonly<ViewStyle> = Object.freeze({
+    backgroundColor: 'red',
+    marginTop: 1,
+    marginBottom: 2,
+    marginLeft: 3,
+    padding: 4,
+    borderTopLeftRadius: 5,
+    borderTopRightRadius: 6,
+    right: 4,
+  });
+
+  it('splits margins, paddings, and border radiuses correctly', () => {
+    const marginPredicate = (style: string) => style.startsWith('margin');
+    const paddingPredicate = (style: string) => style.startsWith('padding');
+    const borderRadiusPredicate = (style: string) =>
+      style.startsWith('border') && style.endsWith('Radius');
+    const [filteredStyles, marginStyles, paddingStyles, borderRadiusStyles] =
+      splitStyles(
+        styles,
+        marginPredicate,
+        paddingPredicate,
+        borderRadiusPredicate
+      );
+
+    expect(keysLength(filteredStyles)).toBeGreaterThan(0);
+    expect(keysLength(filteredStyles)).toBeLessThan(keysLength(styles));
+    for (const style in filteredStyles) {
+      expect(marginPredicate(style)).toBeFalsy();
+      expect(paddingPredicate(style)).toBeFalsy();
+      expect(borderRadiusPredicate(style)).toBeFalsy();
+    }
+
+    expect(keysLength(marginStyles)).toBeGreaterThan(0);
+    for (const style in marginStyles) {
+      expect(marginPredicate(style)).toBeTruthy();
+    }
+
+    expect(keysLength(paddingStyles)).toBeGreaterThan(0);
+    for (const style in paddingStyles) {
+      expect(paddingPredicate(style)).toBeTruthy();
+    }
+
+    expect(keysLength(borderRadiusStyles)).toBeGreaterThan(0);
+    for (const style in borderRadiusStyles) {
+      expect(borderRadiusPredicate(style)).toBeTruthy();
+    }
+  });
+
+  it('filtered styles is an empty object if all styles matched some predicate', () => {
+    const styles = {
+      margin: 5,
+      padding: 6,
+    };
+    const [filteredStyles] = splitStyles(
+      styles,
+      (style) => style.startsWith('margin'),
+      (style) => style.startsWith('padding')
+    );
+
+    expect(keysLength(filteredStyles)).toBe(0);
+  });
+
+  it('processes predicates in order', () => {
+    const [, marginStyles, marginStyles2, marginStyles3] = splitStyles(
+      styles,
+      (style) => style.startsWith('margin'),
+      (style) => style.startsWith('margin'),
+      (style) => style.startsWith('margin')
+    );
+
+    expect(keysLength(marginStyles)).toBeGreaterThan(0);
+    expect(keysLength(marginStyles2)).toBe(0);
+    expect(keysLength(marginStyles3)).toBe(0);
+  });
+});
+
+function keysLength(object: object): number {
+  return Object.keys(object).length;
+}
diff --git a/src/utils/splitStyles.ts b/src/utils/splitStyles.ts
new file mode 100644
index 0000000000..23d4573ce0
--- /dev/null
+++ b/src/utils/splitStyles.ts
@@ -0,0 +1,64 @@
+import type { ViewStyle } from 'react-native';
+
+type FiltersArray = readonly ((style: string) => boolean)[];
+
+type MappedTuple<Tuple extends FiltersArray> = {
+  [Index in keyof Tuple]: ViewStyle;
+} & { length: Tuple['length'] };
+
+type Style = ViewStyle[keyof ViewStyle];
+type Entry = [string, Style];
+
+/**
+ * Utility function to extract styles in separate objects
+ *
+ * @param styles The style object you want to filter
+ * @param filters The filters by which you want to split the styles
+ * @returns An array of filtered style objects:
+ * - The first style object contains the properties that didn't match any filter
+ * - After that there will be a style object for each filter you passed in the same order as the matching filters
+ * - A style property will exist in a single style object, the first filter it matched
+ */
+export function splitStyles<Tuple extends FiltersArray>(
+  styles: ViewStyle,
+  ...filters: Tuple
+) {
+  if (process.env.NODE_ENV !== 'production' && filters.length === 0) {
+    console.error('No filters were passed when calling splitStyles');
+  }
+
+  // `Object.entries` will be used to iterate over the styles and `Object.fromEntries` will be called before returning
+  // Entries which match the given filters will be temporarily stored in `newStyles`
+  const newStyles = filters.map(returnEmptyArray<Entry>);
+
+  // Entries which match no filter
+  const rest: Entry[] = [];
+
+  // Iterate every style property
+  outer: for (const item of Object.entries(styles) as Entry[]) {
+    // Check each filter
+    for (let i = 0; i < filters.length; i++) {
+      // Check if filter matches
+      if (filters[i](item[0])) {
+        newStyles[i].push(item); // Push to temporary filtered entries array
+        continue outer; // Skip to checking next style property
+      }
+    }
+
+    // Adds to rest styles if not filtered
+    rest.push(item);
+  }
+
+  // Put unmatched styles in the beginning
+  newStyles.unshift(rest);
+
+  // Convert arrays of entries into objects
+  return newStyles.map((styles) => Object.fromEntries(styles)) as unknown as [
+    ViewStyle,
+    ...MappedTuple<Tuple>
+  ];
+}
+
+function returnEmptyArray<SomeArray>() {
+  return [] as SomeArray[];
+}