From 5c1d31b341b9db6768b5b762c25c3c4eadc1d13d Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Wed, 26 May 2021 13:37:54 +0200
Subject: [PATCH] feat: add a safeAreaInsets prop to bottom navigation

---
 src/components/BottomNavigation.tsx           | 30 ++++++++++++++-----
 .../BottomNavigation.test.js.snap             | 16 +++++-----
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx
index fcd3efae22..3fa7c65c74 100644
--- a/src/components/BottomNavigation.tsx
+++ b/src/components/BottomNavigation.tsx
@@ -207,18 +207,22 @@ type Props = {
    * On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.
    */
   keyboardHidesNavigationBar?: boolean;
+  /**
+   * Safe area insets for the tab bar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
+   * The bottom insets for iOS is added by default. You can override the behavior with this option.
+   */
+  safeAreaInsets?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
   /**
    * Style for the bottom navigation bar.  You can pass a custom background color here:
    *
    * ```js
    * barStyle={{ backgroundColor: '#694fad' }}
    * ```
-   *
-   * If you have a translucent navigation bar on Android, you can also set a bottom padding here:
-   *
-   * ```js
-   * barStyle={{ paddingBottom: 48 }}
-   * ```
    */
   barStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
@@ -338,6 +342,7 @@ const BottomNavigation = ({
   onTabPress,
   onIndexChange,
   shifting = navigationState.routes.length > 3,
+  safeAreaInsets,
 }: Props) => {
   const { scale } = theme.animation;
 
@@ -593,6 +598,12 @@ const BottomNavigation = ({
 
   const rippleSize = layout.width / 4;
 
+  const insets = {
+    left: safeAreaInsets?.left ?? 0,
+    right: safeAreaInsets?.right ?? 0,
+    bottom: safeAreaInsets?.bottom ?? BOTTOM_INSET,
+  };
+
   return (
     <View style={[styles.container, style]}>
       <View style={[styles.content, { backgroundColor: colors.background }]}>
@@ -678,7 +689,11 @@ const BottomNavigation = ({
           <View
             style={[
               styles.items,
-              { marginBottom: BOTTOM_INSET, maxWidth: maxTabBarWidth },
+              {
+                marginBottom: insets.bottom,
+                marginHorizontal: Math.max(insets.left, insets.right),
+                maxWidth: maxTabBarWidth,
+              },
             ]}
           >
             {shifting ? (
@@ -948,7 +963,6 @@ const styles = StyleSheet.create({
   },
   items: {
     flexDirection: 'row',
-    width: '100%',
   },
   item: {
     flex: 1,
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 2cce272fe9..a6cd8c4b85 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -93,10 +93,10 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 504,
             },
           ]
@@ -771,10 +771,10 @@ exports[`hides labels in shifting bottom navigation 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 504,
             },
           ]
@@ -1469,10 +1469,10 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 504,
             },
           ]
@@ -2075,10 +2075,10 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 480,
             },
           ]
@@ -2953,10 +2953,10 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 504,
             },
           ]
@@ -3886,10 +3886,10 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 504,
             },
           ]
@@ -4719,10 +4719,10 @@ exports[`renders non-shifting bottom navigation 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 504,
             },
           ]
@@ -5652,10 +5652,10 @@ exports[`renders shifting bottom navigation 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "width": "100%",
             },
             Object {
               "marginBottom": 0,
+              "marginHorizontal": 0,
               "maxWidth": 480,
             },
           ]