diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index ee54135042..12575d429e 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -85,7 +85,6 @@ const config = {
           Banner: 'Banner',
           BottomNavigation: {
             BottomNavigation: 'BottomNavigation/BottomNavigation',
-            BottomNavigationBar: 'BottomNavigation/BottomNavigationBar',
           },
           Button: {
             Button: 'Button/Button',
@@ -148,6 +147,9 @@ const config = {
             MenuItem: 'Menu/MenuItem',
           },
           Modal: 'Modal',
+          NavigationBar: {
+            NavigationBar: 'NavigationBar/NavigationBar',
+          },
           Portal: {
             Portal: 'Portal/Portal',
             PortalHost: 'Portal/PortalHost',
diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
index 53132e299f..5c8aba19da 100644
--- a/example/src/ExampleList.tsx
+++ b/example/src/ExampleList.tsx
@@ -27,6 +27,7 @@ import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
 import ListItemExample from './Examples/ListItemExample';
 import ListSectionExample from './Examples/ListSectionExample';
 import MenuExample from './Examples/MenuExample';
+import NavigationBarExample from './Examples/NavigationBarExample';
 import ProgressBarExample from './Examples/ProgressBarExample';
 import RadioButtonExample from './Examples/RadioButtonExample';
 import RadioButtonGroupExample from './Examples/RadioButtonGroupExample';
@@ -72,6 +73,7 @@ export const mainExamples = {
   ListSection: ListSectionExample,
   ListItem: ListItemExample,
   Menu: MenuExample,
+  NavigationBar: NavigationBarExample,
   Progressbar: ProgressBarExample,
   Radio: RadioButtonExample,
   RadioGroup: RadioButtonGroupExample,
diff --git a/example/src/Examples/BottomNavigationBarExample.tsx b/example/src/Examples/BottomNavigationBarExample.tsx
index 9fbddf7f23..4b4d98d94d 100644
--- a/example/src/Examples/BottomNavigationBarExample.tsx
+++ b/example/src/Examples/BottomNavigationBarExample.tsx
@@ -11,7 +11,7 @@ import {
   SFSymbol,
   MaterialSymbol,
 } from '@react-navigation/native';
-import { Text, BottomNavigation } from 'react-native-paper';
+import { Text, NavigationBar } from 'react-native-paper';
 
 function HomeScreen() {
   return (
@@ -34,7 +34,7 @@ const BottomNavigationBarExample = createBottomTabNavigator({
     headerShown: false,
   },
   tabBar: ({ navigation, state, descriptors }) => (
-    <BottomNavigation.Bar
+    <NavigationBar
       navigationState={state}
       onTabPress={({ route, preventDefault }) => {
         const event = navigation.emit({
@@ -119,7 +119,7 @@ const BottomNavigationBarExample = createBottomTabNavigator({
 });
 
 export default Object.assign(BottomNavigationBarExample, {
-  title: 'Bottom Navigation Bar',
+  title: 'Navigation Bar (React Navigation)',
 });
 
 const styles = StyleSheet.create({
diff --git a/example/src/Examples/NavigationBarExample.tsx b/example/src/Examples/NavigationBarExample.tsx
new file mode 100644
index 0000000000..070bbc28c2
--- /dev/null
+++ b/example/src/Examples/NavigationBarExample.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+
+import {
+  NavigationBar,
+  SegmentedButtons,
+  Switch,
+  Text,
+} from 'react-native-paper';
+
+type VariantMode = 'auto' | 'stacked' | 'horizontal';
+
+// The flexible navigation bar switches to a horizontal item arrangement in
+// medium-width windows. M3 recommends ~600dp as the breakpoint, but the
+// component leaves the decision to the consumer — here it is driven by
+// `useWindowDimensions`.
+const MEDIUM_WINDOW_WIDTH = 600;
+
+const routes = [
+  { key: 'album', title: 'Album', focusedIcon: 'image-album', badge: 3 },
+  { key: 'library', title: 'Library', focusedIcon: 'bookshelf' },
+  {
+    key: 'favorites',
+    title: 'Favorites',
+    focusedIcon: 'heart',
+    unfocusedIcon: 'heart-outline',
+  },
+  {
+    key: 'settings',
+    title: 'Settings',
+    focusedIcon: 'cog',
+    unfocusedIcon: 'cog-outline',
+  },
+];
+
+const NavigationBarExample = () => {
+  const [index, setIndex] = React.useState(0);
+  const [labeled, setLabeled] = React.useState(true);
+  const [variantMode, setVariantMode] = React.useState<VariantMode>('auto');
+
+  const { width } = useWindowDimensions();
+  const autoVariant = width >= MEDIUM_WINDOW_WIDTH ? 'horizontal' : 'stacked';
+  const variant = variantMode === 'auto' ? autoVariant : variantMode;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <Text variant="headlineSmall">{routes[index].title}</Text>
+
+        <View style={styles.controls}>
+          <View style={styles.row}>
+            <Text variant="labelLarge">Show labels</Text>
+            <Switch value={labeled} onValueChange={setLabeled} />
+          </View>
+
+          <SegmentedButtons
+            value={variantMode}
+            onValueChange={(value) => setVariantMode(value as VariantMode)}
+            buttons={[
+              { value: 'auto', label: `Auto (${autoVariant})` },
+              { value: 'stacked', label: 'Stacked' },
+              { value: 'horizontal', label: 'Horizontal' },
+            ]}
+          />
+        </View>
+      </View>
+
+      <NavigationBar
+        navigationState={{ index, routes }}
+        labeled={labeled}
+        variant={variant}
+        onTabPress={({ route }) => {
+          const nextIndex = routes.findIndex((r) => r.key === route.key);
+          if (nextIndex !== -1) {
+            setIndex(nextIndex);
+          }
+        }}
+      />
+    </View>
+  );
+};
+
+NavigationBarExample.title = 'Navigation Bar (flexible)';
+
+export default NavigationBarExample;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  controls: {
+    marginTop: 32,
+    width: '100%',
+    maxWidth: 480,
+    gap: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+});
diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index 1f18b17aae..08313484e9 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/src/components/BottomNavigation/BottomNavigation.tsx
@@ -9,12 +9,12 @@ import type {
 
 import useLatestCallback from 'use-latest-callback';
 
-import BottomNavigationBar from './BottomNavigationBar';
 import BottomNavigationRouteScreen from './BottomNavigationRouteScreen';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
 import type { IconSource } from '../Icon';
+import NavigationBar from '../NavigationBar/NavigationBar';
 import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
 export type BaseRoute = {
@@ -48,14 +48,6 @@ type TouchableProps<Route extends BaseRoute> = TouchableRippleProps & {
 };
 
 export type Props<Route extends BaseRoute> = {
-  /**
-   * 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 `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.
-   * Note that you need at least 2 tabs be able to run this animation.
-   */
-  shifting?: boolean;
   /**
    * Whether to show labels in tabs. When `false`, only icons will be displayed.
    */
@@ -200,8 +192,8 @@ export type Props<Route extends BaseRoute> = {
    */
   inactiveColor?: string;
   /**
-   * Whether animation is enabled for scenes transitions in `shifting` mode.
-   * By default, the scenes cross-fade during tab change when `shifting` is enabled.
+   * Whether animation is enabled for scene transitions.
+   * By default, the scenes cross-fade during tab change.
    * Specify `sceneAnimationEnabled` as `false` to disable the animation.
    */
   sceneAnimationEnabled?: boolean;
@@ -261,7 +253,7 @@ const SceneComponent = React.memo(({ component, ...rest }: any) =>
 
 /**
  * BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.
- * It is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).
+ * It is primarily designed for use on mobile. If you want to use the navigation bar only see [`NavigationBar`](../NavigationBar).
  *
  * By default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
  * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
@@ -330,7 +322,6 @@ const BottomNavigation = <Route extends BaseRoute>({
   onTabPress,
   onTabLongPress,
   onIndexChange,
-  shifting: shiftingProp,
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
   compact: compactProp,
@@ -341,14 +332,6 @@ const BottomNavigation = <Route extends BaseRoute>({
   const theme = useInternalTheme(themeOverrides);
   const { scale } = theme.animation;
   const compact = compactProp ?? false;
-  let shifting = shiftingProp ?? false;
-
-  if (shifting && navigationState.routes.length < 2) {
-    shifting = false;
-    console.warn(
-      'BottomNavigation needs at least 2 tabs to run shifting animation'
-    );
-  }
 
   const focusedKey = navigationState.routes[navigationState.index].key;
 
@@ -556,7 +539,7 @@ const BottomNavigation = <Route extends BaseRoute>({
           );
         })}
       </View>
-      <BottomNavigationBar
+      <NavigationBar
         navigationState={navigationState}
         renderIcon={renderIcon}
         renderLabel={renderLabel}
@@ -571,10 +554,8 @@ const BottomNavigation = <Route extends BaseRoute>({
         style={barStyle}
         activeIndicatorStyle={activeIndicatorStyle}
         labeled={labeled}
-        animationEasing={sceneAnimationEasing}
         onTabPress={handleTabPress}
         onTabLongPress={onTabLongPress}
-        shifting={shifting}
         safeAreaInsets={safeAreaInsets}
         labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
         compact={compact}
@@ -612,9 +593,6 @@ BottomNavigation.SceneMap = <Route extends BaseRoute>(scenes: {
   );
 };
 
-// @component ./BottomNavigationBar.tsx
-BottomNavigation.Bar = BottomNavigationBar;
-
 export default BottomNavigation;
 
 const styles = StyleSheet.create({
diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx
deleted file mode 100644
index 83998977b9..0000000000
--- a/src/components/BottomNavigation/BottomNavigationBar.tsx
+++ /dev/null
@@ -1,862 +0,0 @@
-import * as React from 'react';
-import { Animated, Platform, StyleSheet, Pressable, View } from 'react-native';
-import type {
-  ColorValue,
-  EasingFunction,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import {
-  getActiveTintColor,
-  getInactiveTintColor,
-  getLabelColor,
-} from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { Theme, ThemeProp } from '../../types';
-import useAnimatedValue from '../../utils/useAnimatedValue';
-import useAnimatedValueArray from '../../utils/useAnimatedValueArray';
-import useIsKeyboardShown from '../../utils/useIsKeyboardShown';
-import useLayout from '../../utils/useLayout';
-import Badge from '../Badge';
-import Icon from '../Icon';
-import type { IconSource } from '../Icon';
-import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-type BaseRoute = {
-  key: string;
-  title?: string;
-  focusedIcon?: IconSource;
-  unfocusedIcon?: IconSource;
-  badge?: string | number | boolean;
-  accessibilityLabel?: string;
-  testID?: string;
-  lazy?: boolean;
-};
-
-type NavigationState<Route extends BaseRoute> = {
-  index: number;
-  routes: Route[];
-};
-
-type TabPressEvent = {
-  defaultPrevented: boolean;
-  preventDefault(): void;
-};
-
-type TouchableProps<Route extends BaseRoute> = TouchableRippleProps & {
-  key: string;
-  route: Route;
-  children: React.ReactNode;
-  borderless?: boolean;
-  centered?: boolean;
-  rippleColor?: ColorValue;
-};
-
-export type Props<Route extends BaseRoute> = {
-  /**
-   * 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 `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.
-   * Note that you need at least 2 tabs be able to run this animation.
-   */
-  shifting?: boolean;
-  /**
-   * Whether to show labels in tabs. When `false`, only icons will be displayed.
-   */
-  labeled?: boolean;
-  /**
-   * Whether tabs should be spread across the entire width.
-   */
-  compact?: boolean;
-  /**
-   * State for the bottom navigation. The state should contain the following properties:
-   *
-   * - `index`: a number representing the index of the active route in the `routes` array
-   * - `routes`: an array containing a list of route objects used for rendering the tabs
-   *
-   * Each route object should contain the following properties:
-   *
-   * - `key`: a unique key to identify the route (required)
-   * - `title`: title of the route to use as the tab label
-   * - `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 v5.x
-   * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
-   * - `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
-   *
-   * Example:
-   *
-   * ```js
-   * {
-   *   index: 1,
-   *   routes: [
-   *     { 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' },
-   *   ]
-   * }
-   * ```
-   *
-   * `BottomNavigation.Bar` is a controlled component, which means the `index` needs to be updated via the `onTabPress` callback.
-   */
-  navigationState: NavigationState<Route>;
-  /**
-   * Callback which returns a React Element to be used as tab icon.
-   */
-  renderIcon?: (props: {
-    route: Route;
-    focused: boolean;
-    color: ColorValue;
-  }) => React.ReactNode;
-  /**
-   * Callback which React Element to be used as tab label.
-   */
-  renderLabel?: (props: {
-    route: Route;
-    focused: boolean;
-    color: ColorValue;
-  }) => React.ReactNode;
-  /**
-   * Callback which returns a React element to be used as the touchable for the tab item.
-   * Renders a `TouchableRipple` on Android and `Pressable` on iOS.
-   */
-  renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
-  /**
-   * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * Uses `route.accessibilityLabel` by default.
-   */
-  getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
-  /**
-   * Get badge for the tab, uses `route.badge` by default.
-   */
-  getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
-  /**
-   * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
-   */
-  getLabelText?: (props: { route: Route }) => string | undefined;
-  /**
-   * Get the id to locate this tab button in tests, uses `route.testID` by default.
-   */
-  getTestID?: (props: { route: Route }) => string | undefined;
-  /**
-   * Function to execute on tab press. It receives the route for the pressed tab. Use this to update the navigation state.
-   */
-  onTabPress: (props: { route: Route } & TabPressEvent) => void;
-  /**
-   * Function to execute on tab long press. It receives the route for the pressed tab
-   */
-  onTabLongPress?: (props: { route: Route } & TabPressEvent) => void;
-  /**
-   * Custom color for icon and label in the active tab.
-   */
-  activeColor?: string;
-  /**
-   * Custom color for icon and label in the inactive tab.
-   */
-  inactiveColor?: string;
-  /**
-   * The scene animation Easing.
-   */
-  animationEasing?: EasingFunction | undefined;
-  /**
-   * Whether the bottom navigation bar is hidden when keyboard is shown.
-   * On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.
-   */
-  keyboardHidesNavigationBar?: boolean;
-  /**
-   * Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
-   * The bottom insets for iOS is added by default. You can override the behavior with this option.
-   */
-  safeAreaInsets?: {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-  };
-  /**
-   * Specifies the largest possible scale a label font can reach.
-   */
-  labelMaxFontSizeMultiplier?: number;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  activeIndicatorStyle?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-};
-
-const MIN_TAB_WIDTH = 96;
-const MAX_TAB_WIDTH = 168;
-const BAR_HEIGHT = 56;
-const OUTLINE_WIDTH = 64;
-
-const Touchable = <Route extends BaseRoute>({
-  route: _0,
-  style,
-  children,
-  borderless,
-  centered,
-  rippleColor,
-  ...rest
-}: TouchableProps<Route>) =>
-  TouchableRipple.supported ? (
-    <TouchableRipple
-      {...rest}
-      disabled={rest.disabled || undefined}
-      borderless={borderless}
-      centered={centered}
-      rippleColor={rippleColor}
-      style={style}
-    >
-      {children}
-    </TouchableRipple>
-  ) : (
-    <Pressable style={style} {...rest}>
-      {children}
-    </Pressable>
-  );
-
-/**
- * A navigation bar which can easily be integrated with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).
- *
- * ## Usage
- * ### without React Navigation
- * ```js
- * import React from 'react';
- * import { useState } from 'react';
- * import { View } from 'react-native';
- * import { BottomNavigation, Text, Provider } from 'react-native-paper';
- * import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
- *
- * function HomeScreen() {
- *   return (
- *     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
- *       <Text>Home!</Text>
- *     </View>
- *   );
- * }
- *
- * function SettingsScreen() {
- *   return (
- *     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
- *       <Text>Settings!</Text>
- *   </View>
- *   );
- * }
- *
- * export default function MyComponent() {
- *   const [index, setIndex] = useState(0);
- *
- *   const routes = [
- *     { key: 'home', title: 'Home', icon: 'home' },
- *     { key: 'settings', title: 'Settings', icon: 'cog' },
- *   ];
-
- *   const renderScene = ({ route }) => {
- *     switch (route.key) {
- *       case 'home':
- *         return <HomeScreen />;
- *       case 'settings':
- *         return <SettingsScreen />;
- *       default:
- *         return null;
- *     }
- *   };
- *
- *   return (
- *     <Provider>
- *       {renderScene({ route: routes[index] })}
- *       <BottomNavigation.Bar
- *         navigationState={{ index, routes }}
- *         onTabPress={({ route }) => {
- *           const newIndex = routes.findIndex((r) => r.key === route.key);
- *           if (newIndex !== -1) {
- *             setIndex(newIndex);
- *           }
- *         }}
- *         renderIcon={({ route, color }) => (
- *           <Icon name={route.icon} size={24} color={color} />
- *         )}
- *         getLabelText={({ route }) => route.title}
- *       />
- *     </Provider>
- *   );
- * }
- * ```
- */
-const BottomNavigationBar = <Route extends BaseRoute>({
-  navigationState,
-  renderIcon,
-  renderLabel,
-  renderTouchable = ({ key, ...props }: TouchableProps<Route>) => (
-    <Touchable key={key} {...props} />
-  ),
-  getLabelText = ({ route }: { route: Route }) => route.title,
-  getBadge = ({ route }: { route: Route }) => route.badge,
-  getAccessibilityLabel = ({ route }: { route: Route }) =>
-    route.accessibilityLabel,
-  getTestID = ({ route }: { route: Route }) => route.testID,
-  activeColor,
-  inactiveColor,
-  keyboardHidesNavigationBar = Platform.OS === 'android',
-  style,
-  activeIndicatorStyle,
-  labeled = true,
-  animationEasing,
-  onTabPress,
-  onTabLongPress,
-  shifting: shiftingProp,
-  safeAreaInsets,
-  labelMaxFontSizeMultiplier = 1,
-  compact: compactProp,
-  testID = 'bottom-navigation-bar',
-  theme: themeOverrides,
-}: Props<Route>) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { colors } = theme as Theme;
-  const { bottom, left, right } = useSafeAreaInsets();
-  const { scale } = theme.animation;
-  const compact = compactProp ?? false;
-  let shifting = shiftingProp ?? false;
-
-  if (shifting && navigationState.routes.length < 2) {
-    shifting = false;
-    console.warn(
-      'BottomNavigation.Bar needs at least 2 tabs to run shifting animation'
-    );
-  }
-
-  /**
-   * Visibility of the navigation bar, visible state is 1 and invisible is 0.
-   */
-  const visibleAnim = useAnimatedValue(1);
-
-  /**
-   * Active state of individual tab items, active state is 1 and inactive state is 0.
-   */
-  const tabsAnims = useAnimatedValueArray(
-    navigationState.routes.map(
-      // focused === 1, unfocused === 0
-      (_, i) => (i === navigationState.index ? 1 : 0)
-    )
-  );
-
-  /**
-   * Layout of the navigation bar.
-   */
-  const [layout, onLayout] = useLayout();
-
-  /**
-   * Track whether the keyboard is visible to show and hide the navigation bar.
-   */
-  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
-
-  const handleKeyboardShow = React.useCallback(() => {
-    setKeyboardVisible(true);
-    Animated.timing(visibleAnim, {
-      toValue: 0,
-      duration: 150 * scale,
-      useNativeDriver: true,
-    }).start();
-  }, [scale, visibleAnim]);
-
-  const handleKeyboardHide = React.useCallback(() => {
-    Animated.timing(visibleAnim, {
-      toValue: 1,
-      duration: 100 * scale,
-      useNativeDriver: true,
-    }).start(() => {
-      setKeyboardVisible(false);
-    });
-  }, [scale, visibleAnim]);
-
-  const animateToIndex = React.useCallback(
-    (index: number) => {
-      Animated.parallel(
-        navigationState.routes.map((_, i) =>
-          Animated.timing(tabsAnims[i], {
-            toValue: i === index ? 1 : 0,
-            duration: 150 * scale,
-            useNativeDriver: true,
-            easing: animationEasing,
-          })
-        )
-      ).start(() => {
-        // Workaround a bug in native animations where this is reset after first animation
-        tabsAnims.map((tab, i) => tab.setValue(i === index ? 1 : 0));
-      });
-    },
-    [scale, navigationState.routes, tabsAnims, animationEasing]
-  );
-
-  React.useEffect(() => {
-    // Workaround for native animated bug in react-native@^0.57
-    // Context: https://github.com/callstack/react-native-paper/pull/637
-    animateToIndex(navigationState.index);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useIsKeyboardShown({
-    onShow: handleKeyboardShow,
-    onHide: handleKeyboardHide,
-  });
-
-  React.useEffect(() => {
-    animateToIndex(navigationState.index);
-  }, [navigationState.index, animateToIndex]);
-
-  const eventForIndex = (index: number) => {
-    const event = {
-      route: navigationState.routes[index],
-      defaultPrevented: false,
-      preventDefault: () => {
-        event.defaultPrevented = true;
-      },
-    };
-
-    return event;
-  };
-
-  const { routes } = navigationState;
-
-  const { backgroundColor: customBackground } = (StyleSheet.flatten(style) ||
-    {}) as {
-    elevation?: number;
-    backgroundColor?: ColorValue;
-  };
-
-  const backgroundColor = customBackground || colors.surfaceContainer;
-
-  const activeTintColor = getActiveTintColor({
-    activeColor,
-    theme,
-  });
-
-  const inactiveTintColor = getInactiveTintColor({
-    inactiveColor,
-    theme,
-  });
-
-  const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH;
-  const maxTabBarWidth = maxTabWidth * routes.length;
-
-  const insets = {
-    left: safeAreaInsets?.left ?? left,
-    right: safeAreaInsets?.right ?? right,
-    bottom: safeAreaInsets?.bottom ?? bottom,
-  };
-
-  return (
-    <Surface
-      elevation={0}
-      testID={testID}
-      style={[
-        styles.bar,
-        keyboardHidesNavigationBar // eslint-disable-next-line react-native/no-inline-styles
-          ? {
-              // When the keyboard is shown, slide down the navigation bar
-              transform: [
-                {
-                  translateY: visibleAnim.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [layout.height, 0],
-                  }),
-                },
-              ],
-              // Absolutely position the navigation bar so that the content is below it
-              // This is needed to avoid gap at bottom when the navigation bar is hidden
-              position: keyboardVisible ? 'absolute' : undefined,
-            }
-          : null,
-        style,
-      ]}
-      pointerEvents={
-        layout.measured
-          ? keyboardHidesNavigationBar && keyboardVisible
-            ? 'none'
-            : 'auto'
-          : 'none'
-      }
-      onLayout={onLayout}
-      container
-    >
-      <Animated.View
-        style={[styles.barContent, { backgroundColor }]}
-        testID={`${testID}-content`}
-      >
-        <View
-          style={[
-            styles.items,
-            {
-              marginBottom: insets.bottom,
-              marginHorizontal: Math.max(insets.left, insets.right),
-            },
-            compact && {
-              maxWidth: maxTabBarWidth,
-            },
-          ]}
-          accessibilityRole={'tablist'}
-          testID={`${testID}-content-wrapper`}
-        >
-          {routes.map((route, index) => {
-            const focused = navigationState.index === index;
-            const active = tabsAnims[index];
-
-            // Move down the icon to account for no-label in shifting and smaller label in non-shifting.
-            const translateY = labeled
-              ? shifting
-                ? active.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [7, 0],
-                  })
-                : 0
-              : 7;
-
-            // We render the active icon and label on top of inactive ones and cross-fade them on change.
-            // This trick gives the illusion that we are animating between active and inactive colors.
-            // This is to ensure that we can use native driver, as colors cannot be animated with native driver.
-            const activeOpacity = active;
-            const inactiveOpacity = active.interpolate({
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            });
-
-            const v3ActiveOpacity = focused ? 1 : 0;
-            const v3InactiveOpacity = shifting
-              ? inactiveOpacity
-              : focused
-              ? 0
-              : 1;
-
-            // Scale horizontally the outline pill
-            const outlineScale = focused
-              ? active.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.5, 1],
-                })
-              : 0;
-
-            const badge = getBadge({ route });
-
-            const activeLabelColor = getLabelColor({
-              tintColor: activeTintColor,
-              hasColor: Boolean(activeColor),
-              focused,
-              theme,
-            });
-
-            const inactiveLabelColor = getLabelColor({
-              tintColor: inactiveTintColor,
-              hasColor: Boolean(inactiveColor),
-              focused,
-              theme,
-            });
-
-            const badgeStyle = {
-              top: typeof badge === 'boolean' ? 4 : 2,
-              right:
-                badge != null && typeof badge !== 'boolean'
-                  ? String(badge).length * -2
-                  : 0,
-            };
-
-            const isLegacyOrV3Shifting = shifting && labeled;
-
-            const font = (theme as Theme).fonts.labelMedium;
-
-            return renderTouchable({
-              key: route.key,
-              route,
-              borderless: true,
-              centered: true,
-              rippleColor: 'transparent',
-              onPress: () => onTabPress(eventForIndex(index)),
-              onLongPress: () => onTabLongPress?.(eventForIndex(index)),
-              testID: getTestID({ route }),
-              accessibilityLabel: getAccessibilityLabel({ route }),
-              accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
-              accessibilityState: { selected: focused },
-              style: [styles.item, styles.v3Item],
-              children: (
-                <View
-                  pointerEvents="none"
-                  style={
-                    labeled
-                      ? styles.v3TouchableContainer
-                      : styles.v3NoLabelContainer
-                  }
-                >
-                  <Animated.View
-                    style={[
-                      styles.iconContainer,
-                      styles.v3IconContainer,
-                      isLegacyOrV3Shifting && {
-                        transform: [{ translateY }],
-                      },
-                    ]}
-                  >
-                    {focused && (
-                      <Animated.View
-                        style={[
-                          styles.outline,
-                          {
-                            transform: [
-                              {
-                                scaleX: outlineScale,
-                              },
-                            ],
-                            backgroundColor: colors.secondaryContainer,
-                          },
-                          activeIndicatorStyle,
-                        ]}
-                      />
-                    )}
-                    <Animated.View
-                      style={[
-                        styles.iconWrapper,
-                        styles.v3IconWrapper,
-                        {
-                          opacity: isLegacyOrV3Shifting
-                            ? activeOpacity
-                            : v3ActiveOpacity,
-                        },
-                      ]}
-                    >
-                      {renderIcon ? (
-                        renderIcon({
-                          route,
-                          focused: true,
-                          color: activeTintColor,
-                        })
-                      ) : (
-                        <Icon
-                          source={route.focusedIcon as IconSource}
-                          color={activeTintColor}
-                          size={24}
-                        />
-                      )}
-                    </Animated.View>
-                    <Animated.View
-                      style={[
-                        styles.iconWrapper,
-                        styles.v3IconWrapper,
-                        {
-                          opacity: isLegacyOrV3Shifting
-                            ? inactiveOpacity
-                            : v3InactiveOpacity,
-                        },
-                      ]}
-                    >
-                      {renderIcon ? (
-                        renderIcon({
-                          route,
-                          focused: false,
-                          color: inactiveTintColor,
-                        })
-                      ) : (
-                        <Icon
-                          source={
-                            route.unfocusedIcon !== undefined
-                              ? route.unfocusedIcon
-                              : (route.focusedIcon as IconSource)
-                          }
-                          color={inactiveTintColor}
-                          size={24}
-                        />
-                      )}
-                    </Animated.View>
-                    <View style={[styles.badgeContainer, badgeStyle]}>
-                      {typeof badge === 'boolean' ? (
-                        <Badge visible={badge} size={6} />
-                      ) : (
-                        <Badge visible={badge != null} size={16}>
-                          {badge}
-                        </Badge>
-                      )}
-                    </View>
-                  </Animated.View>
-                  {labeled ? (
-                    <Animated.View style={[styles.labelContainer]}>
-                      <Animated.View
-                        style={[
-                          styles.labelWrapper,
-                          {
-                            opacity: isLegacyOrV3Shifting
-                              ? activeOpacity
-                              : v3ActiveOpacity,
-                          },
-                        ]}
-                      >
-                        {renderLabel ? (
-                          renderLabel({
-                            route,
-                            focused: true,
-                            color: activeLabelColor,
-                          })
-                        ) : (
-                          <Text
-                            maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-                            variant="labelMedium"
-                            style={[
-                              styles.label,
-                              {
-                                color: activeLabelColor,
-                                ...font,
-                              },
-                            ]}
-                          >
-                            {getLabelText({ route })}
-                          </Text>
-                        )}
-                      </Animated.View>
-                      {shifting ? null : (
-                        <Animated.View
-                          style={[
-                            styles.labelWrapper,
-                            {
-                              opacity: isLegacyOrV3Shifting
-                                ? inactiveOpacity
-                                : v3InactiveOpacity,
-                            },
-                          ]}
-                        >
-                          {renderLabel ? (
-                            renderLabel({
-                              route,
-                              focused: false,
-                              color: inactiveLabelColor,
-                            })
-                          ) : (
-                            <Text
-                              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-                              variant="labelMedium"
-                              selectable={false}
-                              style={[
-                                styles.label,
-                                {
-                                  color: inactiveLabelColor,
-                                  ...font,
-                                },
-                              ]}
-                            >
-                              {getLabelText({ route })}
-                            </Text>
-                          )}
-                        </Animated.View>
-                      )}
-                    </Animated.View>
-                  ) : null}
-                </View>
-              ),
-            });
-          })}
-        </View>
-      </Animated.View>
-    </Surface>
-  );
-};
-
-BottomNavigationBar.displayName = 'BottomNavigation.Bar';
-
-export default BottomNavigationBar;
-
-const styles = StyleSheet.create({
-  bar: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  barContent: {
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-  items: {
-    flexDirection: 'row',
-    ...(Platform.OS === 'web'
-      ? {
-          width: '100%',
-        }
-      : null),
-  },
-  item: {
-    flex: 1,
-    // Top padding is 6 and bottom padding is 10
-    // The extra 4dp bottom padding is offset by label's height
-    paddingVertical: 6,
-  },
-  v3Item: {
-    paddingVertical: 0,
-  },
-  iconContainer: {
-    height: 24,
-    width: 24,
-    marginTop: 2,
-    marginHorizontal: 12,
-    alignSelf: 'center',
-  },
-  v3IconContainer: {
-    height: 32,
-    width: 32,
-    marginBottom: 4,
-    marginTop: 0,
-    justifyContent: 'center',
-  },
-  iconWrapper: {
-    ...StyleSheet.absoluteFill,
-    alignItems: 'center',
-  },
-  v3IconWrapper: {
-    top: 4,
-  },
-  labelContainer: {
-    height: 16,
-    paddingBottom: 2,
-  },
-  labelWrapper: {
-    ...StyleSheet.absoluteFill,
-  },
-  // eslint-disable-next-line react-native/no-color-literals
-  label: {
-    fontSize: 12,
-    height: BAR_HEIGHT,
-    textAlign: 'center',
-    backgroundColor: 'transparent',
-    ...(Platform.OS === 'web'
-      ? {
-          whiteSpace: 'nowrap',
-          alignSelf: 'center',
-        }
-      : null),
-  },
-  badgeContainer: {
-    position: 'absolute',
-    left: 0,
-  },
-  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/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
new file mode 100644
index 0000000000..2ff7379aa4
--- /dev/null
+++ b/src/components/NavigationBar/NavigationBar.tsx
@@ -0,0 +1,889 @@
+import * as React from 'react';
+import { Platform, StyleSheet, Pressable, View } from 'react-native';
+import type {
+  Animated as RNAnimated,
+  ColorValue,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import Animated, {
+  Easing,
+  ReduceMotion,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  BAR_HEIGHT,
+  colorRoles,
+  ICON_LABEL_GAP,
+  ICON_SIZE,
+  INDICATOR_BORDER_RADIUS,
+  INDICATOR_HEIGHT,
+  INDICATOR_WIDTH,
+  MAX_TAB_WIDTH,
+  MIN_TAB_WIDTH,
+  NO_LABEL_BAR_HEIGHT,
+} from './tokens';
+import {
+  getActiveTintColor,
+  getInactiveTintColor,
+  getLabelColor,
+} from './utils';
+import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
+import { toRawSpring } from '../../theme/tokens/sys/motion';
+import { getStateLayer } from '../../theme/utils/state';
+import type { Theme, ThemeProp } from '../../types';
+import useIsKeyboardShown from '../../utils/useIsKeyboardShown';
+import useLayout from '../../utils/useLayout';
+import Badge from '../Badge';
+import Icon from '../Icon';
+import type { IconSource } from '../Icon';
+import Surface from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
+import Text from '../Typography/Text';
+
+export type BaseRoute = {
+  key: string;
+  title?: string;
+  focusedIcon?: IconSource;
+  unfocusedIcon?: IconSource;
+  badge?: string | number | boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+  lazy?: boolean;
+};
+
+type NavigationState<Route extends BaseRoute> = {
+  index: number;
+  routes: Route[];
+};
+
+type TabPressEvent = {
+  defaultPrevented: boolean;
+  preventDefault(): void;
+};
+
+type TouchableProps<Route extends BaseRoute> = TouchableRippleProps & {
+  key: string;
+  route: Route;
+  children: React.ReactNode;
+  borderless?: boolean;
+  centered?: boolean;
+  rippleColor?: ColorValue;
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+};
+
+export type Props<Route extends BaseRoute> = {
+  /**
+   * Whether to show labels in tabs. When `false`, only icons will be displayed.
+   */
+  labeled?: boolean;
+  /**
+   * The item layout variant of the flexible navigation bar.
+   *
+   * - `stacked` (default): the icon sits above the label.
+   * - `horizontal`: the icon sits beside the label and the active indicator
+   *   hugs both. Recommended for medium-width windows (e.g. foldables and
+   *   tablets). Has no effect when `labeled` is `false`.
+   */
+  variant?: 'stacked' | 'horizontal';
+  /**
+   * Whether tabs should be spread across the entire width.
+   */
+  compact?: boolean;
+  /**
+   * State for the bottom navigation. The state should contain the following properties:
+   *
+   * - `index`: a number representing the index of the active route in the `routes` array
+   * - `routes`: an array containing a list of route objects used for rendering the tabs
+   *
+   * Each route object should contain the following properties:
+   *
+   * - `key`: a unique key to identify the route (required)
+   * - `title`: title of the route to use as the tab label
+   * - `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 v5.x
+   * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
+   * - `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
+   *
+   * Example:
+   *
+   * ```js
+   * {
+   *   index: 1,
+   *   routes: [
+   *     { 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' },
+   *   ]
+   * }
+   * ```
+   *
+   * `NavigationBar` is a controlled component, which means the `index` needs to be updated via the `onTabPress` callback.
+   */
+  navigationState: NavigationState<Route>;
+  /**
+   * Callback which returns a React Element to be used as tab icon.
+   */
+  renderIcon?: (props: {
+    route: Route;
+    focused: boolean;
+    color: ColorValue;
+  }) => React.ReactNode;
+  /**
+   * Callback which React Element to be used as tab label.
+   */
+  renderLabel?: (props: {
+    route: Route;
+    focused: boolean;
+    color: ColorValue;
+  }) => React.ReactNode;
+  /**
+   * Callback which returns a React element to be used as the touchable for the tab item.
+   * Renders a `TouchableRipple` on Android and `Pressable` on iOS.
+   */
+  renderTouchable?: (props: TouchableProps<Route>) => React.ReactNode;
+  /**
+   * Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+   * Uses `route.accessibilityLabel` by default.
+   */
+  getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
+  /**
+   * Get badge for the tab, uses `route.badge` by default.
+   */
+  getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
+  /**
+   * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
+   */
+  getLabelText?: (props: { route: Route }) => string | undefined;
+  /**
+   * Get the id to locate this tab button in tests, uses `route.testID` by default.
+   */
+  getTestID?: (props: { route: Route }) => string | undefined;
+  /**
+   * Function to execute on tab press. It receives the route for the pressed tab. Use this to update the navigation state.
+   */
+  onTabPress: (props: { route: Route } & TabPressEvent) => void;
+  /**
+   * Function to execute on tab long press. It receives the route for the pressed tab
+   */
+  onTabLongPress?: (props: { route: Route } & TabPressEvent) => void;
+  /**
+   * Custom color for icon and label in the active tab.
+   */
+  activeColor?: string;
+  /**
+   * Custom color for icon and label in the inactive tab.
+   */
+  inactiveColor?: string;
+  /**
+   * Whether the bottom navigation bar is hidden when keyboard is shown.
+   * On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.
+   */
+  keyboardHidesNavigationBar?: boolean;
+  /**
+   * Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
+   * The bottom insets for iOS is added by default. You can override the behavior with this option.
+   */
+  safeAreaInsets?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier?: number;
+  style?: RNAnimated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  activeIndicatorStyle?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+};
+
+const Touchable = <Route extends BaseRoute>({
+  route: _0,
+  style,
+  children,
+  borderless,
+  centered,
+  rippleColor,
+  ...rest
+}: TouchableProps<Route>) =>
+  TouchableRipple.supported ? (
+    <TouchableRipple
+      {...rest}
+      disabled={rest.disabled || undefined}
+      borderless={borderless}
+      centered={centered}
+      rippleColor={rippleColor}
+      style={style}
+    >
+      {children}
+    </TouchableRipple>
+  ) : (
+    <Pressable style={style} {...rest}>
+      {children}
+    </Pressable>
+  );
+
+type ItemProps<Route extends BaseRoute> = {
+  route: Route;
+  focused: boolean;
+  labeled: boolean;
+  variant: 'stacked' | 'horizontal';
+  activeTintColor: ColorValue;
+  inactiveTintColor: ColorValue;
+  activeColor?: string;
+  inactiveColor?: string;
+  renderIcon?: Props<Route>['renderIcon'];
+  renderLabel?: Props<Route>['renderLabel'];
+  renderTouchable: NonNullable<Props<Route>['renderTouchable']>;
+  getLabelText: NonNullable<Props<Route>['getLabelText']>;
+  getBadge: NonNullable<Props<Route>['getBadge']>;
+  getTestID: NonNullable<Props<Route>['getTestID']>;
+  getAccessibilityLabel: NonNullable<Props<Route>['getAccessibilityLabel']>;
+  onPress: () => void;
+  onLongPress: () => void;
+  activeIndicatorStyle?: StyleProp<ViewStyle>;
+  labelMaxFontSizeMultiplier?: number;
+  theme: Theme;
+};
+
+const NavigationBarItem = <Route extends BaseRoute>({
+  route,
+  focused,
+  labeled,
+  variant,
+  activeTintColor,
+  inactiveTintColor,
+  activeColor,
+  inactiveColor,
+  renderIcon,
+  renderLabel,
+  renderTouchable,
+  getLabelText,
+  getBadge,
+  getTestID,
+  getAccessibilityLabel,
+  onPress,
+  onLongPress,
+  activeIndicatorStyle,
+  labelMaxFontSizeMultiplier = 1,
+  theme,
+}: ItemProps<Route>) => {
+  const { colors } = theme;
+
+  const [hovered, setHovered] = React.useState(false);
+  const [keyboardFocused, setKeyboardFocused] = React.useState(false);
+  const [pressed, setPressed] = React.useState(false);
+
+  const reduceMotion = useReduceMotion();
+  const reanimatedReduceMotion = reduceMotion
+    ? ReduceMotion.Always
+    : ReduceMotion.Never;
+
+  // Selection progress for the active indicator: 1 when focused, 0 otherwise.
+  // Each item springs its own progress from its `focused` prop, so there's no
+  // shared animation array to keep in sync.
+  const progress = useSharedValue(focused ? 1 : 0);
+  const isFirstRender = React.useRef(true);
+
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    progress.value = withSpring(focused ? 1 : 0, {
+      ...toRawSpring(theme.motion.spring.fast.spatial),
+      reduceMotion: reanimatedReduceMotion,
+    });
+  }, [focused, progress, theme.motion, reanimatedReduceMotion]);
+
+  // The active indicator is always mounted and cross-fades via opacity (the
+  // stacked layout also scales it horizontally 0.5 → 1, the horizontal layout
+  // scales it 0.8 → 1).
+  const stackedIndicatorAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{ scaleX: 0.5 + progress.value * 0.5 }],
+  }));
+  const horizontalIndicatorAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{ scale: 0.8 + progress.value * 0.2 }],
+  }));
+
+  const iconColor = focused ? activeTintColor : inactiveTintColor;
+  const labelColor = getLabelColor({
+    tintColor: iconColor,
+    hasColor: Boolean(focused ? activeColor : inactiveColor),
+    focused,
+    theme,
+  });
+
+  const badge = getBadge({ route });
+  const badgeStyle = {
+    top: typeof badge === 'boolean' ? 4 : 2,
+    right:
+      badge != null && typeof badge !== 'boolean'
+        ? String(badge).length * -2
+        : 0,
+  };
+
+  const font = theme.fonts.labelMedium;
+
+  // MD3 state layer: visible on hover (8%) and focus/press (10%). Active items
+  // use the on-secondary-container role, inactive the on-surface-variant role.
+  const stateLayerRole = focused
+    ? colorRoles.activeIcon
+    : colorRoles.inactiveIcon;
+  const stateLayer = pressed
+    ? getStateLayer(theme, stateLayerRole, 'pressed')
+    : keyboardFocused
+    ? getStateLayer(theme, stateLayerRole, 'focused')
+    : hovered
+    ? getStateLayer(theme, stateLayerRole, 'hovered')
+    : null;
+  const stateLayerColor = stateLayer
+    ? { backgroundColor: stateLayer.color, opacity: stateLayer.opacity }
+    : null;
+
+  const itemTestID = getTestID({ route });
+  const indicatorTestID = itemTestID
+    ? `${itemTestID}-active-indicator`
+    : undefined;
+  const stateLayerTestID = itemTestID ? `${itemTestID}-state-layer` : undefined;
+
+  // The horizontal arrangement places the label beside the icon and only
+  // applies when labels are shown; otherwise it falls back to stacked icon-only.
+  const horizontal = variant === 'horizontal' && labeled;
+
+  // Item pieces shared across both layouts. The active/inactive distinction is
+  // a plain color swap (no cross-fade), so a single icon and label suffice.
+  const icon = renderIcon ? (
+    renderIcon({ route, focused, color: iconColor })
+  ) : (
+    <Icon
+      source={
+        (focused
+          ? route.focusedIcon
+          : route.unfocusedIcon ?? route.focusedIcon) as IconSource
+      }
+      color={iconColor}
+      size={ICON_SIZE}
+    />
+  );
+
+  const tabBadge = (
+    <View style={[styles.badgeContainer, badgeStyle]}>
+      {typeof badge === 'boolean' ? (
+        <Badge visible={badge} size={6} />
+      ) : (
+        <Badge visible={badge != null} size={16}>
+          {badge}
+        </Badge>
+      )}
+    </View>
+  );
+
+  const renderTabLabel = (labelStyle: StyleProp<TextStyle>) =>
+    renderLabel ? (
+      renderLabel({ route, focused, color: labelColor })
+    ) : (
+      <Text
+        maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+        variant="labelMedium"
+        selectable={false}
+        style={[labelStyle, { color: labelColor, ...font }]}
+      >
+        {getLabelText({ route })}
+      </Text>
+    );
+
+  const stackedContent = (
+    <View
+      pointerEvents="none"
+      style={labeled ? styles.stackedContainer : styles.noLabelContainer}
+    >
+      <View style={styles.iconContainer}>
+        <Animated.View
+          testID={indicatorTestID}
+          style={[
+            styles.stackedIndicator,
+            { backgroundColor: colors[colorRoles.activeIndicator] },
+            stackedIndicatorAnimatedStyle,
+            activeIndicatorStyle,
+          ]}
+        />
+        <View pointerEvents="none" style={styles.stateLayerWrapper}>
+          <View
+            testID={stateLayerTestID}
+            style={[styles.stateLayer, stateLayerColor]}
+          />
+        </View>
+        <View style={styles.iconWrapper}>{icon}</View>
+        {tabBadge}
+      </View>
+      {labeled ? (
+        <View style={styles.labelContainer}>
+          {renderTabLabel(styles.label)}
+        </View>
+      ) : null}
+    </View>
+  );
+
+  const horizontalContent = (
+    <View pointerEvents="none" style={styles.horizontalContainer}>
+      <View style={styles.horizontalItem}>
+        <Animated.View
+          testID={indicatorTestID}
+          style={[
+            StyleSheet.absoluteFill,
+            styles.horizontalIndicator,
+            { backgroundColor: colors[colorRoles.activeIndicator] },
+            horizontalIndicatorAnimatedStyle,
+            activeIndicatorStyle,
+          ]}
+        />
+        <View
+          testID={stateLayerTestID}
+          style={[
+            StyleSheet.absoluteFill,
+            styles.horizontalIndicator,
+            stateLayerColor,
+          ]}
+        />
+        <View>
+          {icon}
+          {tabBadge}
+        </View>
+        {renderTabLabel(styles.horizontalLabel)}
+      </View>
+    </View>
+  );
+
+  return renderTouchable({
+    key: route.key,
+    route,
+    borderless: true,
+    centered: true,
+    rippleColor: 'transparent',
+    onPress,
+    onLongPress,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    onFocus: () => setKeyboardFocused(true),
+    onBlur: () => setKeyboardFocused(false),
+    testID: itemTestID,
+    accessibilityLabel: getAccessibilityLabel({ route }),
+    accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab',
+    accessibilityState: { selected: focused },
+    style: styles.item,
+    children: horizontal ? horizontalContent : stackedContent,
+  });
+};
+
+/**
+ * The Material Design 3 flexible navigation bar. It can easily be integrated
+ * with [React Navigation's Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/).
+ *
+ * Set the `variant` prop to `'horizontal'` to lay items out horizontally
+ * (icon beside label) in medium-width windows.
+ *
+ * ## Usage
+ * ### without React Navigation
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { NavigationBar, Text, Provider } from 'react-native-paper';
+ *
+ * function HomeScreen() {
+ *   return (
+ *     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+ *       <Text>Home!</Text>
+ *     </View>
+ *   );
+ * }
+ *
+ * function SettingsScreen() {
+ *   return (
+ *     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+ *       <Text>Settings!</Text>
+ *   </View>
+ *   );
+ * }
+ *
+ * export default function MyComponent() {
+ *   const [index, setIndex] = React.useState(0);
+ *
+ *   const routes = [
+ *     { key: 'home', title: 'Home', focusedIcon: 'home' },
+ *     { key: 'settings', title: 'Settings', focusedIcon: 'cog' },
+ *   ];
+ *
+ *   const renderScene = ({ route }) => {
+ *     switch (route.key) {
+ *       case 'home':
+ *         return <HomeScreen />;
+ *       case 'settings':
+ *         return <SettingsScreen />;
+ *       default:
+ *         return null;
+ *     }
+ *   };
+ *
+ *   return (
+ *     <Provider>
+ *       {renderScene({ route: routes[index] })}
+ *       <NavigationBar
+ *         navigationState={{ index, routes }}
+ *         onTabPress={({ route }) => {
+ *           const newIndex = routes.findIndex((r) => r.key === route.key);
+ *           if (newIndex !== -1) {
+ *             setIndex(newIndex);
+ *           }
+ *         }}
+ *         getLabelText={({ route }) => route.title}
+ *       />
+ *     </Provider>
+ *   );
+ * }
+ * ```
+ */
+const NavigationBar = <Route extends BaseRoute>({
+  navigationState,
+  renderIcon,
+  renderLabel,
+  renderTouchable = ({ key, ...props }: TouchableProps<Route>) => (
+    <Touchable key={key} {...props} />
+  ),
+  getLabelText = ({ route }: { route: Route }) => route.title,
+  getBadge = ({ route }: { route: Route }) => route.badge,
+  getAccessibilityLabel = ({ route }: { route: Route }) =>
+    route.accessibilityLabel,
+  getTestID = ({ route }: { route: Route }) => route.testID,
+  activeColor,
+  inactiveColor,
+  keyboardHidesNavigationBar = Platform.OS === 'android',
+  style,
+  activeIndicatorStyle,
+  labeled = true,
+  variant = 'stacked',
+  onTabPress,
+  onTabLongPress,
+  safeAreaInsets,
+  labelMaxFontSizeMultiplier = 1,
+  compact: compactProp,
+  testID = 'bottom-navigation-bar',
+  theme: themeOverrides,
+}: Props<Route>) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { colors, motion } = theme as Theme;
+  const { bottom, left, right } = useSafeAreaInsets();
+  const compact = compactProp ?? false;
+
+  const reduceMotion = useReduceMotion();
+  const reanimatedReduceMotion = reduceMotion
+    ? ReduceMotion.Always
+    : ReduceMotion.Never;
+
+  /**
+   * Visibility of the navigation bar, visible state is 1 and invisible is 0.
+   */
+  const visible = useSharedValue(1);
+
+  /**
+   * Layout of the navigation bar.
+   */
+  const [layout, onLayout] = useLayout();
+
+  /**
+   * Track whether the keyboard is visible to show and hide the navigation bar.
+   */
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+
+  const handleKeyboardShow = React.useCallback(() => {
+    setKeyboardVisible(true);
+    visible.value = withTiming(0, {
+      // The bar slides out, so accelerate (exit).
+      duration: motion.duration.short3,
+      easing: Easing.bezier(...motion.easing.standardAccelerate),
+      reduceMotion: reanimatedReduceMotion,
+    });
+  }, [motion, reanimatedReduceMotion, visible]);
+
+  const handleKeyboardHide = React.useCallback(() => {
+    visible.value = withTiming(
+      1,
+      {
+        // The bar slides back in, so decelerate (enter).
+        duration: motion.duration.short2,
+        easing: Easing.bezier(...motion.easing.standardDecelerate),
+        reduceMotion: reanimatedReduceMotion,
+      },
+      (finished) => {
+        if (finished) {
+          runOnJS(setKeyboardVisible)(false);
+        }
+      }
+    );
+  }, [motion, reanimatedReduceMotion, visible]);
+
+  // Slide the bar down by its own height when the keyboard hides it.
+  const barAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: (1 - visible.value) * layout.height }],
+  }));
+
+  useIsKeyboardShown({
+    onShow: handleKeyboardShow,
+    onHide: handleKeyboardHide,
+  });
+
+  const eventForIndex = (index: number) => {
+    const event = {
+      route: navigationState.routes[index],
+      defaultPrevented: false,
+      preventDefault: () => {
+        event.defaultPrevented = true;
+      },
+    };
+
+    return event;
+  };
+
+  const { routes } = navigationState;
+
+  const { backgroundColor: customBackground } = (StyleSheet.flatten(style) ||
+    {}) as {
+    elevation?: number;
+    backgroundColor?: ColorValue;
+  };
+
+  const backgroundColor = customBackground || colors.surfaceContainer;
+
+  const activeTintColor = getActiveTintColor({
+    activeColor,
+    theme,
+  });
+
+  const inactiveTintColor = getInactiveTintColor({
+    inactiveColor,
+    theme,
+  });
+
+  const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH;
+  const maxTabBarWidth = maxTabWidth * routes.length;
+
+  const insets = {
+    left: safeAreaInsets?.left ?? left,
+    right: safeAreaInsets?.right ?? right,
+    bottom: safeAreaInsets?.bottom ?? bottom,
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.bar,
+        // When the keyboard hides the bar, slide it down by its own height and
+        // absolutely position it so the content can sit below.
+        keyboardHidesNavigationBar ? barAnimatedStyle : null,
+        keyboardHidesNavigationBar && keyboardVisible ? styles.absolute : null,
+      ]}
+      pointerEvents={
+        layout.measured
+          ? keyboardHidesNavigationBar && keyboardVisible
+            ? 'none'
+            : 'auto'
+          : 'none'
+      }
+      onLayout={onLayout}
+    >
+      <Surface elevation={0} testID={testID} style={style} container>
+        <View
+          style={[styles.barContent, { backgroundColor }]}
+          testID={`${testID}-content`}
+        >
+          <View
+            style={[
+              styles.items,
+              {
+                marginBottom: insets.bottom,
+                marginHorizontal: Math.max(insets.left, insets.right),
+              },
+              compact && {
+                maxWidth: maxTabBarWidth,
+              },
+            ]}
+            accessibilityRole={'tablist'}
+            testID={`${testID}-content-wrapper`}
+          >
+            {routes.map((route, index) => {
+              const focused = navigationState.index === index;
+
+              return (
+                <NavigationBarItem
+                  key={route.key}
+                  route={route}
+                  focused={focused}
+                  labeled={labeled}
+                  variant={variant}
+                  activeTintColor={activeTintColor}
+                  inactiveTintColor={inactiveTintColor}
+                  activeColor={activeColor}
+                  inactiveColor={inactiveColor}
+                  renderIcon={renderIcon}
+                  renderLabel={renderLabel}
+                  renderTouchable={renderTouchable}
+                  getLabelText={getLabelText}
+                  getBadge={getBadge}
+                  getTestID={getTestID}
+                  getAccessibilityLabel={getAccessibilityLabel}
+                  onPress={() => onTabPress(eventForIndex(index))}
+                  onLongPress={() => onTabLongPress?.(eventForIndex(index))}
+                  activeIndicatorStyle={activeIndicatorStyle}
+                  labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+                  theme={theme as Theme}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </Surface>
+    </Animated.View>
+  );
+};
+
+NavigationBar.displayName = 'NavigationBar';
+
+export default NavigationBar;
+
+const styles = StyleSheet.create({
+  bar: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  absolute: {
+    position: 'absolute',
+  },
+  barContent: {
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  items: {
+    flexDirection: 'row',
+    ...(Platform.OS === 'web'
+      ? {
+          width: '100%',
+        }
+      : null),
+  },
+  item: {
+    flex: 1,
+    paddingVertical: 0,
+  },
+  iconContainer: {
+    height: INDICATOR_HEIGHT,
+    width: INDICATOR_HEIGHT,
+    marginTop: 0,
+    marginBottom: ICON_LABEL_GAP,
+    marginHorizontal: 12,
+    alignSelf: 'center',
+    justifyContent: 'center',
+  },
+  iconWrapper: {
+    ...StyleSheet.absoluteFill,
+    top: 4,
+    alignItems: 'center',
+  },
+  labelContainer: {
+    height: 16,
+    paddingBottom: 2,
+  },
+  // eslint-disable-next-line react-native/no-color-literals
+  label: {
+    fontSize: 12,
+    textAlign: 'center',
+    backgroundColor: 'transparent',
+    ...(Platform.OS === 'web'
+      ? {
+          whiteSpace: 'nowrap',
+          alignSelf: 'center',
+        }
+      : null),
+  },
+  badgeContainer: {
+    position: 'absolute',
+    left: 0,
+  },
+  stackedContainer: {
+    height: BAR_HEIGHT,
+    justifyContent: 'center',
+  },
+  noLabelContainer: {
+    height: NO_LABEL_BAR_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  stackedIndicator: {
+    width: INDICATOR_WIDTH,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
+    alignSelf: 'center',
+  },
+  stateLayerWrapper: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stateLayer: {
+    width: INDICATOR_WIDTH,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS,
+  },
+  horizontalContainer: {
+    height: BAR_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  horizontalItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: INDICATOR_HEIGHT,
+    paddingHorizontal: 16,
+  },
+  horizontalIndicator: {
+    borderRadius: INDICATOR_BORDER_RADIUS,
+  },
+  horizontalLabel: {
+    marginLeft: ICON_LABEL_GAP,
+    textAlign: 'center',
+    ...(Platform.OS === 'web'
+      ? {
+          whiteSpace: 'nowrap',
+        }
+      : null),
+  },
+});
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
new file mode 100644
index 0000000000..3567b88e01
--- /dev/null
+++ b/src/components/NavigationBar/index.tsx
@@ -0,0 +1,2 @@
+export { default } from './NavigationBar';
+export type { Props, BaseRoute } from './NavigationBar';
diff --git a/src/components/NavigationBar/tokens.ts b/src/components/NavigationBar/tokens.ts
new file mode 100644
index 0000000000..cdcca922b3
--- /dev/null
+++ b/src/components/NavigationBar/tokens.ts
@@ -0,0 +1,39 @@
+import type { ColorRole, TypescaleKey } from '../../theme/types';
+
+/**
+ * Resolved M3 "flexible navigation bar" spec values.
+ * @see https://m3.material.io/components/navigation-bar/specs
+ */
+
+// Container heights (dp). The flexible navigation bar is shorter than the
+// original navigation bar (which was 80dp).
+export const BAR_HEIGHT = 64;
+export const NO_LABEL_BAR_HEIGHT = 64;
+
+// Active indicator / state-layer pill (dp). Matches the M3 `large` corner (16).
+export const INDICATOR_WIDTH = 64;
+export const INDICATOR_HEIGHT = 32;
+export const INDICATOR_BORDER_RADIUS = 16;
+
+// Icon + spacing (dp).
+export const ICON_SIZE = 24;
+export const ICON_LABEL_GAP = 4;
+
+// Tab width clamps used by the `compact` layout (dp).
+export const MIN_TAB_WIDTH = 96;
+export const MAX_TAB_WIDTH = 168;
+
+export const LABEL_TYPESCALE: TypescaleKey = 'labelMedium';
+
+/**
+ * Color roles per the M3 spec. `activeLabel` is `secondary` (changed from
+ * `onSurface` in Material 3 / Compose Material3 1.4.0).
+ */
+export const colorRoles = {
+  container: 'surfaceContainer',
+  activeIcon: 'onSecondaryContainer',
+  activeIndicator: 'secondaryContainer',
+  activeLabel: 'secondary',
+  inactiveIcon: 'onSurfaceVariant',
+  inactiveLabel: 'onSurfaceVariant',
+} as const satisfies Record<string, ColorRole>;
diff --git a/src/components/BottomNavigation/utils.ts b/src/components/NavigationBar/utils.ts
similarity index 76%
rename from src/components/BottomNavigation/utils.ts
rename to src/components/NavigationBar/utils.ts
index ede88105e4..3e10c84f5e 100644
--- a/src/components/BottomNavigation/utils.ts
+++ b/src/components/NavigationBar/utils.ts
@@ -1,5 +1,6 @@
 import type { ColorValue } from 'react-native';
 
+import { colorRoles } from './tokens';
 import type { InternalTheme, Theme } from '../../types';
 
 export const getActiveTintColor = ({
@@ -13,7 +14,7 @@ export const getActiveTintColor = ({
     return activeColor;
   }
 
-  return (theme as Theme).colors.onSecondaryContainer;
+  return (theme as Theme).colors[colorRoles.activeIcon];
 };
 
 export const getInactiveTintColor = ({
@@ -27,7 +28,7 @@ export const getInactiveTintColor = ({
     return inactiveColor;
   }
 
-  return (theme as Theme).colors.onSurfaceVariant;
+  return (theme as Theme).colors[colorRoles.inactiveIcon];
 };
 
 export const getLabelColor = ({
@@ -46,8 +47,5 @@ export const getLabelColor = ({
     return tintColor;
   }
 
-  if (focused) {
-    return colors.onSurface;
-  }
-  return colors.onSurfaceVariant;
+  return colors[focused ? colorRoles.activeLabel : colorRoles.inactiveLabel];
 };
diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx
index 4effa0b9c0..87450d1abc 100644
--- a/src/components/__tests__/BottomNavigation.test.tsx
+++ b/src/components/__tests__/BottomNavigation.test.tsx
@@ -8,12 +8,13 @@ import { render } from '../../test-utils';
 import { Palette } from '../../theme/tokens';
 import BottomNavigation from '../BottomNavigation/BottomNavigation';
 import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen';
+import Icon from '../Icon';
+import NavigationBar from '../NavigationBar/NavigationBar';
 import {
   getActiveTintColor,
   getInactiveTintColor,
   getLabelColor,
-} from '../BottomNavigation/utils';
-import Icon from '../Icon';
+} from '../NavigationBar/utils';
 
 const styles = StyleSheet.create({
   backgroundColor: {
@@ -33,10 +34,9 @@ const createState = (index: number, length: number) => ({
   })),
 });
 
-it('renders shifting bottom navigation', () => {
+it('renders bottom navigation', () => {
   const tree = render(
     <BottomNavigation
-      shifting
       navigationState={createState(0, 5)}
       onIndexChange={jest.fn()}
       renderScene={({ route }) => route.title}
@@ -49,7 +49,6 @@ it('renders shifting bottom navigation', () => {
 it('renders bottom navigation with scene animation', () => {
   const tree = render(
     <BottomNavigation
-      shifting
       sceneAnimationEnabled
       sceneAnimationType="shifting"
       sceneAnimationEasing={Easing.ease}
@@ -68,7 +67,6 @@ it.skip('sceneAnimationEnabled matches animation requirements', async () => {
 
   const tree = render(
     <BottomNavigation
-      shifting
       sceneAnimationEnabled
       sceneAnimationType="shifting"
       sceneAnimationEasing={ease}
@@ -131,17 +129,18 @@ it('calls onIndexChange', () => {
   const onIndexChange = jest.fn();
   const tree = render(
     <BottomNavigation
-      shifting
       navigationState={createState(0, 5)}
       onIndexChange={onIndexChange}
       renderScene={({ route }) => route.title}
     />
   );
+  // The active scene also renders the route title, so target the last match
+  // (the tab label) to fire the tab press.
   // pressing same index as active navigation state does not call onIndexChange
-  fireEvent(tree.getByText('Route: 0'), 'onPress');
+  fireEvent(tree.getAllByText('Route: 0').at(-1)!, 'onPress');
   expect(onIndexChange).not.toHaveBeenCalled();
 
-  fireEvent(tree.getByText('Route: 1'), 'onPress');
+  fireEvent(tree.getAllByText('Route: 1').at(-1)!, 'onPress');
   expect(onIndexChange).toHaveBeenCalledTimes(1);
 });
 
@@ -151,14 +150,13 @@ it('calls onTabPress', () => {
 
   const tree = render(
     <BottomNavigation
-      shifting
       onTabPress={onTabPress}
       onIndexChange={onIndexChange}
       navigationState={createState(0, 5)}
       renderScene={({ route }) => route.title}
     />
   );
-  fireEvent(tree.getByText('Route: 1'), 'onPress');
+  fireEvent(tree.getAllByText('Route: 1').at(-1)!, 'onPress');
   expect(onTabPress).toHaveBeenCalled();
   expect(onTabPress).toHaveBeenCalledTimes(1);
   expect(onTabPress).toHaveBeenLastCalledWith(
@@ -178,14 +176,13 @@ it('calls onTabLongPress', () => {
 
   const tree = render(
     <BottomNavigation
-      shifting
       onIndexChange={onIndexChange}
       onTabLongPress={onTabLongPress}
       navigationState={createState(0, 5)}
       renderScene={({ route }) => route.title}
     />
   );
-  fireEvent(tree.getByText('Route: 2'), 'onLongPress');
+  fireEvent(tree.getAllByText('Route: 2').at(-1)!, 'onLongPress');
   expect(onTabLongPress).toHaveBeenCalled();
   expect(onTabLongPress).toHaveBeenCalledTimes(1);
   expect(onTabLongPress).toHaveBeenLastCalledWith(
@@ -199,10 +196,9 @@ it('calls onTabLongPress', () => {
   );
 });
 
-it('renders non-shifting bottom navigation', () => {
+it('renders bottom navigation with three tabs', () => {
   const tree = render(
     <BottomNavigation
-      shifting={false}
       navigationState={createState(0, 3)}
       onIndexChange={jest.fn()}
       renderScene={({ route }) => route.title}
@@ -212,29 +208,9 @@ it('renders non-shifting bottom navigation', () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('does not crash when shifting is true and the number of tabs in the navigationState is less than 2', () => {
-  jest.spyOn(console, 'warn').mockImplementation(() => {});
-
-  render(
-    <BottomNavigation
-      shifting={true}
-      navigationState={createState(0, 1)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-    />
-  );
-
-  expect(console.warn).toHaveBeenCalledWith(
-    'BottomNavigation needs at least 2 tabs to run shifting animation'
-  );
-
-  jest.restoreAllMocks();
-});
-
-it('renders custom icon and label in shifting bottom navigation', () => {
+it('renders custom icon and label', () => {
   const tree = render(
     <BottomNavigation
-      shifting
       navigationState={createState(0, 5)}
       onIndexChange={jest.fn()}
       renderScene={({ route }) => route.title}
@@ -252,46 +228,9 @@ it('renders custom icon and label in shifting bottom navigation', () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders custom icon and label in non-shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting={false}
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      renderIcon={({ route, color }) => (
-        <Icon color={color} source={route.unfocusedIcon} size={24} />
-      )}
-      renderLabel={({ route, color }) => (
-        <text color={typeof color === 'string' ? color : undefined}>
-          {route.title}
-        </text>
-      )}
-    />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders custom icon and label with custom colors in shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-      activeColor="#FBF7DB"
-      inactiveColor="#853D4B"
-    />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders custom icon and label with custom colors in non-shifting bottom navigation', () => {
+it('renders with custom active and inactive colors', () => {
   const tree = render(
     <BottomNavigation
-      shifting={false}
       navigationState={createState(0, 3)}
       onIndexChange={jest.fn()}
       renderScene={({ route }) => route.title}
@@ -303,24 +242,9 @@ it('renders custom icon and label with custom colors in non-shifting bottom navi
   expect(tree).toMatchSnapshot();
 });
 
-it('hides labels in shifting bottom navigation', () => {
+it('hides labels when labeled is false', () => {
   const tree = render(
     <BottomNavigation
-      shifting
-      labeled={false}
-      navigationState={createState(0, 3)}
-      onIndexChange={jest.fn()}
-      renderScene={({ route }) => route.title}
-    />
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('hides labels in non-shifting bottom navigation', () => {
-  const tree = render(
-    <BottomNavigation
-      shifting={false}
       labeled={false}
       navigationState={createState(0, 3)}
       onIndexChange={jest.fn()}
@@ -353,7 +277,6 @@ it('should have labelMaxFontSizeMultiplier passed to label', () => {
   const labelMaxFontSizeMultiplier = 2;
   const { getAllByText } = render(
     <BottomNavigation
-      shifting={false}
       labeled={true}
       labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
       navigationState={createState(0, 3)}
@@ -370,7 +293,6 @@ it('should have labelMaxFontSizeMultiplier passed to label', () => {
 it('renders custom background color passed to barStyle property', () => {
   const { getByTestId } = render(
     <BottomNavigation
-      shifting={false}
       labeled={true}
       navigationState={createState(0, 3)}
       onIndexChange={jest.fn()}
@@ -387,7 +309,6 @@ it('renders custom background color passed to barStyle property', () => {
 it('renders a single tab', () => {
   const { queryByTestId } = render(
     <BottomNavigation
-      shifting={false}
       navigationState={createState(0, 1)}
       onIndexChange={jest.fn()}
       renderScene={({ route }) => route.title}
@@ -420,7 +341,6 @@ it('applies maxTabBarWidth styling if compact prop is truthy', () => {
       onIndexChange={jest.fn()}
       renderScene={({ route }) => route.title}
       getLazy={({ route }) => route.key === 'key-2'}
-      shifting={false}
       testID="bottom-navigation"
       compact
     />
@@ -438,7 +358,6 @@ it('does not apply maxTabBarWidth styling if compact prop is falsy', () => {
       onIndexChange={jest.fn()}
       renderScene={({ route }) => route.title}
       getLazy={({ route }) => route.key === 'key-2'}
-      shifting={false}
       testID="bottom-navigation"
       compact={false}
     />
@@ -449,7 +368,7 @@ it('does not apply maxTabBarWidth styling if compact prop is falsy', () => {
   });
 });
 
-it('renders bar content when shifting is enabled', () => {
+it('renders bar content', () => {
   const { getByTestId } = render(
     <BottomNavigation
       navigationState={createState(0, 5)}
@@ -457,14 +376,13 @@ it('renders bar content when shifting is enabled', () => {
       renderScene={({ route }) => route.title}
       getLazy={({ route }) => route.key === 'key-2'}
       testID="bottom-navigation"
-      shifting
     />
   );
 
   expect(getByTestId('bottom-navigation-bar-content')).toBeDefined();
 });
 
-it('does not render legacy ripple overlay when shifting is disabled', () => {
+it('does not render the legacy ripple overlay', () => {
   const { queryByTestId } = render(
     <BottomNavigation
       navigationState={createState(0, 5)}
@@ -472,13 +390,152 @@ it('does not render legacy ripple overlay when shifting is disabled', () => {
       renderScene={({ route }) => route.title}
       getLazy={({ route }) => route.key === 'key-2'}
       testID="bottom-navigation"
-      shifting={false}
     />
   );
 
   expect(queryByTestId('bottom-navigation-bar-content-ripple')).toBeNull();
 });
 
+it('renders tab labels when labeled', () => {
+  const { getAllByText } = render(
+    <NavigationBar
+      navigationState={{
+        index: 0,
+        routes: [
+          { key: 'a', title: 'Alpha', focusedIcon: 'magnify' },
+          { key: 'b', title: 'Beta', focusedIcon: 'camera' },
+        ],
+      }}
+      onTabPress={jest.fn()}
+    />
+  );
+
+  // Each tab renders a single label (no cross-fade layers).
+  expect(getAllByText('Alpha').length).toBeGreaterThan(0);
+  expect(getAllByText('Beta').length).toBeGreaterThan(0);
+});
+
+it('renders the horizontal (flexible) variant', () => {
+  const tree = render(
+    <NavigationBar
+      navigationState={createState(0, 3)}
+      onTabPress={jest.fn()}
+      variant="horizontal"
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('falls back to icon-only when horizontal is combined with labeled=false', () => {
+  const { queryByText } = render(
+    <NavigationBar
+      navigationState={createState(0, 3)}
+      onTabPress={jest.fn()}
+      variant="horizontal"
+      labeled={false}
+    />
+  );
+
+  // `horizontal` is a no-op without labels, so no label text is rendered.
+  expect(queryByText('Route: 0')).toBeNull();
+  expect(queryByText('Route: 1')).toBeNull();
+});
+
+it('renders MD3 state layers on hover, focus and press', () => {
+  const navigationState = {
+    index: 0,
+    routes: [
+      { key: 'a', title: 'Route: 0', focusedIcon: 'magnify', testID: 'tab-a' },
+      { key: 'b', title: 'Route: 1', focusedIcon: 'camera', testID: 'tab-b' },
+    ],
+  };
+
+  const { getByTestId } = render(
+    <NavigationBar navigationState={navigationState} onTabPress={jest.fn()} />
+  );
+
+  const layerOpacity = () =>
+    StyleSheet.flatten(getByTestId('tab-b-state-layer').props.style).opacity;
+
+  // Idle: no visible state layer.
+  expect(layerOpacity()).toBeUndefined();
+
+  // Hovered: 8% state layer.
+  fireEvent(getByTestId('tab-b'), 'hoverIn');
+  expect(layerOpacity()).toBe(0.08);
+  fireEvent(getByTestId('tab-b'), 'hoverOut');
+  expect(layerOpacity()).toBeUndefined();
+
+  // Focused: 10% state layer.
+  fireEvent(getByTestId('tab-b'), 'focus');
+  expect(layerOpacity()).toBe(0.1);
+  fireEvent(getByTestId('tab-b'), 'blur');
+
+  // Pressed: 10% state layer.
+  fireEvent(getByTestId('tab-b'), 'pressIn');
+  expect(layerOpacity()).toBe(0.1);
+  fireEvent(getByTestId('tab-b'), 'pressOut');
+  expect(layerOpacity()).toBeUndefined();
+});
+
+it('colors the focused tab label with secondary and others with onSurfaceVariant', () => {
+  const navigationState = {
+    index: 0,
+    routes: [
+      { key: 'a', title: 'Alpha', focusedIcon: 'magnify' },
+      { key: 'b', title: 'Beta', focusedIcon: 'camera' },
+    ],
+  };
+
+  const { getAllByText } = render(
+    <NavigationBar navigationState={navigationState} onTabPress={jest.fn()} />
+  );
+
+  const colorsOf = (text: string) =>
+    getAllByText(text).map(
+      (node) => StyleSheet.flatten(node.props.style).color
+    );
+
+  expect(colorsOf('Alpha')).toContain(getTheme().colors.secondary);
+  expect(colorsOf('Beta')).toContain(getTheme().colors.onSurfaceVariant);
+});
+
+it('renders the active indicator with the secondaryContainer color', () => {
+  const navigationState = {
+    index: 0,
+    routes: [
+      { key: 'a', title: 'Alpha', focusedIcon: 'magnify', testID: 'tab-a' },
+      { key: 'b', title: 'Beta', focusedIcon: 'camera', testID: 'tab-b' },
+    ],
+  };
+
+  const { getByTestId } = render(
+    <NavigationBar navigationState={navigationState} onTabPress={jest.fn()} />
+  );
+
+  expect(
+    StyleSheet.flatten(getByTestId('tab-a-active-indicator').props.style)
+      .backgroundColor
+  ).toBe(getTheme().colors.secondaryContainer);
+});
+
+it('renders a badge for routes that define one', () => {
+  const navigationState = {
+    index: 0,
+    routes: [
+      { key: 'a', title: 'Alpha', focusedIcon: 'magnify', badge: 3 },
+      { key: 'b', title: 'Beta', focusedIcon: 'camera' },
+    ],
+  };
+
+  const { getByText } = render(
+    <NavigationBar navigationState={navigationState} onTabPress={jest.fn()} />
+  );
+
+  expect(getByText('3')).toBeTruthy();
+});
+
 describe('getActiveTintColor', () => {
   it.each`
     activeColor  | expected
@@ -516,7 +573,7 @@ describe('getLabelColor', () => {
   it.each([
     { tintColor: '#FBF7DB', focused: true, expected: '#FBF7DB' },
     { tintColor: '#853D4B', focused: true, expected: '#853D4B' },
-    { tintColor: undefined, focused: true, expected: Palette.neutral10 },
+    { tintColor: undefined, focused: true, expected: Palette.secondary40 },
     {
       tintColor: undefined,
       focused: false,
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index 7b5d8ad45e..5b8c5cbaeb 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -71,32 +71,25 @@ exports[`allows customizing Route's type via generics 1`] = `
     </View>
   </View>
   <View
-    collapsable={false}
+    onLayout={[Function]}
+    pointerEvents="none"
     style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        null,
+        null,
+      ]
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
           "backgroundColor": "transparent",
-          "flex": undefined,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -106,207 +99,226 @@ exports[`allows customizing Route's type via generics 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar"
+      testID="bottom-navigation-bar-outer-layer"
     >
       <View
         collapsable={false}
         style={
           {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
           }
         }
-        testID="bottom-navigation-bar-content"
+        testID="bottom-navigation-bar"
       >
         <View
-          accessibilityRole="tablist"
           style={
             [
               {
-                "flexDirection": "row",
+                "alignItems": "center",
+                "overflow": "hidden",
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "backgroundColor": "rgba(243, 237, 247, 1)",
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
+          testID="bottom-navigation-bar-content"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
                       "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
                       "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
                     }
-                  }
-                />
-                <View
-                  style={
-                    [
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
                     style={
                       {
-                        "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",
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
                       }
                     }
                   />
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
                     maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       [
                         {
@@ -328,11 +340,10 @@ exports[`allows customizing Route's type via generics 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "rgba(29, 27, 32, 1)",
+                              "color": "rgba(98, 91, 113, 1)",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -347,16 +358,173 @@ exports[`allows customizing Route's type via generics 1`] = `
                     First
                   </Text>
                 </View>
+              </View>
+            </View>
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
+              <View
+                pointerEvents="none"
+                style={
+                  {
+                    "height": 64,
+                    "justifyContent": "center",
+                  }
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
@@ -384,11 +552,10 @@ exports[`allows customizing Route's type via generics 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "rgba(29, 27, 32, 1)",
+                              "color": "rgba(73, 69, 79, 1)",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -400,261 +567,7 @@ exports[`allows customizing Route's type via generics 1`] = `
                       ]
                     }
                   >
-                    First
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Second
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Second
+                    Second
                   </Text>
                 </View>
               </View>
@@ -667,7 +580,7 @@ exports[`allows customizing Route's type via generics 1`] = `
 </View>
 `;
 
-exports[`hides labels in non-shifting bottom navigation 1`] = `
+exports[`hides labels when labeled is false 1`] = `
 <View
   style={
     [
@@ -738,32 +651,25 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
-    collapsable={false}
+    onLayout={[Function]}
+    pointerEvents="none"
     style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        null,
+        null,
+      ]
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
           "backgroundColor": "transparent",
-          "flex": undefined,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -773,630 +679,631 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar"
+      testID="bottom-navigation-bar-outer-layer"
     >
       <View
         collapsable={false}
         style={
           {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
           }
         }
-        testID="bottom-navigation-bar-content"
+        testID="bottom-navigation-bar"
       >
         <View
-          accessibilityRole="tablist"
           style={
             [
               {
-                "flexDirection": "row",
+                "alignItems": "center",
+                "overflow": "hidden",
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "backgroundColor": "rgba(243, 237, 247, 1)",
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
+          testID="bottom-navigation-bar-content"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "alignItems": "center",
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
                       "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
                       "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
+                  />
+                  <View
                     pointerEvents="none"
-                    selectable={false}
                     style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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",
+                        "top": 4,
                       }
                     }
-                  />
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(29, 25, 43, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      magnify
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "alignItems": "center",
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
                         },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      camera
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    camera
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
+              <View
+                pointerEvents="none"
+                style={
+                  {
+                    "alignItems": "center",
+                    "height": 64,
+                    "justifyContent": "center",
+                  }
+                }
+              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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",
+                        "top": 0,
                       }
                     }
-                  />
-                </View>
-              </View>
-            </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
-                        ],
-                      ]
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
                     }
                   >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      inbox
+                    </Text>
+                  </View>
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
                       ]
                     }
                   >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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>
@@ -1408,7 +1315,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
 </View>
 `;
 
-exports[`hides labels in shifting bottom navigation 1`] = `
+exports[`renders bottom navigation 1`] = `
 <View
   style={
     [
@@ -1479,32 +1386,25 @@ exports[`hides labels in shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
-    collapsable={false}
+    onLayout={[Function]}
+    pointerEvents="none"
     style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        null,
+        null,
+      ]
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
           "backgroundColor": "transparent",
-          "flex": undefined,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -1514,630 +1414,1262 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar"
+      testID="bottom-navigation-bar-outer-layer"
     >
       <View
         collapsable={false}
         style={
           {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
           }
         }
-        testID="bottom-navigation-bar-content"
+        testID="bottom-navigation-bar"
       >
         <View
-          accessibilityRole="tablist"
           style={
             [
               {
-                "flexDirection": "row",
+                "alignItems": "center",
+                "overflow": "hidden",
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "backgroundColor": "rgba(243, 237, 247, 1)",
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
+          testID="bottom-navigation-bar-content"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
                       "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
                       "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
                         },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(29, 25, 43, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      magnify
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    magnify
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
+                    maxFontSizeMultiplier={1}
                     selectable={false}
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(98, 91, 113, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    magnify
+                    Route: 0
                   </Text>
                 </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
                         },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      camera
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    camera
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
+                    maxFontSizeMultiplier={1}
                     selectable={false}
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    camera
+                    Route: 1
                   </Text>
                 </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "alignItems": "center",
-                  "height": 80,
-                  "justifyContent": "center",
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      inbox
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    inbox
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
+                    maxFontSizeMultiplier={1}
                     selectable={false}
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    inbox
+                    Route: 2
                   </Text>
                 </View>
+              </View>
+            </View>
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
+              <View
+                pointerEvents="none"
+                style={
+                  {
+                    "height": 64,
+                    "justifyContent": "center",
+                  }
+                }
+              >
                 <View
                   style={
-                    [
+                    {
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      heart
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+                  style={
+                    {
+                      "height": 16,
+                      "paddingBottom": 2,
+                    }
                   }
                 >
                   <Text
-                    collapsable={false}
-                    numberOfLines={1}
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        [
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 3
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
+              <View
+                pointerEvents="none"
+                style={
+                  {
+                    "height": 64,
+                    "justifyContent": "center",
+                  }
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
                     style={
                       {
-                        "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",
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
                       }
                     }
-                  />
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      shopping-music
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+                  style={
+                    {
+                      "height": 16,
+                      "paddingBottom": 2,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        [
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
+                        ],
+                      ]
+                    }
+                  >
+                    Route: 4
+                  </Text>
                 </View>
               </View>
             </View>
@@ -2352,32 +2884,25 @@ exports[`renders bottom navigation with getLazy 1`] = `
     </View>
   </View>
   <View
-    collapsable={false}
+    onLayout={[Function]}
+    pointerEvents="none"
     style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        null,
+        null,
+      ]
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
           "backgroundColor": "transparent",
-          "flex": undefined,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -2387,317 +2912,492 @@ exports[`renders bottom navigation with getLazy 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar"
+      testID="bottom-navigation-bar-outer-layer"
     >
       <View
         collapsable={false}
         style={
           {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
           }
         }
-        testID="bottom-navigation-bar-content"
+        testID="bottom-navigation-bar"
       >
         <View
-          accessibilityRole="tablist"
           style={
             [
               {
-                "flexDirection": "row",
+                "alignItems": "center",
+                "overflow": "hidden",
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "backgroundColor": "rgba(243, 237, 247, 1)",
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
+          testID="bottom-navigation-bar-content"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
                       "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
                       "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
                         },
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(29, 25, 43, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      magnify
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    magnify
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
+                    maxFontSizeMultiplier={1}
                     selectable={false}
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(98, 91, 113, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    magnify
+                    Route: 0
                   </Text>
                 </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "height": 64,
+                    "justifyContent": "center",
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
                         },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
                             },
                             {
-                              "color": "rgba(29, 27, 32, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "backgroundColor": "transparent",
                             },
                           ],
-                        ],
+                        ]
+                      }
+                    >
+                      camera
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    Route: 0
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
@@ -2725,11 +3425,10 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "rgba(29, 27, 32, 1)",
+                              "color": "rgba(73, 69, 79, 1)",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -2741,277 +3440,448 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       ]
                     }
                   >
-                    Route: 0
+                    Route: 1
                   </Text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
                         },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      inbox
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    camera
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
+                    maxFontSizeMultiplier={1}
                     selectable={false}
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    camera
+                    Route: 2
                   </Text>
                 </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "height": 64,
+                    "justifyContent": "center",
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
                         },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "backgroundColor": "transparent",
                             },
                           ],
-                        ],
+                        ]
+                      }
+                    >
+                      heart
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    Route: 1
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
@@ -3039,7 +3909,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
@@ -3055,277 +3924,206 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       ]
                     }
                   >
-                    Route: 1
+                    Route: 3
                   </Text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
+                  />
+                  <View
                     pointerEvents="none"
-                    selectable={false}
                     style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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",
+                        "top": 4,
                       }
                     }
-                  />
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
                         [
                           {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "backgroundColor": "transparent",
                             },
                           ],
-                        ],
+                        ]
+                      }
+                    >
+                      shopping-music
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    Route: 2
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
@@ -3353,7 +4151,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
@@ -3369,277 +4166,362 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       ]
                     }
                   >
-                    Route: 2
+                    Route: 4
                   </Text>
                 </View>
               </View>
             </View>
           </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders bottom navigation with scene animation 1`] = `
+<View
+  style={
+    [
+      {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="bottom-navigation"
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityElementsHidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={true}
+        style={
+          {
+            "flex": 1,
+            "opacity": 1,
+            "transform": [
               {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
+                "translateX": 0,
+              },
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        Route: 0
+      </View>
+    </View>
+  </View>
+  <View
+    onLayout={[Function]}
+    pointerEvents="none"
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+        },
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        }
+      }
+      testID="bottom-navigation-bar-outer-layer"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          }
+        }
+        testID="bottom-navigation-bar"
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "overflow": "hidden",
+              },
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+              },
+            ]
+          }
+          testID="bottom-navigation-bar-content"
+        >
+          <View
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
+                  />
+                  <View
                     pointerEvents="none"
-                    selectable={false}
                     style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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",
+                        "top": 4,
                       }
                     }
-                  />
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
                         [
                           {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "color": "rgba(29, 25, 43, 1)",
+                            "fontSize": 24,
                           },
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "backgroundColor": "transparent",
                             },
                           ],
-                        ],
+                        ]
+                      }
+                    >
+                      magnify
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    Route: 3
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
@@ -3667,11 +4549,10 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
+                              "color": "rgba(98, 91, 113, 1)",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -3683,277 +4564,448 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       ]
                     }
                   >
-                    Route: 3
+                    Route: 0
                   </Text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
                         },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      camera
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    shopping-music
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
+                    maxFontSizeMultiplier={1}
                     selectable={false}
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    shopping-music
+                    Route: 1
                   </Text>
                 </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "height": 64,
+                    "justifyContent": "center",
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
                         },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "backgroundColor": "transparent",
                             },
                           ],
-                        ],
+                        ]
+                      }
+                    >
+                      inbox
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    Route: 4
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
@@ -3981,7 +5033,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
@@ -3997,4662 +5048,454 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       ]
                     }
                   >
-                    Route: 4
+                    Route: 2
                   </Text>
                 </View>
               </View>
             </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders bottom navigation with scene animation 1`] = `
-<View
-  style={
-    [
-      {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(254, 247, 255, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={true}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
-          }
-        }
-        testID="bottom-navigation-bar-content"
-      >
-        <View
-          accessibilityRole="tablist"
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
-              },
-              false,
-            ]
-          }
-          testID="bottom-navigation-bar-content-wrapper"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 0,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(29, 27, 32, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 4
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
-<View
-  style={
-    [
-      {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(254, 247, 255, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
-          }
-        }
-        testID="bottom-navigation-bar-content"
-      >
-        <View
-          accessibilityRole="tablist"
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
-              },
-              false,
-            ]
-          }
-          testID="bottom-navigation-bar-content-wrapper"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <text
-                    color="rgba(29, 27, 32, 1)"
-                  >
-                    Route: 0
-                  </text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <text
-                    color="rgba(29, 27, 32, 1)"
-                  >
-                    Route: 0
-                  </text>
-                </View>
-              </View>
-            </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 1
-                  </text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <text
-                    color="rgba(73, 69, 79, 1)"
-                  >
-                    Route: 2
-                  </text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "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={
-    [
-      {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(254, 247, 255, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
-          }
-        }
-        testID="bottom-navigation-bar-content"
-      >
-        <View
-          accessibilityRole="tablist"
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
-              },
-              false,
-            ]
-          }
-          testID="bottom-navigation-bar-content-wrapper"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 0,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <text
-                    color="rgba(29, 27, 32, 1)"
-                  >
-                    Route: 0
-                  </text>
-                </View>
-              </View>
-            </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "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={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "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={
-    [
-      {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(254, 247, 255, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
-          }
-        }
-        testID="bottom-navigation-bar-content"
-      >
-        <View
-          accessibilityRole="tablist"
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
-              },
-              false,
-            ]
-          }
-          testID="bottom-navigation-bar-content-wrapper"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignSelf": "center",
-                    "height": 32,
-                    "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#853D4B",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#FBF7DB",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "#853D4B",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
-                  >
-                    Route: 2
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`renders custom icon and label with custom colors in shifting bottom navigation 1`] = `
-<View
-  style={
-    [
-      {
-        "flex": 1,
-        "overflow": "hidden",
-      },
-      undefined,
-    ]
-  }
-  testID="bottom-navigation"
->
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(254, 247, 255, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
-        },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
-    }
-    testID="bottom-navigation-bar-outer-layer"
-  >
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
-      style={
-        {
-          "backgroundColor": "transparent",
-          "flex": undefined,
-          "shadowColor": "rgba(0, 0, 0, 1)",
-          "shadowOffset": {
-            "height": 0,
-            "width": 0,
-          },
-          "shadowOpacity": 0,
-          "shadowRadius": 0,
-        }
-      }
-      testID="bottom-navigation-bar"
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
-          }
-        }
-        testID="bottom-navigation-bar-content"
-      >
-        <View
-          accessibilityRole="tablist"
-          style={
-            [
-              {
-                "flexDirection": "row",
-              },
-              {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
-              },
-              false,
-            ]
-          }
-          testID="bottom-navigation-bar-content-wrapper"
-        >
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 0,
-                      },
-                    ],
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
                       "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
                       "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
                         },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
                           },
-                        ],
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      heart
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
                       ]
                     }
                   >
-                    magnify
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
+                    maxFontSizeMultiplier={1}
                     selectable={false}
                     style={
                       [
                         {
-                          "color": "#853D4B",
-                          "fontSize": 24,
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
                         },
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    magnify
+                    Route: 3
                   </Text>
                 </View>
+              </View>
+            </View>
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
+              <View
+                pointerEvents="none"
+                style={
+                  {
+                    "height": 64,
+                    "justifyContent": "center",
+                  }
+                }
+              >
                 <View
                   style={
-                    [
+                    {
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
+                        },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
                     style={
                       {
-                        "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",
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
                       }
                     }
-                  />
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      shopping-music
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
                     maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       [
                         {
@@ -8674,11 +5517,10 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "#FBF7DB",
+                              "color": "rgba(73, 69, 79, 1)",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -8690,232 +5532,368 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       ]
                     }
                   >
-                    Route: 0
+                    Route: 4
                   </Text>
                 </View>
               </View>
             </View>
           </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders bottom navigation with three tabs 1`] = `
+<View
+  style={
+    [
+      {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="bottom-navigation"
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityElementsHidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 1,
+            "transform": [
               {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
+                "translateX": 0,
+              },
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        Route: 0
+      </View>
+    </View>
+  </View>
+  <View
+    onLayout={[Function]}
+    pointerEvents="none"
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+        },
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        }
+      }
+      testID="bottom-navigation-bar-outer-layer"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          }
+        }
+        testID="bottom-navigation-bar"
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "overflow": "hidden",
+              },
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+              },
+            ]
+          }
+          testID="bottom-navigation-bar-content"
+        >
+          <View
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  }
+                >
+                  <View
                     style={
                       [
                         {
-                          "color": "#853D4B",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
                     style={
                       {
-                        "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",
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
                       }
                     }
-                  />
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(29, 25, 43, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      magnify
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
                     maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       [
                         {
@@ -8937,11 +5915,10 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "#FBF7DB",
+                              "color": "rgba(98, 91, 113, 1)",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -8953,232 +5930,454 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       ]
                     }
                   >
-                    Route: 1
+                    Route: 0
                   </Text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "#FBF7DB",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
+                    }
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
                           {
-                            "backgroundColor": "transparent",
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      camera
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+                  style={
+                    {
+                      "height": 16,
+                      "paddingBottom": 2,
+                    }
+                  }
+                >
+                  <Text
+                    maxFontSizeMultiplier={1}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "rgba(29, 27, 32, 1)",
+                          "writingDirection": "ltr",
+                        },
+                        [
+                          {
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
                           },
+                          [
+                            {
+                              "backgroundColor": "transparent",
+                              "fontSize": 12,
+                              "textAlign": "center",
+                            },
+                            {
+                              "color": "rgba(73, 69, 79, 1)",
+                              "fontFamily": "System",
+                              "fontSize": 12,
+                              "fontWeight": "500",
+                              "letterSpacing": 0.5,
+                              "lineHeight": 16,
+                            },
+                          ],
                         ],
                       ]
                     }
                   >
-                    inbox
+                    Route: 1
                   </Text>
                 </View>
+              </View>
+            </View>
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
+              <View
+                pointerEvents="none"
+                style={
+                  {
+                    "height": 64,
+                    "justifyContent": "center",
+                  }
+                }
+              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "#853D4B",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
                     style={
                       {
-                        "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",
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
                       }
                     }
-                  />
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      inbox
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
                     maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       [
                         {
@@ -9200,11 +6399,10 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "#FBF7DB",
+                              "color": "rgba(73, 69, 79, 1)",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -9229,7 +6427,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
 </View>
 `;
 
-exports[`renders non-shifting bottom navigation 1`] = `
+exports[`renders custom icon and label 1`] = `
 <View
   style={
     [
@@ -9300,32 +6498,25 @@ exports[`renders non-shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
-    collapsable={false}
+    onLayout={[Function]}
+    pointerEvents="none"
     style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
-        "shadowColor": "rgba(0, 0, 0, 1)",
-        "shadowOffset": {
-          "height": 0,
-          "width": 0,
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
         },
-        "shadowOpacity": 0,
-        "shadowRadius": 0,
-      }
+        null,
+        null,
+      ]
     }
-    testID="bottom-navigation-bar-outer-layer"
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
           "backgroundColor": "transparent",
-          "flex": undefined,
           "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
@@ -9335,990 +6526,932 @@ exports[`renders non-shifting bottom navigation 1`] = `
           "shadowRadius": 0,
         }
       }
-      testID="bottom-navigation-bar"
+      testID="bottom-navigation-bar-outer-layer"
     >
       <View
         collapsable={false}
         style={
           {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
           }
         }
-        testID="bottom-navigation-bar-content"
+        testID="bottom-navigation-bar"
       >
         <View
-          accessibilityRole="tablist"
           style={
             [
               {
-                "flexDirection": "row",
+                "alignItems": "center",
+                "overflow": "hidden",
               },
               {
-                "marginBottom": 0,
-                "marginHorizontal": 0,
+                "backgroundColor": "rgba(243, 237, 247, 1)",
               },
-              false,
             ]
           }
-          testID="bottom-navigation-bar-content-wrapper"
+          testID="bottom-navigation-bar-content"
         >
           <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": true,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
                       "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
                       "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
-                  }
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    magnify
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
                     style={
                       {
-                        "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",
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
                       }
                     }
                   />
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "left": 0,
+                          "position": "absolute",
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(29, 27, 32, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
                       ]
                     }
                   >
-                    Route: 0
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
-                        },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(29, 27, 32, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
-                      ]
-                    }
+                  <text
+                    color="rgba(98, 91, 113, 1)"
                   >
                     Route: 0
-                  </Text>
+                  </text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
                   >
-                    camera
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
                     }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  />
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
                       ]
                     }
                   >
-                    camera
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
                   style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
+                    {
+                      "height": 16,
+                      "paddingBottom": 2,
+                    }
                   }
                 >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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: 1
+                  </text>
                 </View>
               </View>
+            </View>
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "height": 64,
+                    "justifyContent": "center",
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
+                        {
+                          "opacity": 0,
+                          "transform": [
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "scaleX": 0.5,
                             },
                           ],
-                        ],
+                        },
+                        undefined,
                       ]
                     }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
                   >
-                    Route: 1
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
                     }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
+                  />
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "left": 0,
+                          "position": "absolute",
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
                       ]
                     }
                   >
-                    Route: 1
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+                  style={
+                    {
+                      "height": 16,
+                      "paddingBottom": 2,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 2
+                  </text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
                   >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
                     }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  />
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
                       ]
                     }
                   >
-                    inbox
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
                   style={
-                    [
-                      {
-                        "left": 0,
-                        "position": "absolute",
-                      },
-                      {
-                        "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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",
-                      }
+                    {
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
-                  />
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 3
+                  </text>
                 </View>
               </View>
+            </View>
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "flex": 1,
+                  "paddingVertical": 0,
+                }
+              }
+            >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "height": 16,
-                    "paddingBottom": 2,
+                    "height": 64,
+                    "justifyContent": "center",
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    maxFontSizeMultiplier={1}
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
+                        {
+                          "opacity": 0,
+                          "transform": [
                             {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
+                              "scaleX": 0.5,
                             },
                           ],
-                        ],
+                        },
+                        undefined,
                       ]
                     }
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
                   >
-                    Route: 2
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
+                      }
                     }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    selectable={false}
+                  />
+                  <View
                     style={
                       [
                         {
-                          "textAlign": "left",
+                          "left": 0,
+                          "position": "absolute",
                         },
                         {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "fontFamily": "System",
-                            "fontSize": 12,
-                            "fontWeight": "500",
-                            "letterSpacing": 0.5,
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
-                        ],
                       ]
                     }
                   >
-                    Route: 2
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+                  style={
+                    {
+                      "height": 16,
+                      "paddingBottom": 2,
+                    }
+                  }
+                >
+                  <text
+                    color="rgba(73, 69, 79, 1)"
+                  >
+                    Route: 4
+                  </text>
                 </View>
               </View>
             </View>
@@ -10330,84 +7463,27 @@ exports[`renders non-shifting bottom navigation 1`] = `
 </View>
 `;
 
-exports[`renders shifting bottom navigation 1`] = `
+exports[`renders the horizontal (flexible) variant 1`] = `
 <View
+  onLayout={[Function]}
+  pointerEvents="none"
   style={
     [
       {
-        "flex": 1,
-        "overflow": "hidden",
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
       },
-      undefined,
+      null,
+      null,
     ]
   }
-  testID="bottom-navigation"
 >
-  <View
-    style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "backgroundColor": "rgba(254, 247, 255, 1)",
-        },
-      ]
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      collapsable={false}
-      importantForAccessibility="auto"
-      pointerEvents="auto"
-      removeClippedSubviews={false}
-      style={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1,
-          },
-          {
-            "display": undefined,
-          },
-        ]
-      }
-      testID="RouteScreen: 0"
-    >
-      <View
-        collapsable={false}
-        renderToHardwareTextureAndroid={false}
-        style={
-          {
-            "flex": 1,
-            "opacity": 1,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        Route: 0
-      </View>
-    </View>
-  </View>
   <View
     collapsable={false}
     style={
       {
         "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "right": 0,
         "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
@@ -10421,8 +7497,6 @@ exports[`renders shifting bottom navigation 1`] = `
   >
     <View
       collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="none"
       style={
         {
           "backgroundColor": "transparent",
@@ -10439,13 +7513,16 @@ exports[`renders shifting bottom navigation 1`] = `
       testID="bottom-navigation-bar"
     >
       <View
-        collapsable={false}
         style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "rgba(243, 237, 247, 1)",
-            "overflow": "hidden",
-          }
+          [
+            {
+              "alignItems": "center",
+              "overflow": "hidden",
+            },
+            {
+              "backgroundColor": "rgba(243, 237, 247, 1)",
+            },
+          ]
         }
         testID="bottom-navigation-bar-content"
       >
@@ -10473,7 +7550,221 @@ exports[`renders shifting bottom navigation 1`] = `
                 "checked": undefined,
                 "disabled": undefined,
                 "expanded": undefined,
-                "selected": true,
+                "selected": true,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              {
+                "flex": 1,
+                "paddingVertical": 0,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                {
+                  "alignItems": "center",
+                  "height": 64,
+                  "justifyContent": "center",
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "height": 32,
+                    "justifyContent": "center",
+                    "paddingHorizontal": 16,
+                  }
+                }
+              >
+                <View
+                  style={
+                    [
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                      {
+                        "borderRadius": 16,
+                      },
+                      {
+                        "backgroundColor": "rgba(232, 222, 248, 1)",
+                      },
+                      {
+                        "opacity": 1,
+                        "transform": [
+                          {
+                            "scale": 1,
+                          },
+                        ],
+                      },
+                      undefined,
+                    ]
+                  }
+                />
+                <View
+                  style={
+                    [
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                      {
+                        "borderRadius": 16,
+                      },
+                      null,
+                    ]
+                  }
+                />
+                <View>
+                  <Text
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no-hide-descendants"
+                    pointerEvents="none"
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "rgba(29, 25, 43, 1)",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                            "transform": [
+                              {
+                                "scaleX": 1,
+                              },
+                            ],
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    magnify
+                  </Text>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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>
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "textAlign": "left",
+                      },
+                      {
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
+                      },
+                      [
+                        {
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
+                        },
+                        [
+                          {
+                            "marginLeft": 4,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(98, 91, 113, 1)",
+                            "fontFamily": "System",
+                            "fontSize": 12,
+                            "fontWeight": "500",
+                            "letterSpacing": 0.5,
+                            "lineHeight": 16,
+                          },
+                        ],
+                      ],
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityRole="button"
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={
@@ -10497,76 +7788,79 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "flex": 1,
+                "paddingVertical": 0,
+              }
             }
           >
             <View
               pointerEvents="none"
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignItems": "center",
+                  "height": 64,
+                  "justifyContent": "center",
                 }
               }
             >
               <View
-                collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
+                    "alignItems": "center",
+                    "flexDirection": "row",
                     "height": 32,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 0,
-                      },
-                    ],
-                    "width": 32,
+                    "paddingHorizontal": 16,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
-                    {
-                      "alignSelf": "center",
-                      "backgroundColor": "rgba(232, 222, 248, 1)",
-                      "borderRadius": 16,
-                      "height": 32,
-                      "transform": [
-                        {
-                          "scaleX": 1,
-                        },
-                      ],
-                      "width": 64,
-                    }
+                    [
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                      {
+                        "borderRadius": 16,
+                      },
+                      {
+                        "backgroundColor": "rgba(232, 222, 248, 1)",
+                      },
+                      {
+                        "opacity": 0,
+                        "transform": [
+                          {
+                            "scale": 0.8,
+                          },
+                        ],
+                      },
+                      undefined,
+                    ]
                   }
                 />
                 <View
-                  collapsable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                      {
+                        "borderRadius": 16,
+                      },
+                      null,
+                    ]
                   }
-                >
+                />
+                <View>
                   <Text
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no-hide-descendants"
@@ -10575,7 +7869,7 @@ exports[`renders shifting bottom navigation 1`] = `
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
+                          "color": "rgba(73, 69, 79, 1)",
                           "fontSize": 24,
                         },
                         [
@@ -10594,154 +7888,85 @@ exports[`renders shifting bottom navigation 1`] = `
                       ]
                     }
                   >
-                    magnify
+                    camera
                   </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
                       ]
                     }
                   >
-                    magnify
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "textAlign": "left",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "marginLeft": 4,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(29, 27, 32, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 0
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
               </View>
             </View>
           </View>
@@ -10777,59 +8002,79 @@ exports[`renders shifting bottom navigation 1`] = `
             onResponderTerminationRequest={[Function]}
             onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
-                  "paddingVertical": 0,
-                },
-              ]
+              {
+                "flex": 1,
+                "paddingVertical": 0,
+              }
             }
           >
             <View
               pointerEvents="none"
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "alignItems": "center",
+                  "height": 64,
+                  "justifyContent": "center",
                 }
               }
             >
               <View
-                collapsable={false}
                 style={
                   {
-                    "alignSelf": "center",
+                    "alignItems": "center",
+                    "flexDirection": "row",
                     "height": 32,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
+                    "paddingHorizontal": 16,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
+                    [
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                      {
+                        "borderRadius": 16,
+                      },
+                      {
+                        "backgroundColor": "rgba(232, 222, 248, 1)",
+                      },
+                      {
+                        "opacity": 0,
+                        "transform": [
+                          {
+                            "scale": 0.8,
+                          },
+                        ],
+                      },
+                      undefined,
+                    ]
                   }
-                >
+                />
+                <View
+                  style={
+                    [
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                      {
+                        "borderRadius": 16,
+                      },
+                      null,
+                    ]
+                  }
+                />
+                <View>
                   <Text
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no-hide-descendants"
@@ -10838,7 +8083,7 @@ exports[`renders shifting bottom navigation 1`] = `
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
+                          "color": "rgba(73, 69, 79, 1)",
                           "fontSize": 24,
                         },
                         [
@@ -10857,377 +8102,444 @@ exports[`renders shifting bottom navigation 1`] = `
                       ]
                     }
                   >
-                    camera
+                    inbox
                   </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
                       ]
                     }
                   >
-                    camera
-                  </Text>
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
+                <Text
+                  maxFontSizeMultiplier={1}
+                  selectable={false}
                   style={
                     [
                       {
-                        "left": 0,
-                        "position": "absolute",
+                        "textAlign": "left",
                       },
                       {
-                        "right": 0,
-                        "top": 2,
+                        "color": "rgba(29, 27, 32, 1)",
+                        "writingDirection": "ltr",
                       },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                >
-                  <Text
-                    maxFontSizeMultiplier={1}
-                    style={
                       [
                         {
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "rgba(29, 27, 32, 1)",
-                          "writingDirection": "ltr",
+                          "fontFamily": "System",
+                          "fontSize": 12,
+                          "fontWeight": "500",
+                          "letterSpacing": 0.5,
+                          "lineHeight": 16,
                         },
                         [
                           {
+                            "marginLeft": 4,
+                            "textAlign": "center",
+                          },
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
                             "letterSpacing": 0.5,
                             "lineHeight": 16,
                           },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontSize": 12,
-                              "height": 56,
-                              "textAlign": "center",
-                            },
-                            {
-                              "color": "rgba(73, 69, 79, 1)",
-                              "fontFamily": "System",
-                              "fontSize": 12,
-                              "fontWeight": "500",
-                              "letterSpacing": 0.5,
-                              "lineHeight": 16,
-                            },
-                          ],
                         ],
-                      ]
-                    }
-                  >
-                    Route: 1
-                  </Text>
-                </View>
+                      ],
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
               </View>
             </View>
           </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders with custom active and inactive colors 1`] = `
+<View
+  style={
+    [
+      {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="bottom-navigation"
+>
+  <View
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "backgroundColor": "rgba(254, 247, 255, 1)",
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityElementsHidden={false}
+      collapsable={false}
+      importantForAccessibility="auto"
+      pointerEvents="auto"
+      removeClippedSubviews={false}
+      style={
+        [
+          {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+          {
+            "display": undefined,
+          },
+        ]
+      }
+      testID="RouteScreen: 0"
+    >
+      <View
+        collapsable={false}
+        renderToHardwareTextureAndroid={false}
+        style={
+          {
+            "flex": 1,
+            "opacity": 1,
+            "transform": [
               {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
-              }
-            }
-            accessibilityValue={
+                "translateX": 0,
+              },
+              {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        Route: 0
+      </View>
+    </View>
+  </View>
+  <View
+    onLayout={[Function]}
+    pointerEvents="none"
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+        },
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "transparent",
+          "shadowColor": "rgba(0, 0, 0, 1)",
+          "shadowOffset": {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0,
+          "shadowRadius": 0,
+        }
+      }
+      testID="bottom-navigation-bar-outer-layer"
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "transparent",
+            "flex": undefined,
+            "shadowColor": "rgba(0, 0, 0, 1)",
+            "shadowOffset": {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0,
+            "shadowRadius": 0,
+          }
+        }
+        testID="bottom-navigation-bar"
+      >
+        <View
+          style={
+            [
               {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+                "alignItems": "center",
+                "overflow": "hidden",
+              },
+              {
+                "backgroundColor": "rgba(243, 237, 247, 1)",
+              },
+            ]
+          }
+          testID="bottom-navigation-bar-content"
+        >
+          <View
+            accessibilityRole="tablist"
             style={
               [
                 {
-                  "flex": 1,
-                  "paddingVertical": 6,
+                  "flexDirection": "row",
                 },
                 {
-                  "paddingVertical": 0,
+                  "marginBottom": 0,
+                  "marginHorizontal": 0,
                 },
+                false,
               ]
             }
+            testID="bottom-navigation-bar-content-wrapper"
           >
             <View
-              pointerEvents="none"
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": true,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
+                  "flex": 1,
+                  "paddingVertical": 0,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 1,
+                          "transform": [
+                            {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
+                  />
+                  <View
                     pointerEvents="none"
-                    selectable={false}
                     style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
-                        ],
-                      ]
-                    }
-                  >
-                    inbox
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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",
+                        "top": 4,
                       }
                     }
-                  />
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#FBF7DB",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      magnify
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
                     maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       [
                         {
@@ -11249,11 +8561,10 @@ exports[`renders shifting bottom navigation 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
+                              "color": "#FBF7DB",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -11265,232 +8576,212 @@ exports[`renders shifting bottom navigation 1`] = `
                       ]
                     }
                   >
-                    Route: 2
+                    Route: 0
                   </Text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                >
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    heart
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                  />
+                  <View
+                    pointerEvents="none"
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
+                          },
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
                     style={
                       {
-                        "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",
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 4,
                       }
                     }
-                  />
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#853D4B",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      camera
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
                     maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       [
                         {
@@ -11512,11 +8803,10 @@ exports[`renders shifting bottom navigation 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
+                              "color": "#853D4B",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -11528,232 +8818,212 @@ exports[`renders shifting bottom navigation 1`] = `
                       ]
                     }
                   >
-                    Route: 3
+                    Route: 1
                   </Text>
                 </View>
               </View>
             </View>
-          </View>
-          <View
-            accessibilityRole="button"
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": false,
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": false,
+                }
               }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              [
+              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={
                 {
                   "flex": 1,
-                  "paddingVertical": 6,
-                },
-                {
                   "paddingVertical": 0,
-                },
-              ]
-            }
-          >
-            <View
-              pointerEvents="none"
-              style={
-                {
-                  "paddingBottom": 16,
-                  "paddingTop": 12,
                 }
               }
             >
               <View
-                collapsable={false}
+                pointerEvents="none"
                 style={
                   {
-                    "alignSelf": "center",
-                    "height": 32,
+                    "height": 64,
                     "justifyContent": "center",
-                    "marginBottom": 4,
-                    "marginHorizontal": 12,
-                    "marginTop": 0,
-                    "transform": [
-                      {
-                        "translateY": 7,
-                      },
-                    ],
-                    "width": 32,
                   }
                 }
               >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
+                      "alignSelf": "center",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "marginBottom": 4,
+                      "marginHorizontal": 12,
+                      "marginTop": 0,
+                      "width": 32,
                     }
                   }
                 >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
-                    pointerEvents="none"
-                    selectable={false}
+                  <View
                     style={
                       [
                         {
-                          "color": "rgba(29, 25, 43, 1)",
-                          "fontSize": 24,
+                          "alignSelf": "center",
+                          "borderRadius": 16,
+                          "height": 32,
+                          "width": 64,
                         },
-                        [
-                          {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
-                          },
-                        ],
+                        {
+                          "backgroundColor": "rgba(232, 222, 248, 1)",
+                        },
+                        {
+                          "opacity": 0,
+                          "transform": [
+                            {
+                              "scaleX": 0.5,
+                            },
+                          ],
+                        },
+                        undefined,
                       ]
                     }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  collapsable={false}
-                  style={
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 1,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 4,
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityElementsHidden={true}
-                    importantForAccessibility="no-hide-descendants"
+                  />
+                  <View
                     pointerEvents="none"
-                    selectable={false}
                     style={
-                      [
-                        {
-                          "color": "rgba(73, 69, 79, 1)",
-                          "fontSize": 24,
-                        },
+                      {
+                        "alignItems": "center",
+                        "bottom": 0,
+                        "justifyContent": "center",
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
-                            "transform": [
-                              {
-                                "scaleX": 1,
-                              },
-                            ],
-                          },
-                          {
-                            "backgroundColor": "transparent",
+                            "borderRadius": 16,
+                            "height": 32,
+                            "width": 64,
                           },
-                        ],
-                      ]
-                    }
-                  >
-                    shopping-music
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
+                          null,
+                        ]
+                      }
+                    />
+                  </View>
+                  <View
+                    style={
                       {
+                        "alignItems": "center",
+                        "bottom": 0,
                         "left": 0,
                         "position": "absolute",
-                      },
-                      {
                         "right": 0,
-                        "top": 2,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    collapsable={false}
-                    numberOfLines={1}
-                    style={
-                      {
-                        "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",
+                        "top": 4,
                       }
                     }
-                  />
+                  >
+                    <Text
+                      accessibilityElementsHidden={true}
+                      importantForAccessibility="no-hide-descendants"
+                      pointerEvents="none"
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#853D4B",
+                            "fontSize": 24,
+                          },
+                          [
+                            {
+                              "lineHeight": 24,
+                              "transform": [
+                                {
+                                  "scaleX": 1,
+                                },
+                              ],
+                            },
+                            {
+                              "backgroundColor": "transparent",
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      inbox
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "left": 0,
+                          "position": "absolute",
+                        },
+                        {
+                          "right": 0,
+                          "top": 2,
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      collapsable={false}
+                      numberOfLines={1}
+                      style={
+                        {
+                          "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
-                collapsable={false}
-                style={
-                  {
-                    "height": 16,
-                    "paddingBottom": 2,
-                  }
-                }
-              >
                 <View
-                  collapsable={false}
                   style={
                     {
-                      "bottom": 0,
-                      "left": 0,
-                      "opacity": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "height": 16,
+                      "paddingBottom": 2,
                     }
                   }
                 >
                   <Text
                     maxFontSizeMultiplier={1}
+                    selectable={false}
                     style={
                       [
                         {
@@ -11775,11 +9045,10 @@ exports[`renders shifting bottom navigation 1`] = `
                             {
                               "backgroundColor": "transparent",
                               "fontSize": 12,
-                              "height": 56,
                               "textAlign": "center",
                             },
                             {
-                              "color": "rgba(73, 69, 79, 1)",
+                              "color": "#853D4B",
                               "fontFamily": "System",
                               "fontSize": 12,
                               "fontWeight": "500",
@@ -11791,7 +9060,7 @@ exports[`renders shifting bottom navigation 1`] = `
                       ]
                     }
                   >
-                    Route: 4
+                    Route: 2
                   </Text>
                 </View>
               </View>
diff --git a/src/index.tsx b/src/index.tsx
index 8863e2fa20..3bc5390de0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -37,6 +37,7 @@ export { default as Icon } from './components/Icon';
 export { default as IconButton } from './components/IconButton/IconButton';
 export { default as Menu } from './components/Menu/Menu';
 export { default as Modal } from './components/Modal';
+export { default as NavigationBar } from './components/NavigationBar';
 export { default as Portal } from './components/Portal/Portal';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as RadioButton } from './components/RadioButton';
@@ -115,6 +116,10 @@ export type { Props as ListSubheaderProps } from './components/List/ListSubheade
 export type { Props as MenuProps } from './components/Menu/Menu';
 export type { Props as MenuItemProps } from './components/Menu/MenuItem';
 export type { Props as ModalProps } from './components/Modal';
+export type {
+  Props as NavigationBarProps,
+  BaseRoute as NavigationBarRoute,
+} from './components/NavigationBar';
 export type { Props as PortalProps } from './components/Portal/Portal';
 export type { Props as PortalHostProps } from './components/Portal/PortalHost';
 export type { Props as ProgressBarProps } from './components/ProgressBar';