From 77b757091c0451e20bca01138629669c7da544a8 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Fri, 3 Jan 2020 16:25:59 +0100 Subject: [PATCH] fix: provide initial values for safe area to prevent blank screen (#238) https://github.com/react-navigation/stack/issues/328 --- example/package.json | 1 + packages/bottom-tabs/package.json | 3 ++- .../src/views/SafeAreaProviderCompat.tsx | 17 ++++++++++++++++- packages/drawer/package.json | 3 ++- .../drawer/src/views/SafeAreaProviderCompat.tsx | 17 ++++++++++++++++- packages/stack/package.json | 3 ++- .../stack/src/views/SafeAreaProviderCompat.tsx | 17 ++++++++++++++++- yarn.lock | 5 +++++ 8 files changed, 60 insertions(+), 6 deletions(-) diff --git a/example/package.json b/example/package.json index 0e91eeae..ebe056e8 100644 --- a/example/package.json +++ b/example/package.json @@ -28,6 +28,7 @@ "react-dom": "~16.9.0", "react-native": "~0.61.5", "react-native-gesture-handler": "~1.5.0", + "react-native-iphone-x-helper": "^1.2.1", "react-native-paper": "^3.3.0", "react-native-reanimated": "^1.4.0", "react-native-safe-area-context": "^0.6.0", diff --git a/packages/bottom-tabs/package.json b/packages/bottom-tabs/package.json index 63e49f5d..5fc0f65e 100644 --- a/packages/bottom-tabs/package.json +++ b/packages/bottom-tabs/package.json @@ -34,7 +34,8 @@ }, "dependencies": { "@react-navigation/routers": "^5.0.0-alpha.19", - "color": "^3.1.2" + "color": "^3.1.2", + "react-native-iphone-x-helper": "^1.2.1" }, "devDependencies": { "@react-native-community/bob": "^0.7.0", diff --git a/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx b/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx index d3ac758c..2088a12e 100644 --- a/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx +++ b/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx @@ -3,6 +3,17 @@ import { SafeAreaProvider, SafeAreaConsumer, } from 'react-native-safe-area-context'; +import { + getStatusBarHeight, + getBottomSpace, +} from 'react-native-iphone-x-helper'; + +const initialSafeAreaInsets = { + top: getStatusBarHeight(true), + bottom: getBottomSpace(), + right: 0, + left: 0, +}; type Props = { children: React.ReactNode; @@ -19,7 +30,11 @@ export default function SafeAreaProviderCompat({ children }: Props) { return children; } - return {children}; + return ( + + {children} + + ); }} ); diff --git a/packages/drawer/package.json b/packages/drawer/package.json index fdc4c0d3..b324c06e 100644 --- a/packages/drawer/package.json +++ b/packages/drawer/package.json @@ -35,7 +35,8 @@ }, "dependencies": { "@react-navigation/routers": "^5.0.0-alpha.19", - "color": "^3.1.2" + "color": "^3.1.2", + "react-native-iphone-x-helper": "^1.2.1" }, "devDependencies": { "@react-native-community/bob": "^0.7.0", diff --git a/packages/drawer/src/views/SafeAreaProviderCompat.tsx b/packages/drawer/src/views/SafeAreaProviderCompat.tsx index d3ac758c..2088a12e 100644 --- a/packages/drawer/src/views/SafeAreaProviderCompat.tsx +++ b/packages/drawer/src/views/SafeAreaProviderCompat.tsx @@ -3,6 +3,17 @@ import { SafeAreaProvider, SafeAreaConsumer, } from 'react-native-safe-area-context'; +import { + getStatusBarHeight, + getBottomSpace, +} from 'react-native-iphone-x-helper'; + +const initialSafeAreaInsets = { + top: getStatusBarHeight(true), + bottom: getBottomSpace(), + right: 0, + left: 0, +}; type Props = { children: React.ReactNode; @@ -19,7 +30,11 @@ export default function SafeAreaProviderCompat({ children }: Props) { return children; } - return {children}; + return ( + + {children} + + ); }} ); diff --git a/packages/stack/package.json b/packages/stack/package.json index 025046bf..0d3c4ce7 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -34,7 +34,8 @@ }, "dependencies": { "@react-navigation/routers": "^5.0.0-alpha.19", - "color": "^3.1.2" + "color": "^3.1.2", + "react-native-iphone-x-helper": "^1.2.1" }, "devDependencies": { "@react-native-community/bob": "^0.7.0", diff --git a/packages/stack/src/views/SafeAreaProviderCompat.tsx b/packages/stack/src/views/SafeAreaProviderCompat.tsx index d3ac758c..2088a12e 100644 --- a/packages/stack/src/views/SafeAreaProviderCompat.tsx +++ b/packages/stack/src/views/SafeAreaProviderCompat.tsx @@ -3,6 +3,17 @@ import { SafeAreaProvider, SafeAreaConsumer, } from 'react-native-safe-area-context'; +import { + getStatusBarHeight, + getBottomSpace, +} from 'react-native-iphone-x-helper'; + +const initialSafeAreaInsets = { + top: getStatusBarHeight(true), + bottom: getBottomSpace(), + right: 0, + left: 0, +}; type Props = { children: React.ReactNode; @@ -19,7 +30,11 @@ export default function SafeAreaProviderCompat({ children }: Props) { return children; } - return {children}; + return ( + + {children} + + ); }} ); diff --git a/yarn.lock b/yarn.lock index 1fcc2739..b6fe285a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13191,6 +13191,11 @@ react-native-gesture-handler@^1.5.0, react-native-gesture-handler@~1.5.0: invariant "^2.2.4" prop-types "^15.7.2" +react-native-iphone-x-helper@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772" + integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ== + react-native-paper@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.3.0.tgz#c2a1e9b793b7063aa1848c1ce7db5719912e215a"