diff --git a/src/components/BottomNavigation.js b/src/components/BottomNavigation.js
index 953f930..29552ff 100644
--- a/src/components/BottomNavigation.js
+++ b/src/components/BottomNavigation.js
@@ -9,6 +9,7 @@ import {
   SafeAreaView,
   StyleSheet,
   Platform,
+  Keyboard,
 } from 'react-native';
 import { polyfill } from 'react-lifecycles-compat';
 import color from 'color';
@@ -168,6 +169,11 @@ type Props<T> = {
    * 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,
   /**
    * Style for the bottom navigation bar.
    * You can set a bottom padding here if you have a translucent navigation bar on Android:
@@ -185,6 +191,10 @@ type Props<T> = {
 };
 
 type State = {
+  /**
+   * Visibility of the navigation bar, visible state is 1 and invisible is 0.
+   */
+  visible: Animated.Value,
   /**
    * Active state of individual tab items, active state is 1 and inactve state is 0.
    */
@@ -205,7 +215,7 @@ type State = {
    */
   ripple: Animated.Value,
   /**
-   * Layout of the tab bar. The width is used to determine the size and position of the ripple.
+   * Layout of the navigation bar. The width is used to determine the size and position of the ripple.
    */
   layout: { height: number, width: number, measured: boolean },
   /**
@@ -220,6 +230,10 @@ type State = {
    * List of loaded tabs, tabs will be loaded when navigated to.
    */
   loaded: number[],
+  /**
+   * Trak whether the keyboard is visible to show and hide the navigation bar.
+   */
+  keyboard: boolean,
 };
 
 const MIN_RIPPLE_SCALE = 0.001; // Minimum scale is not 0 due to bug with animation
@@ -245,7 +259,7 @@ class SceneComponent extends React.PureComponent<*> {
 }
 
 /**
- * Bottom navigation provides quick navigation between top-level views of an app with a bottom tab bar.
+ * Bottom navigation provides quick navigation between top-level views of an app with a bottom navigation bar.
  * It is primarily designed for use on mobile.
  *
  * For integration with React Navigation, you can use [react-navigation-material-bottom-tab-navigator](https://github.com/react-navigation/react-navigation-material-bottom-tab-navigator).
@@ -319,6 +333,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
 
   static defaultProps = {
     labeled: true,
+    keyboardHidesNavigationBar: true,
   };
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -362,6 +377,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
     const { index } = this.props.navigationState;
 
     this.state = {
+      visible: new Animated.Value(1),
       tabs: [],
       offsets: [],
       index: new Animated.Value(index),
@@ -371,6 +387,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
       current: index,
       previous: 0,
       loaded: [index],
+      keyboard: false,
     };
   }
 
@@ -378,6 +395,14 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
     // Workaround for native animated bug in react-native@^0.57
     // Context: https://github.com/callstack/react-native-paper/pull/637
     this._animateToCurrentIndex();
+
+    if (Platform.OS === 'ios') {
+      Keyboard.addListener('keyboardWillShow', this._handleKeyboardShow);
+      Keyboard.addListener('keyboardWillHide', this._handleKeyboardHide);
+    } else {
+      Keyboard.addListener('keyboardDidShow', this._handleKeyboardShow);
+      Keyboard.addListener('keyboardDidHide', this._handleKeyboardHide);
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -398,6 +423,34 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
     this._animateToCurrentIndex();
   }
 
+  componentWillUnmount() {
+    if (Platform.OS === 'ios') {
+      Keyboard.removeListener('keyboardWillShow', this._handleKeyboardShow);
+      Keyboard.removeListener('keyboardWillHide', this._handleKeyboardHide);
+    } else {
+      Keyboard.removeListener('keyboardDidShow', this._handleKeyboardShow);
+      Keyboard.removeListener('keyboardDidHide', this._handleKeyboardHide);
+    }
+  }
+
+  _handleKeyboardShow = () =>
+    this.setState({ keyboard: true }, () =>
+      Animated.timing(this.state.visible, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }).start()
+    );
+
+  _handleKeyboardHide = () =>
+    Animated.timing(this.state.visible, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start(() => {
+      this.setState({ keyboard: false });
+    });
+
   _animateToCurrentIndex = () => {
     const shifting = this._isShifting();
     const { routes, index } = this.props.navigationState;
@@ -488,11 +541,13 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
       getTestID = ({ route }: Object) => route.testID,
       activeColor,
       inactiveColor,
+      keyboardHidesNavigationBar,
       barStyle,
       labeled,
       style,
       theme,
     } = this.props;
+
     const { layout, loaded } = this.state;
     const { routes } = navigationState;
     const { colors } = theme;
@@ -539,7 +594,6 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
     return (
       <View
         style={[styles.container, style]}
-        onLayout={this._handleLayout}
         pointerEvents={layout.measured ? 'auto' : 'none'}
       >
         <View style={[styles.content, { backgroundColor: colors.background }]}>
@@ -583,209 +637,233 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
             );
           })}
         </View>
-        <Surface style={[styles.bar, barStyle, { backgroundColor }]}>
-          <SafeAreaView
-            style={[styles.items, { maxWidth: maxTabWidth * routes.length }]}
-          >
-            {shifting ? (
-              <Animated.View
-                pointerEvents="none"
-                style={[
-                  styles.ripple,
-                  {
-                    // Since we have a single ripple, we have to reposition it so that it appears to expand from active tab.
-                    // We need to move it from the top to center of the tab bar and from the left to the active tab.
-                    top: BAR_HEIGHT / 2 - layout.width / 8,
-                    left:
-                      navigationState.index * tabWidth +
-                      tabWidth / 2 -
-                      layout.width / 8,
-                    height: layout.width / 4,
-                    width: layout.width / 4,
-                    borderRadius: layout.width / 2,
-                    backgroundColor: getColor({
-                      route: routes[navigationState.index],
-                    }),
-                    transform: [
-                      {
-                        // Scale to twice the size  to ensure it covers the whole tab bar
-                        scale: this.state.ripple.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: [0, 8],
-                        }),
-                      },
-                    ],
-                    opacity: this.state.ripple.interpolate({
-                      inputRange: [0, MIN_RIPPLE_SCALE, 0.3, 1],
-                      outputRange: [0, 0, 1, 1],
-                    }),
-                  },
-                ]}
-              />
-            ) : null}
-            {routes.map((route, index) => {
-              const focused = navigationState.index === index;
-              const active = this.state.tabs[index];
+        <Surface
+          style={[
+            styles.bar,
+            keyboardHidesNavigationBar
+              ? {
+                  // When the keyboard is shown, slide down the navigation bar
+                  transform: [
+                    {
+                      translateY: this.state.visible.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [this.state.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: this.state.keyboard ? 'absolute' : null,
+                }
+              : null,
+            barStyle,
+          ]}
+          pointerEvents={
+            keyboardHidesNavigationBar && this.state.keyboard ? 'none' : 'auto'
+          }
+          onLayout={this._handleLayout}
+        >
+          <Animated.View style={[styles.barContent, { backgroundColor }]}>
+            <SafeAreaView
+              style={[styles.items, { maxWidth: maxTabWidth * routes.length }]}
+            >
+              {shifting ? (
+                <Animated.View
+                  pointerEvents="none"
+                  style={[
+                    styles.ripple,
+                    {
+                      // Since we have a single ripple, we have to reposition it so that it appears to expand from active tab.
+                      // We need to move it from the top to center of the navigation bar and from the left to the active tab.
+                      top: BAR_HEIGHT / 2 - layout.width / 8,
+                      left:
+                        navigationState.index * tabWidth +
+                        tabWidth / 2 -
+                        layout.width / 8,
+                      height: layout.width / 4,
+                      width: layout.width / 4,
+                      borderRadius: layout.width / 2,
+                      backgroundColor: getColor({
+                        route: routes[navigationState.index],
+                      }),
+                      transform: [
+                        {
+                          // Scale to twice the size  to ensure it covers the whole navigation bar
+                          scale: this.state.ripple.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0, 8],
+                          }),
+                        },
+                      ],
+                      opacity: this.state.ripple.interpolate({
+                        inputRange: [0, MIN_RIPPLE_SCALE, 0.3, 1],
+                        outputRange: [0, 0, 1, 1],
+                      }),
+                    },
+                  ]}
+                />
+              ) : null}
+              {routes.map((route, index) => {
+                const focused = navigationState.index === index;
+                const active = this.state.tabs[index];
 
-              // Scale up in the label
-              const scale =
-                labeled && shifting
-                  ? active.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [0.5, 1],
-                    })
-                  : 1;
+                // Scale the label up
+                const scale =
+                  labeled && shifting
+                    ? active.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0.5, 1],
+                      })
+                    : 1;
 
-              // 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;
+                // 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],
-              });
+                // 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],
+                });
 
-              return (
-                <Touchable
-                  key={route.key}
-                  borderless
-                  rippleColor={touchColor}
-                  onPress={() => this._handleTabPress(index)}
-                  testID={getTestID({ route })}
-                  accessibilityLabel={getAccessibilityLabel({ route })}
-                  accessibilityTraits={
-                    focused ? ['button', 'selected'] : 'button'
-                  }
-                  accessibilityComponentType="button"
-                  accessibilityRole="button"
-                  accessibilityStates={['selected']}
-                  style={styles.item}
-                >
-                  <View pointerEvents="none">
-                    <Animated.View
-                      style={[
-                        styles.iconContainer,
-                        { transform: [{ translateY }] },
-                      ]}
-                    >
-                      <Animated.View
-                        style={[styles.iconWrapper, { opacity: activeOpacity }]}
-                      >
-                        {renderIcon ? (
-                          renderIcon({
-                            route,
-                            focused: true,
-                            color: activeTintColor,
-                          })
-                        ) : (
-                          <Icon
-                            source={(route: Object).icon}
-                            color={activeTintColor}
-                            size={24}
-                          />
-                        )}
-                      </Animated.View>
+                return (
+                  <Touchable
+                    key={route.key}
+                    borderless
+                    rippleColor={touchColor}
+                    onPress={() => this._handleTabPress(index)}
+                    testID={getTestID({ route })}
+                    accessibilityLabel={getAccessibilityLabel({ route })}
+                    accessibilityTraits={
+                      focused ? ['button', 'selected'] : 'button'
+                    }
+                    accessibilityComponentType="button"
+                    accessibilityRole="button"
+                    accessibilityStates={['selected']}
+                    style={styles.item}
+                  >
+                    <View pointerEvents="none">
                       <Animated.View
                         style={[
-                          styles.iconWrapper,
-                          { opacity: inactiveOpacity },
-                        ]}
-                      >
-                        {renderIcon ? (
-                          renderIcon({
-                            route,
-                            focused: false,
-                            color: inactiveTintColor,
-                          })
-                        ) : (
-                          <Icon
-                            source={(route: Object).icon}
-                            color={inactiveTintColor}
-                            size={24}
-                          />
-                        )}
-                      </Animated.View>
-                    </Animated.View>
-                    {labeled ? (
-                      <Animated.View
-                        style={[
-                          styles.labelContainer,
-                          {
-                            transform: [{ scale }],
-                          },
+                          styles.iconContainer,
+                          { transform: [{ translateY }] },
                         ]}
                       >
                         <Animated.View
                           style={[
-                            styles.labelWrapper,
+                            styles.iconWrapper,
                             { opacity: activeOpacity },
                           ]}
                         >
-                          {renderLabel ? (
-                            renderLabel({
+                          {renderIcon ? (
+                            renderIcon({
                               route,
                               focused: true,
                               color: activeTintColor,
                             })
                           ) : (
-                            <AnimatedText
-                              style={[
-                                styles.label,
-                                {
-                                  color: activeTintColor,
-                                },
-                              ]}
-                            >
-                              {getLabelText({ route })}
-                            </AnimatedText>
+                            <Icon
+                              source={(route: Object).icon}
+                              color={activeTintColor}
+                              size={24}
+                            />
                           )}
                         </Animated.View>
-                        {shifting ? null : (
+                        <Animated.View
+                          style={[
+                            styles.iconWrapper,
+                            { opacity: inactiveOpacity },
+                          ]}
+                        >
+                          {renderIcon ? (
+                            renderIcon({
+                              route,
+                              focused: false,
+                              color: inactiveTintColor,
+                            })
+                          ) : (
+                            <Icon
+                              source={(route: Object).icon}
+                              color={inactiveTintColor}
+                              size={24}
+                            />
+                          )}
+                        </Animated.View>
+                      </Animated.View>
+                      {labeled ? (
+                        <Animated.View
+                          style={[
+                            styles.labelContainer,
+                            { transform: [{ scale }] },
+                          ]}
+                        >
                           <Animated.View
                             style={[
                               styles.labelWrapper,
-                              { opacity: inactiveOpacity },
+                              { opacity: activeOpacity },
                             ]}
                           >
                             {renderLabel ? (
                               renderLabel({
                                 route,
-                                focused: false,
-                                color: inactiveTintColor,
+                                focused: true,
+                                color: activeTintColor,
                               })
                             ) : (
                               <AnimatedText
                                 style={[
                                   styles.label,
-                                  {
-                                    color: inactiveTintColor,
-                                  },
+                                  { color: activeTintColor },
                                 ]}
                               >
                                 {getLabelText({ route })}
                               </AnimatedText>
                             )}
                           </Animated.View>
-                        )}
-                      </Animated.View>
-                    ) : (
-                      <View style={styles.labelContainer} />
-                    )}
-                  </View>
-                </Touchable>
-              );
-            })}
-          </SafeAreaView>
+                          {shifting ? null : (
+                            <Animated.View
+                              style={[
+                                styles.labelWrapper,
+                                { opacity: inactiveOpacity },
+                              ]}
+                            >
+                              {renderLabel ? (
+                                renderLabel({
+                                  route,
+                                  focused: false,
+                                  color: inactiveTintColor,
+                                })
+                              ) : (
+                                <AnimatedText
+                                  style={[
+                                    styles.label,
+                                    { color: inactiveTintColor },
+                                  ]}
+                                >
+                                  {getLabelText({ route })}
+                                </AnimatedText>
+                              )}
+                            </Animated.View>
+                          )}
+                        </Animated.View>
+                      ) : (
+                        <View style={styles.labelContainer} />
+                      )}
+                    </View>
+                  </Touchable>
+                );
+              })}
+            </SafeAreaView>
+          </Animated.View>
         </Surface>
       </View>
     );
@@ -804,9 +882,13 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   bar: {
+    left: 0,
+    right: 0,
+    bottom: 0,
     elevation: 8,
+  },
+  barContent: {
     overflow: 'hidden',
-    alignItems: 'center',
   },
   items: {
     flexDirection: 'row',
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 5b8bb72..9a624df 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -2,7 +2,6 @@
 
 exports[`hides labels in non-shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -55,12 +54,16 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "#6200ee",
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -68,481 +71,494 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 504,
-          },
-        ]
+        Object {
+          "backgroundColor": "#6200ee",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      <RCTSafeAreaView
         style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
-          pointerEvents="none"
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
+          }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                
-              </Text>
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
             </View>
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
+            />
           </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-              }
-            }
-          />
         </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
-        }
-      >
         <View
-          pointerEvents="none"
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                
-              </Text>
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
             </View>
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
+            />
           </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-              }
-            }
-          />
         </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
-        }
-      >
         <View
-          pointerEvents="none"
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                
-              </Text>
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
             </View>
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
                 }
               }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
+            />
           </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-              }
-            }
-          />
         </View>
-      </View>
-    </RCTSafeAreaView>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
 
 exports[`hides labels in shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -595,12 +611,16 @@ exports[`hides labels in shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "rgba(98, 0, 238, 1)",
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -608,501 +628,514 @@ exports[`hides labels in shifting bottom navigation 1`] = `
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 504,
-          },
-        ]
+        Object {
+          "backgroundColor": "rgba(98, 0, 238, 1)",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        pointerEvents="none"
+      <RCTSafeAreaView
         style={
-          Object {
-            "backgroundColor": undefined,
-            "borderRadius": 0,
-            "height": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "top": 28,
-            "transform": Array [
-              Object {
-                "scale": 0.008,
-              },
-            ],
-            "width": 0,
-          }
-        }
-      />
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
           Array [
-            "selected",
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 504,
+            },
           ]
         }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
-        }
       >
         <View
           pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
+          style={
+            Object {
+              "backgroundColor": undefined,
+              "borderRadius": 0,
+              "height": 0,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "top": 28,
+              "transform": Array [
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-              }
+                  "scale": 0.008,
+                },
+              ],
+              "width": 0,
             }
-          />
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
           }
-        }
-      >
+        />
         <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-              }
-            }
-          />
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
+          }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
           }
-        }
-      >
-        <View
-          pointerEvents="none"
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                
-              </Text>
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
             </View>
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            />
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                
-              </Text>
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
             </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
               }
-            }
-          />
+            />
+          </View>
         </View>
-      </View>
-    </RCTSafeAreaView>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                }
+              }
+            />
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
 
 exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -1155,12 +1188,16 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "#6200ee",
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -1168,421 +1205,434 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 504,
-          },
-        ]
+        Object {
+          "backgroundColor": "#6200ee",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      <RCTSafeAreaView
         style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="#ffffff"
-              >
-                3d-rotation
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                3d-rotation
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="#ffffff"
-              />
-            </View>
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="rgba(255, 255, 255, 0.5)"
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
           }
-        }
-      >
-        <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="#ffffff"
-              >
-                ac-unit
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                ac-unit
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="#ffffff"
-              />
-            </View>
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="rgba(255, 255, 255, 0.5)"
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
+          }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
           }
-        }
-      >
-        <View
-          pointerEvents="none"
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <icon
-                color="#ffffff"
-              >
-                access-alarm
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                access-alarm
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
+              <View
+                style={
                   Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
-              }
-            >
-              <text
-                color="#ffffff"
-              />
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  3d-rotation
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  3d-rotation
+                </icon>
+              </View>
             </View>
             <View
               style={
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
                 }
               }
             >
-              <text
-                color="rgba(255, 255, 255, 0.5)"
-              />
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="rgba(255, 255, 255, 0.5)"
+                />
+              </View>
             </View>
           </View>
         </View>
-      </View>
-    </RCTSafeAreaView>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  ac-unit
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  ac-unit
+                </icon>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="rgba(255, 255, 255, 0.5)"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  access-alarm
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  access-alarm
+                </icon>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="rgba(255, 255, 255, 0.5)"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
 
 exports[`renders custom icon and label in shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -1635,12 +1685,16 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "rgba(98, 0, 238, 1)",
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -1648,619 +1702,632 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 480,
-          },
-        ]
+        Object {
+          "backgroundColor": "rgba(98, 0, 238, 1)",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        pointerEvents="none"
+      <RCTSafeAreaView
         style={
-          Object {
-            "backgroundColor": undefined,
-            "borderRadius": 0,
-            "height": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "top": 28,
-            "transform": Array [
-              Object {
-                "scale": 0.008,
-              },
-            ],
-            "width": 0,
-          }
-        }
-      />
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
           Array [
-            "selected",
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 480,
+            },
           ]
         }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
-        }
       >
         <View
           pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
+          style={
+            Object {
+              "backgroundColor": undefined,
+              "borderRadius": 0,
+              "height": 0,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "top": 28,
+              "transform": Array [
+                Object {
+                  "scale": 0.008,
+                },
+              ],
+              "width": 0,
             }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="#ffffff"
-              >
-                3d-rotation
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                3d-rotation
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="#ffffff"
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
           }
-        }
-      >
+        />
         <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="#ffffff"
-              >
-                ac-unit
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                ac-unit
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="#ffffff"
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
           }
-        }
-      >
-        <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="#ffffff"
-              >
-                access-alarm
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                access-alarm
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="#ffffff"
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
           }
-        }
-      >
-        <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
             }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="#ffffff"
-              >
-                access-alarms
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                access-alarms
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <text
-                color="#ffffff"
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
           }
-        }
-      >
-        <View
-          pointerEvents="none"
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <icon
-                color="#ffffff"
-              >
-                access-time
-              </icon>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <icon
-                color="rgba(255, 255, 255, 0.5)"
-              >
-                access-time
-              </icon>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
+              <View
+                style={
                   Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  3d-rotation
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  3d-rotation
+                </icon>
+              </View>
+            </View>
             <View
               style={
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
                 }
               }
             >
-              <text
-                color="#ffffff"
-              />
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
             </View>
           </View>
         </View>
-      </View>
-    </RCTSafeAreaView>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  ac-unit
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  ac-unit
+                </icon>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  access-alarm
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  access-alarm
+                </icon>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  access-alarms
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  access-alarms
+                </icon>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="#ffffff"
+                >
+                  access-time
+                </icon>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <icon
+                  color="rgba(255, 255, 255, 0.5)"
+                >
+                  access-time
+                </icon>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <text
+                  color="#ffffff"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
 
 exports[`renders custom icon and label with custom colors in non-shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -2313,12 +2380,16 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
         "backgroundColor": "#E96A82",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -2326,697 +2397,710 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 504,
-          },
-        ]
+        Object {
+          "backgroundColor": "#E96A82",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      <RCTSafeAreaView
         style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#FBF7DB",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#853D4B",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#FBF7DB",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 0
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#853D4B",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 0
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
           }
-        }
-      >
-        <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#FBF7DB",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#853D4B",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#FBF7DB",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 1
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#853D4B",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 1
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
+          }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
           }
-        }
-      >
-        <View
-          pointerEvents="none"
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#FBF7DB",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#853D4B",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
                   Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#FBF7DB",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                Route: 2
-              </Text>
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
             </View>
             <View
               style={
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
                 }
               }
             >
-              <Text
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#853D4B",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                Route: 2
-              </Text>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#FBF7DB",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#853D4B",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
             </View>
           </View>
         </View>
-      </View>
-    </RCTSafeAreaView>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#FBF7DB",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#853D4B",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#FBF7DB",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#853D4B",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
 
 exports[`renders custom icon and label with custom colors in shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -3069,12 +3153,16 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "rgba(233, 106, 130, 1)",
+        "backgroundColor": "#E96A82",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -3082,618 +3170,631 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 504,
-          },
-        ]
+        Object {
+          "backgroundColor": "rgba(233, 106, 130, 1)",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        pointerEvents="none"
+      <RCTSafeAreaView
         style={
-          Object {
-            "backgroundColor": undefined,
-            "borderRadius": 0,
-            "height": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "top": 28,
-            "transform": Array [
-              Object {
-                "scale": 0.008,
-              },
-            ],
-            "width": 0,
-          }
-        }
-      />
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
           Array [
-            "selected",
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 504,
+            },
           ]
         }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
-        }
       >
         <View
           pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
+          style={
+            Object {
+              "backgroundColor": undefined,
+              "borderRadius": 0,
+              "height": 0,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "top": 28,
+              "transform": Array [
+                Object {
+                  "scale": 0.008,
+                },
+              ],
+              "width": 0,
             }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#FBF7DB",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#853D4B",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#FBF7DB",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 0
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
           }
-        }
-      >
+        />
         <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#FBF7DB",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#853D4B",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#FBF7DB",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 1
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
+          }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
           }
-        }
-      >
-        <View
-          pointerEvents="none"
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#FBF7DB",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#853D4B",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
                   Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
             <View
               style={
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
                 }
               }
             >
-              <Text
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#FBF7DB",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                Route: 2
-              </Text>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#FBF7DB",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
             </View>
           </View>
         </View>
-      </View>
-    </RCTSafeAreaView>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#FBF7DB",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#FBF7DB",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#853D4B",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#FBF7DB",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
 
 exports[`renders non-shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -3746,12 +3847,16 @@ exports[`renders non-shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "#6200ee",
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -3759,697 +3864,710 @@ exports[`renders non-shifting bottom navigation 1`] = `
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 504,
-          },
-        ]
+        Object {
+          "backgroundColor": "#6200ee",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      <RCTSafeAreaView
         style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 504,
+            },
+          ]
         }
       >
         <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 0
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 0
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
           }
-        }
-      >
-        <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 1
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 1
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
+          }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
           }
-        }
-      >
-        <View
-          pointerEvents="none"
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
                   Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                Route: 2
-              </Text>
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
             </View>
             <View
               style={
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
                 }
               }
             >
-              <Text
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                Route: 2
-              </Text>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
             </View>
           </View>
         </View>
-      </View>
-    </RCTSafeAreaView>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
 
 exports[`renders shifting bottom navigation 1`] = `
 <View
-  onLayout={[Function]}
   pointerEvents="none"
   style={
     Array [
@@ -4502,12 +4620,16 @@ exports[`renders shifting bottom navigation 1`] = `
     </View>
   </View>
   <View
+    onLayout={[Function]}
+    pointerEvents="auto"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "rgba(98, 0, 238, 1)",
+        "backgroundColor": "#ffffff",
+        "bottom": 0,
         "elevation": 8,
-        "overflow": "hidden",
+        "left": 0,
+        "position": null,
+        "right": 0,
         "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 7,
@@ -4515,987 +4637,1001 @@ exports[`renders shifting bottom navigation 1`] = `
         },
         "shadowOpacity": 0.24,
         "shadowRadius": 8,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "maxWidth": 480,
-          },
-        ]
+        Object {
+          "backgroundColor": "rgba(98, 0, 238, 1)",
+          "overflow": "hidden",
+        }
       }
     >
-      <View
-        pointerEvents="none"
+      <RCTSafeAreaView
         style={
-          Object {
-            "backgroundColor": undefined,
-            "borderRadius": 0,
-            "height": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "top": 28,
-            "transform": Array [
-              Object {
-                "scale": 0.008,
-              },
-            ],
-            "width": 0,
-          }
-        }
-      />
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
           Array [
-            "selected",
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "maxWidth": 480,
+            },
           ]
         }
-        accessibilityTraits={
-          Array [
-            "button",
-            "selected",
-          ]
-        }
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
-          }
-        }
       >
         <View
           pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                ],
-                "width": 24,
-              }
+          style={
+            Object {
+              "backgroundColor": undefined,
+              "borderRadius": 0,
+              "height": 0,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "top": 28,
+              "transform": Array [
+                Object {
+                  "scale": 0.008,
+                },
+              ],
+              "width": 0,
             }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 1,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 0
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
           }
-        }
-      >
+        />
         <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 1
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
           }
-        }
-      >
-        <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 2
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
+          accessibilityTraits={
+            Array [
+              "button",
+              "selected",
+            ]
           }
-        }
-      >
-        <View
-          pointerEvents="none"
-        >
-          <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
             }
-          >
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
-                  Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
-                }
-              >
-                Route: 3
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityStates={
-          Array [
-            "selected",
-          ]
-        }
-        accessibilityTraits="button"
-        accessible={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "flex": 1,
-            "paddingVertical": 6,
           }
-        }
-      >
-        <View
-          pointerEvents="none"
         >
           <View
-            style={
-              Object {
-                "alignSelf": "center",
-                "height": 24,
-                "marginHorizontal": 12,
-                "marginTop": 2,
-                "transform": Array [
-                  Object {
-                    "translateY": 7,
-                  },
-                ],
-                "width": 24,
-              }
-            }
+            pointerEvents="none"
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": 24,
                 }
               }
             >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-            <View
-              style={
-                Object {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                allowFontScaling={false}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "color": "rgba(255, 255, 255, 0.5)",
-                      "fontSize": 24,
-                    },
-                    Array [
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scaleX": 1,
-                          },
-                        ],
-                      },
-                      Object {
-                        "backgroundColor": "transparent",
-                      },
-                    ],
-                    Object {
-                      "fontFamily": "Material Icons",
-                      "fontStyle": "normal",
-                      "fontWeight": "normal",
-                    },
-                    Object {},
-                  ]
-                }
-              >
-                
-              </Text>
-            </View>
-          </View>
-          <View
-            style={
-              Object {
-                "height": 16,
-                "paddingBottom": 2,
-                "transform": Array [
                   Object {
-                    "scale": 0.5,
-                  },
-                ],
-              }
-            }
-          >
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
             <View
               style={
                 Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 1,
+                    },
+                  ],
                 }
               }
             >
-              <Text
+              <View
                 style={
-                  Array [
-                    Object {
-                      "color": "#000000",
-                      "fontFamily": "Helvetica Neue",
-                      "textAlign": "left",
-                      "writingDirection": "ltr",
-                    },
-                    Object {
-                      "backgroundColor": "transparent",
-                      "color": "#ffffff",
-                      "fontSize": 12,
-                      "textAlign": "center",
-                    },
-                  ]
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
                 }
               >
-                Route: 4
-              </Text>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 0
+                </Text>
+              </View>
             </View>
           </View>
         </View>
-      </View>
-    </RCTSafeAreaView>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 3
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityStates={
+            Array [
+              "selected",
+            ]
+          }
+          accessibilityTraits="button"
+          accessible={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "flex": 1,
+              "paddingVertical": 6,
+            }
+          }
+        >
+          <View
+            pointerEvents="none"
+          >
+            <View
+              style={
+                Object {
+                  "alignSelf": "center",
+                  "height": 24,
+                  "marginHorizontal": 12,
+                  "marginTop": 2,
+                  "transform": Array [
+                    Object {
+                      "translateY": 7,
+                    },
+                  ],
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityElementsHidden={true}
+                  allowFontScaling={false}
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={
+                    Array [
+                      Object {
+                        "color": "rgba(255, 255, 255, 0.5)",
+                        "fontSize": 24,
+                      },
+                      Array [
+                        Object {
+                          "transform": Array [
+                            Object {
+                              "scaleX": 1,
+                            },
+                          ],
+                        },
+                        Object {
+                          "backgroundColor": "transparent",
+                        },
+                      ],
+                      Object {
+                        "fontFamily": "Material Icons",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      Object {},
+                    ]
+                  }
+                >
+                  
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 16,
+                  "paddingBottom": 2,
+                  "transform": Array [
+                    Object {
+                      "scale": 0.5,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "fontFamily": "Helvetica Neue",
+                        "textAlign": "left",
+                        "writingDirection": "ltr",
+                      },
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#ffffff",
+                        "fontSize": 12,
+                        "textAlign": "center",
+                      },
+                    ]
+                  }
+                >
+                  Route: 4
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTSafeAreaView>
+    </View>
   </View>
 </View>
 `;
diff --git a/typings/components/BottomNavigation.d.ts b/typings/components/BottomNavigation.d.ts
index bd78578..4290696 100644
--- a/typings/components/BottomNavigation.d.ts
+++ b/typings/components/BottomNavigation.d.ts
@@ -40,6 +40,7 @@ export interface BottomNavigationProps<T> {
   onTabPress?: (props: { route: T }) => any;
   activeColor?: string;
   inactiveColor?: string;
+  keyboardHidesNavigationBar?: boolean;
   barStyle?: any;
   style?: StyleProp<ViewStyle>;
   theme?: ThemeShape;