fix: use safe area context in material bottom tabs

react-navigation · Nov 27, 2022 · 2037779 · 2037779
1 parent 2e1a4b4
commit 2037779
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git a/example/package.json b/example/package.json
@@ -32,7 +32,7 @@
     "react-native-appearance": "~0.3.3",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-pager-view": "~5.0.12",
-    "react-native-paper": "^4.7.2",
+    "react-native-paper": "^4.9.0",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "~3.2.0",
     "react-native-screens": "~3.0.0",

diff --git a/packages/material-bottom-tabs/package.json b/packages/material-bottom-tabs/package.json
@@ -40,6 +40,9 @@
     "prepare": "bob build",
     "clean": "del lib"
   },
+  "dependencies": {
+    "@react-navigation/elements": "^1.0.0-next.13"
+  },
   "devDependencies": {
     "@react-navigation/native": "^6.0.0-next.10",
     "@testing-library/react-native": "^7.2.0",
@@ -50,7 +53,8 @@
     "react": "~16.13.1",
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-paper": "^4.7.2",
+    "react-native-safe-area-context": "~3.2.0",
+    "react-native-paper": "^4.9.0",
     "react-native-vector-icons": "^8.1.0",
     "typescript": "^4.2.3"
   },
@@ -59,6 +63,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-paper": ">= 3.0.0",
+    "react-native-safe-area-context": ">= 3.0.0",
     "react-native-vector-icons": ">= 6.0.0"
   },
   "react-native-builder-bob": {

diff --git a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx
@@ -1,3 +1,4 @@
+import { SafeAreaProviderCompat } from '@react-navigation/elements';
 import {
   Link,
   ParamListBase,
@@ -10,6 +11,7 @@ import {
 import * as React from 'react';
 import { Platform, StyleSheet, Text } from 'react-native';
 import { BottomNavigation, DarkTheme, DefaultTheme } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type {
   MaterialBottomTabDescriptorMap,
@@ -74,12 +76,13 @@ try {
   };
 }
 
-export default function MaterialBottomTabView({
+function MaterialBottomTabViewInner({
   state,
   navigation,
   descriptors,
   ...rest
 }: Props) {
+  const insets = useSafeAreaInsets();
   const { dark, colors } = useTheme();
   const buildLink = useLinkBuilder();
 
@@ -187,10 +190,19 @@ export default function MaterialBottomTabView({
           preventDefault();
         }
       }}
+      safeAreaInsets={insets}
     />
   );
 }
 
+export default function MaterialBottomTabView(props: Props) {
+  return (
+    <SafeAreaProviderCompat>
+      <MaterialBottomTabViewInner {...props} />
+    </SafeAreaProviderCompat>
+  );
+}
+
 const styles = StyleSheet.create({
   icon: {
     backgroundColor: 'transparent',

diff --git a/packages/material-bottom-tabs/tsconfig.json b/packages/material-bottom-tabs/tsconfig.json
@@ -3,7 +3,8 @@
   "references": [
     { "path": "../core" },
     { "path": "../routers" },
-    { "path": "../native" }
+    { "path": "../native" },
+    { "path": "../elements" }
   ],
   "compilerOptions": {
     "outDir": "./lib/typescript"

diff --git a/yarn.lock b/yarn.lock
@@ -1786,10 +1786,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@callstack/react-theme-provider@^3.0.5":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
-  integrity sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==
+"@callstack/react-theme-provider@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.6.tgz#7dac483037e27e28676bdf1431ba87b88f21118f"
+  integrity sha512-wwKMXfmklfogpalNZT0W+jh76BIquiYUiQHOaPmt/PCyCEP/E6rP+e7Uie6mBZrfkea9WJYJ+mus6r+45JAEhg==
   dependencies:
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
@@ -18370,12 +18370,12 @@ react-native-pager-view@~5.0.12:
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.0.12.tgz#5106735d944e7f876b006377ab6a18859bf7730c"
   integrity sha512-QmHUnQeP2qcxDofEOnKRmoUue0RaT55lhNJDfcQ1/SNuxif4Q2UyvDfqeItm1+toaE5tVnXqoreZh82FqUqnvw==
 
-react-native-paper@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.7.2.tgz#a40d1da87af5b030d45b525313cd703d490876ff"
-  integrity sha512-MOcDWjBOaknEpQgdm4fIOsRFIt4PJlMCgWlLk4kIe8Wv99/M0JIoxWABkAf4Lj5BuJgXjXdwr0DA/lhGY1BRoQ==
+react-native-paper@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.9.0.tgz#af67ae6fd92c13d8cf5e37700ad2b37aac85b2ed"
+  integrity sha512-1+7V5wJgNcEdTE+sckGF+ABImLQbWdYFGTEqkVsqdsd1mKxRSVeHJXqeQAZwiFJAZJiHzxL403rKPNdi8ZpGng==
   dependencies:
-    "@callstack/react-theme-provider" "^3.0.5"
+    "@callstack/react-theme-provider" "^3.0.6"
     color "^3.1.2"
     react-native-iphone-x-helper "^1.3.1"