diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx
index d44bf45e10..9890af48ae 100644
--- a/example/src/Examples/BadgeExample.tsx
+++ b/example/src/Examples/BadgeExample.tsx
@@ -7,11 +7,14 @@ import {
   Paragraph,
   Switch,
   MD2Colors,
+  useTheme,
+  MD3Colors,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const BadgeExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
+  const { isV3 } = useTheme();
 
   return (
     <ScreenWrapper>
@@ -34,7 +37,14 @@ const BadgeExample = () => {
             <IconButton icon="inbox" size={36} style={styles.button} />
             <Badge
               visible={visible}
-              style={[styles.badge, { backgroundColor: MD2Colors.blue500 }]}
+              style={[
+                styles.badge,
+                {
+                  backgroundColor: isV3
+                    ? MD3Colors.primary80
+                    : MD2Colors.blue500,
+                },
+              ]}
             >
               999+
             </Badge>
@@ -45,11 +55,11 @@ const BadgeExample = () => {
         <View style={styles.row}>
           <View style={styles.item}>
             <IconButton icon="book-open" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge} size={8} />
+            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
           </View>
           <View style={styles.item}>
             <IconButton icon="receipt" size={36} style={styles.button} />
-            <Badge visible={visible} style={styles.badge} size={8} />
+            <Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
           </View>
         </View>
       </List.Section>
diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx
index 18d3d7b650..586e00446f 100644
--- a/example/src/Examples/BottomNavigationExample.tsx
+++ b/example/src/Examples/BottomNavigationExample.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { View, Image, Dimensions, StyleSheet, Platform } from 'react-native';
-import { BottomNavigation } from 'react-native-paper';
+import { BottomNavigation, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type RoutesState = Array<{
   key: string;
   title: string;
-  icon: string;
+  focusedIcon: string;
+  unfocusedIcon?: string;
   color?: string;
   badge?: boolean;
   getAccessibilityLabel?: string;
@@ -33,28 +34,42 @@ const PhotoGallery = ({ route }: Route) => {
 };
 
 const BottomNavigationExample = () => {
+  const { isV3 } = useTheme();
   const insets = useSafeAreaInsets();
   const [index, setIndex] = React.useState(0);
   const [routes] = React.useState<RoutesState>([
-    { key: 'album', title: 'Album', icon: 'image-album', color: '#6200ee' },
+    {
+      key: 'album',
+      title: 'Album',
+      focusedIcon: 'image-album',
+      ...(!isV3 && { color: '#6200ee' }),
+    },
     {
       key: 'library',
       title: 'Library',
-      icon: 'inbox',
-      color: '#2962ff',
+      focusedIcon: 'inbox',
       badge: true,
+      ...(isV3
+        ? { unfocusedIcon: 'inbox-outline' }
+        : {
+            color: '#2962ff',
+          }),
     },
     {
       key: 'favorites',
       title: 'Favorites',
-      icon: 'heart',
-      color: '#00796b',
+      focusedIcon: 'heart',
+      ...(isV3
+        ? { unfocusedIcon: 'heart-outline' }
+        : {
+            color: '#00796b',
+          }),
     },
     {
       key: 'purchased',
       title: 'Purchased',
-      icon: 'shopping-music',
-      color: '#c51162',
+      focusedIcon: 'shopping-music',
+      ...(!isV3 && { color: '#c51162' }),
     },
   ]);
 
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 1f12be80e9..2f60ced056 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -93,10 +93,14 @@ const Badge = ({
     ...restStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
 
-  const textColor = getContrastingColor(backgroundColor || white, white, black);
+  const textColor = theme.isV3
+    ? theme.colors.onError
+    : getContrastingColor(backgroundColor, white, black);
 
   const borderRadius = size / 2;
 
+  const paddingHorizontal = theme.isV3 ? 3 : 4;
+
   return (
     <Animated.Text
       numberOfLines={1}
@@ -111,6 +115,7 @@ const Badge = ({
           height: size,
           minWidth: size,
           borderRadius,
+          paddingHorizontal,
         },
         styles.container,
         restStyle,
@@ -129,7 +134,6 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
     textAlign: 'center',
     textAlignVertical: 'center',
-    paddingHorizontal: 4,
     overflow: 'hidden',
   },
 });
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index 3dc6e77b47..343fbe93ce 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -29,7 +29,8 @@ import type { Theme } from '../../types';
 type Route = {
   key: string;
   title?: string;
-  icon?: IconSource;
+  focusedIcon: IconSource;
+  unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
   color?: string;
   accessibilityLabel?: string;
@@ -59,7 +60,7 @@ type Props = {
   /**
    * Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.
    *
-   * By default, this is `true` when you have more than 3 tabs.
+   * By default, this is `false` with theme version 3 and `true` when you have more than 3 tabs.
    * Pass `shifting={false}` to explicitly disable this animation, or `shifting={true}` to always use this animation.
    */
   shifting?: boolean;
@@ -67,6 +68,11 @@ type Props = {
    * Whether to show labels in tabs. When `false`, only icons will be displayed.
    */
   labeled?: boolean;
+  /**
+   * @supported Available in v3.x
+   * Whether tabs should be spread across the entire width.
+   */
+  compact?: boolean;
   /**
    * State for the bottom navigation. The state should contain the following properties:
    *
@@ -77,8 +83,9 @@ type Props = {
    *
    * - `key`: a unique key to identify the route (required)
    * - `title`: title of the route to use as the tab label
-   * - `icon`: icon to use as the tab icon, can be a string, an image source or a react component
-   * - `color`: color to use as background color for shifting bottom navigation
+   * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v3.x
+   * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v3.x with theme version 3
+   * - `color`: color to use as background color for shifting bottom navigation @deprecated Deprecated in v3.x
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
    * - `accessibilityLabel`: accessibility label for the tab button
    * - `testID`: test id for the tab button
@@ -89,10 +96,10 @@ type Props = {
    * {
    *   index: 1,
    *   routes: [
-   *     { key: 'music', title: 'Music', icon: 'queue-music', color: '#3F51B5' },
-   *     { key: 'albums', title: 'Albums', icon: 'album', color: '#009688' },
-   *     { key: 'recents', title: 'Recents', icon: 'history', color: '#795548' },
-   *     { key: 'purchased', title: 'Purchased', icon: 'shopping-cart', color: '#607D8B' },
+   *     { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
+   *     { key: 'albums', title: 'Albums', focusedIcon: 'album' },
+   *     { key: 'recents', title: 'Recents', focusedIcon: 'history' },
+   *     { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
    *   ]
    * }
    * ```
@@ -240,6 +247,7 @@ const MAX_TAB_WIDTH = 168;
 const BAR_HEIGHT = 56;
 const BOTTOM_INSET = getBottomSpace();
 const FAR_FAR_AWAY = Platform.OS === 'web' ? 0 : 9999;
+const OUTLINE_WIDTH = 64;
 
 const Touchable = ({
   route: _0,
@@ -298,9 +306,10 @@ const SceneComponent = React.memo(({ component, ...rest }: any) =>
  * const MyComponent = () => {
  *   const [index, setIndex] = React.useState(0);
  *   const [routes] = React.useState([
- *     { key: 'music', title: 'Music', icon: 'queue-music' },
- *     { key: 'albums', title: 'Albums', icon: 'album' },
- *     { key: 'recents', title: 'Recents', icon: 'history' },
+ *     { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
+ *     { key: 'albums', title: 'Albums', focusedIcon: 'album' },
+ *     { key: 'recents', title: 'Recents', focusedIcon: 'history' },
+ *     { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
  *   ]);
  *
  *   const renderScene = BottomNavigation.SceneMap({
@@ -343,8 +352,9 @@ const BottomNavigation = ({
   sceneAnimationEnabled = false,
   onTabPress,
   onIndexChange,
-  shifting = navigationState.routes.length > 3,
+  shifting = theme.isV3 ? false : navigationState.routes.length > 3,
   safeAreaInsets,
+  compact = !theme.isV3,
 }: Props) => {
   const { scale } = theme.animation;
 
@@ -435,13 +445,13 @@ const BottomNavigation = ({
       Animated.parallel([
         Animated.timing(rippleAnim, {
           toValue: 1,
-          duration: shifting ? 400 * scale : 0,
+          duration: theme.isV3 || shifting ? 400 * scale : 0,
           useNativeDriver: true,
         }),
         ...navigationState.routes.map((_, i) =>
           Animated.timing(tabsAnims[i], {
             toValue: i === index ? 1 : 0,
-            duration: shifting ? 150 * scale : 0,
+            duration: theme.isV3 || shifting ? 150 * scale : 0,
             useNativeDriver: true,
           })
         ),
@@ -474,6 +484,7 @@ const BottomNavigation = ({
       rippleAnim,
       scale,
       tabsAnims,
+      theme,
     ]
   );
 
@@ -537,7 +548,7 @@ const BottomNavigation = ({
   );
 
   const { routes } = navigationState;
-  const { colors, dark: isDarkTheme, mode } = theme;
+  const { colors, dark: isDarkTheme, mode, isV3 } = theme;
 
   const { backgroundColor: customBackground, elevation = 4 }: ViewStyle =
     StyleSheet.flatten(barStyle) || {};
@@ -548,7 +559,9 @@ const BottomNavigation = ({
     ? overlay(elevation, colors?.surface)
     : colors?.primary;
 
-  const backgroundColor = shifting
+  const backgroundColor = isV3
+    ? theme.colors.surface
+    : shifting
     ? indexAnim.interpolate({
         inputRange: routes.map((_, i) => i),
         // FIXME: does outputRange support ColorValue or just strings?
@@ -565,11 +578,19 @@ const BottomNavigation = ({
       : true;
 
   const textColor = isDark ? white : black;
+
   const activeTintColor =
-    typeof activeColor !== 'undefined' ? activeColor : textColor;
+    typeof activeColor !== 'undefined'
+      ? activeColor
+      : isV3
+      ? theme.colors.onSecondaryContainer
+      : textColor;
+
   const inactiveTintColor =
     typeof inactiveColor !== 'undefined'
       ? inactiveColor
+      : isV3
+      ? theme.colors.onSurfaceVariant
       : color(textColor).alpha(0.5).rgb().string();
 
   const touchColor = color(activeColor || activeTintColor)
@@ -643,7 +664,7 @@ const BottomNavigation = ({
         })}
       </View>
       <Surface
-        {...(theme.isV3 && { elevation: 2 })}
+        {...(theme.isV3 && { elevation: 0 })}
         style={
           [
             !theme.isV3 && { elevation: 4 },
@@ -683,6 +704,8 @@ const BottomNavigation = ({
               {
                 marginBottom: insets.bottom,
                 marginHorizontal: Math.max(insets.left, insets.right),
+              },
+              compact && {
                 maxWidth: maxTabBarWidth,
               },
             ]}
@@ -754,14 +777,51 @@ const BottomNavigation = ({
                 outputRange: [1, 0],
               });
 
+              const v3ActiveOpacity = focused ? 1 : 0;
+              const v3InactiveOpacity = shifting
+                ? inactiveOpacity
+                : focused
+                ? 0
+                : 1;
+
+              // Scale horizontally the outline pill
+              const outlineScale = focused
+                ? active.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0.5, 1],
+                  })
+                : 0;
+
               const badge = getBadge({ route });
 
+              const activeLabelColor = !isV3
+                ? activeTintColor
+                : focused
+                ? theme.colors.onSurface
+                : theme.colors.onSurfaceVariant;
+
+              const inactiveLabelColor = !isV3
+                ? inactiveTintColor
+                : focused
+                ? theme.colors.onSurface
+                : theme.colors.onSurfaceVariant;
+
+              const badgeStyle = {
+                top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2,
+                right:
+                  (badge != null && typeof badge !== 'boolean'
+                    ? String(badge).length * -2
+                    : 0) - (!isV3 ? 2 : 0),
+              };
+
+              const isV3Shifting = isV3 && shifting && labeled;
+
               return renderTouchable({
                 key: route.key,
                 route,
                 borderless: true,
                 centered: true,
-                rippleColor: touchColor,
+                rippleColor: isV3 ? 'transparent' : touchColor,
                 onPress: () => handleTabPress(index),
                 testID: getTestID({ route }),
                 accessibilityLabel: getAccessibilityLabel({ route }),
@@ -772,17 +832,47 @@ const BottomNavigation = ({
                 accessibilityComponentType: 'button',
                 accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
                 accessibilityState: { selected: focused },
-                style: styles.item,
+                style: [styles.item, isV3 && styles.v3Item],
                 children: (
-                  <View pointerEvents="none">
+                  <View
+                    pointerEvents="none"
+                    style={
+                      isV3 &&
+                      (labeled
+                        ? styles.v3TouchableContainer
+                        : styles.v3NoLabelContainer)
+                    }
+                  >
                     <Animated.View
                       style={[
                         styles.iconContainer,
-                        { transform: [{ translateY }] },
+                        isV3 && styles.v3IconContainer,
+                        (!isV3 || isV3Shifting) && {
+                          transform: [{ translateY }],
+                        },
                       ]}
                     >
+                      {isV3 && (
+                        <Animated.View
+                          style={[
+                            styles.outline,
+                            {
+                              transform: [
+                                {
+                                  scaleX: outlineScale,
+                                },
+                              ],
+                              backgroundColor: theme.colors.secondaryContainer,
+                            },
+                          ]}
+                        />
+                      )}
                       <Animated.View
-                        style={[styles.iconWrapper, { opacity: activeOpacity }]}
+                        style={[
+                          styles.iconWrapper,
+                          isV3 && styles.v3IconWrapper,
+                          { opacity: isV3 ? v3ActiveOpacity : activeOpacity },
+                        ]}
                       >
                         {renderIcon ? (
                           renderIcon({
@@ -792,7 +882,7 @@ const BottomNavigation = ({
                           })
                         ) : (
                           <Icon
-                            source={route.icon as IconSource}
+                            source={route.focusedIcon as IconSource}
                             color={activeTintColor}
                             size={24}
                           />
@@ -801,7 +891,10 @@ const BottomNavigation = ({
                       <Animated.View
                         style={[
                           styles.iconWrapper,
-                          { opacity: inactiveOpacity },
+                          isV3 && styles.v3IconWrapper,
+                          {
+                            opacity: isV3 ? v3InactiveOpacity : inactiveOpacity,
+                          },
                         ]}
                       >
                         {renderIcon ? (
@@ -812,25 +905,19 @@ const BottomNavigation = ({
                           })
                         ) : (
                           <Icon
-                            source={route.icon as IconSource}
+                            source={
+                              theme.isV3 && route.unfocusedIcon !== undefined
+                                ? route.unfocusedIcon
+                                : (route.focusedIcon as IconSource)
+                            }
                             color={inactiveTintColor}
                             size={24}
                           />
                         )}
                       </Animated.View>
-                      <View
-                        style={[
-                          styles.badgeContainer,
-                          {
-                            right:
-                              (badge != null && typeof badge !== 'boolean'
-                                ? String(badge).length * -2
-                                : 0) - 2,
-                          },
-                        ]}
-                      >
+                      <View style={[styles.badgeContainer, badgeStyle]}>
                         {typeof badge === 'boolean' ? (
-                          <Badge visible={badge} size={8} />
+                          <Badge visible={badge} size={isV3 ? 6 : 8} />
                         ) : (
                           <Badge visible={badge != null} size={16}>
                             {badge}
@@ -842,24 +929,32 @@ const BottomNavigation = ({
                       <Animated.View
                         style={[
                           styles.labelContainer,
-                          { transform: [{ scale }] },
+                          !isV3 && { transform: [{ scale }] },
                         ]}
                       >
                         <Animated.View
                           style={[
                             styles.labelWrapper,
-                            { opacity: activeOpacity },
+                            (!isV3 || isV3Shifting) && {
+                              opacity: activeOpacity,
+                            },
                           ]}
                         >
                           {renderLabel ? (
                             renderLabel({
                               route,
                               focused: true,
-                              color: activeTintColor,
+                              color: activeLabelColor,
                             })
                           ) : (
                             <Text
-                              style={[styles.label, { color: activeTintColor }]}
+                              variant="labelMedium"
+                              style={[
+                                styles.label,
+                                {
+                                  color: activeLabelColor,
+                                },
+                              ]}
                             >
                               {getLabelText({ route })}
                             </Text>
@@ -876,14 +971,17 @@ const BottomNavigation = ({
                               renderLabel({
                                 route,
                                 focused: false,
-                                color: inactiveTintColor,
+                                color: inactiveLabelColor,
                               })
                             ) : (
                               <Text
+                                variant="labelMedium"
                                 selectable={false}
                                 style={[
                                   styles.label,
-                                  { color: inactiveTintColor },
+                                  {
+                                    color: inactiveLabelColor,
+                                  },
                                 ]}
                               >
                                 {getLabelText({ route })}
@@ -893,7 +991,7 @@ const BottomNavigation = ({
                         )}
                       </Animated.View>
                     ) : (
-                      <View style={styles.labelContainer} />
+                      !isV3 && <View style={styles.labelContainer} />
                     )}
                   </View>
                 ),
@@ -966,6 +1064,9 @@ const styles = StyleSheet.create({
     // The extra 4dp bottom padding is offset by label's height
     paddingVertical: 6,
   },
+  v3Item: {
+    paddingVertical: 0,
+  },
   ripple: {
     position: 'absolute',
   },
@@ -976,10 +1077,20 @@ const styles = StyleSheet.create({
     marginHorizontal: 12,
     alignSelf: 'center',
   },
+  v3IconContainer: {
+    height: 32,
+    width: 32,
+    marginBottom: 4,
+    marginTop: 0,
+    justifyContent: 'center',
+  },
   iconWrapper: {
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
   },
+  v3IconWrapper: {
+    top: 4,
+  },
   labelContainer: {
     height: 16,
     paddingBottom: 2,
@@ -1002,6 +1113,20 @@ const styles = StyleSheet.create({
   badgeContainer: {
     position: 'absolute',
     left: 0,
-    top: -2,
+  },
+  v3TouchableContainer: {
+    paddingTop: 12,
+    paddingBottom: 16,
+  },
+  v3NoLabelContainer: {
+    height: 80,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  outline: {
+    width: OUTLINE_WIDTH,
+    height: OUTLINE_WIDTH / 2,
+    borderRadius: OUTLINE_WIDTH / 4,
+    alignSelf: 'center',
   },
 });
diff --git a/src/components/__tests__/BottomNavigation.test.js b/src/components/__tests__/BottomNavigation.test.js
index b010e1e312..68244db93a 100644
--- a/src/components/__tests__/BottomNavigation.test.js
+++ b/src/components/__tests__/BottomNavigation.test.js
@@ -32,7 +32,7 @@ const createState = (index, length) => ({
   index,
   routes: Array.from({ length }, (_, i) => ({
     key: `key-${i}`,
-    icon: icons[i],
+    focusedIcon: icons[i],
     title: `Route: ${i}`,
   })),
 });
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 461d7041e8..1921edd026 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -104,6 +104,8 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 504,
             },
           ]
@@ -126,14 +128,18 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -223,10 +229,10 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -282,14 +288,18 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -379,10 +389,10 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -438,14 +448,18 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -535,10 +549,10 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -687,6 +701,8 @@ exports[`hides labels in shifting bottom navigation 1`] = `
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 504,
             },
           ]
@@ -729,14 +745,18 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -826,10 +846,10 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -885,14 +905,18 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -982,10 +1006,10 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -1041,14 +1065,18 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -1138,10 +1166,10 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -1290,6 +1318,8 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 504,
             },
           ]
@@ -1312,14 +1342,18 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -1352,9 +1386,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  magnify
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -1371,9 +1403,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  magnify
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -1381,10 +1411,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -1478,14 +1508,18 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -1518,9 +1552,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  camera
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -1537,9 +1569,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  camera
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -1547,10 +1577,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -1644,14 +1674,18 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -1684,9 +1718,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  inbox
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -1703,9 +1735,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  inbox
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -1713,10 +1743,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -1903,6 +1933,8 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 480,
             },
           ]
@@ -1945,14 +1977,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -1985,9 +2021,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  magnify
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2004,9 +2038,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  magnify
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2014,10 +2046,10 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -2095,14 +2127,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -2135,9 +2171,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  camera
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2154,9 +2188,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  camera
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2164,10 +2196,10 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -2245,14 +2277,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -2285,9 +2321,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  inbox
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2304,9 +2338,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  inbox
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2314,10 +2346,10 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -2395,14 +2427,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -2435,9 +2471,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  heart
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2454,9 +2488,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  heart
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2464,10 +2496,10 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -2545,14 +2577,18 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -2585,9 +2621,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="#ffffff"
-                >
-                  shopping-music
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2604,9 +2638,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               >
                 <icon
                   color="rgba(255, 255, 255, 0.5)"
-                >
-                  shopping-music
-                </icon>
+                />
               </View>
               <View
                 style={
@@ -2614,10 +2646,10 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -2789,6 +2821,8 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 504,
             },
           ]
@@ -2811,14 +2845,18 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -2908,10 +2946,10 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -3052,14 +3090,18 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -3149,10 +3191,10 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -3293,14 +3335,18 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -3390,10 +3436,10 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -3628,6 +3674,8 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 504,
             },
           ]
@@ -3670,14 +3718,18 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -3767,10 +3819,10 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -3871,14 +3923,18 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -3968,10 +4024,10 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -4072,14 +4128,18 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -4169,10 +4229,10 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -4366,6 +4426,8 @@ exports[`renders non-shifting bottom navigation 1`] = `
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 504,
             },
           ]
@@ -4388,14 +4450,18 @@ exports[`renders non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -4485,10 +4551,10 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -4629,14 +4695,18 @@ exports[`renders non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -4726,10 +4796,10 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -4870,14 +4940,18 @@ exports[`renders non-shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -4967,10 +5041,10 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -5204,6 +5278,8 @@ exports[`renders shifting bottom navigation 1`] = `
             Object {
               "marginBottom": 0,
               "marginHorizontal": 0,
+            },
+            Object {
               "maxWidth": 480,
             },
           ]
@@ -5246,14 +5322,18 @@ exports[`renders shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -5343,10 +5423,10 @@ exports[`renders shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -5447,14 +5527,18 @@ exports[`renders shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -5544,10 +5628,10 @@ exports[`renders shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -5648,14 +5732,18 @@ exports[`renders shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -5745,10 +5833,10 @@ exports[`renders shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -5849,14 +5937,18 @@ exports[`renders shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -5946,10 +6038,10 @@ exports[`renders shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }
@@ -6050,14 +6142,18 @@ exports[`renders shifting bottom navigation 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "flex": 1,
-              "paddingVertical": 6,
-            }
+            Array [
+              Object {
+                "flex": 1,
+                "paddingVertical": 6,
+              },
+              false,
+            ]
           }
         >
           <View
             pointerEvents="none"
+            style={false}
           >
             <View
               style={
@@ -6147,10 +6243,10 @@ exports[`renders shifting bottom navigation 1`] = `
                     Object {
                       "left": 0,
                       "position": "absolute",
-                      "top": -2,
                     },
                     Object {
                       "right": -2,
+                      "top": -2,
                     },
                   ]
                 }