From 80cdc88588584cfab0c122a77fecde1610229961 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Thu, 27 May 2021 18:48:44 +0200 Subject: [PATCH] fix: use safe area context in material bottom tabs --- example/package.json | 2 +- packages/material-bottom-tabs/package.json | 7 ++++++- .../src/views/MaterialBottomTabView.tsx | 14 +++++++++++++- packages/material-bottom-tabs/tsconfig.json | 3 ++- yarn.lock | 18 +++++++++--------- 5 files changed, 31 insertions(+), 13 deletions(-) diff --git a/example/package.json b/example/package.json index b03678f9..a05e672c 100644 --- 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 index 5c121020..8345685f 100644 --- 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 index 3474928e..be266e40 100644 --- 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 ( + + + + ); +} + const styles = StyleSheet.create({ icon: { backgroundColor: 'transparent', diff --git a/packages/material-bottom-tabs/tsconfig.json b/packages/material-bottom-tabs/tsconfig.json index b74421ba..d0f53214 100644 --- 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 index 701a0c88..085bc8da 100644 --- 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"