fix: automatically set top inset on Android in native stack

react-navigation · May 21, 2021 · 2cb44a5 · 2cb44a5
1 parent 3e67f64
commit 2cb44a5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/example/src/Screens/NativeStack.tsx b/example/src/Screens/NativeStack.tsx
@@ -122,7 +122,7 @@ export default function NativeStackScreen({
   }, [navigation]);
 
   return (
-    <NativeStack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
+    <NativeStack.Navigator>
       <NativeStack.Screen
         name="Article"
         component={ArticleScreen}

diff --git a/packages/native-stack/package.json b/packages/native-stack/package.json
@@ -41,6 +41,7 @@
     "clean": "del lib"
   },
   "dependencies": {
+    "@react-navigation/elements": "^1.0.0-next.10",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
@@ -58,7 +59,8 @@
     "@react-navigation/native": "^6.0.0",
     "react": "*",
     "react-native": "*",
-    "react-native-screens": ">= 3.0.0"
+    "react-native-screens": ">= 3.0.0",
+    "react-native-safe-area-context": ">= 3.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",

diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
@@ -9,11 +9,13 @@ import {
   useTheme,
   Route,
 } from '@react-navigation/native';
+import { SafeAreaProviderCompat } from '@react-navigation/elements';
 import {
   Screen,
   ScreenStack,
   StackPresentationTypes,
 } from 'react-native-screens';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import warnOnce from 'warn-once';
 import HeaderConfig from './HeaderConfig';
 import type {
@@ -114,16 +116,12 @@ type Props = {
   descriptors: NativeStackDescriptorMap;
 };
 
-export default function NativeStackView({
-  state,
-  navigation,
-  descriptors,
-}: Props): JSX.Element {
-  const { key, routes } = state;
+function NativeStackViewInner({ state, navigation, descriptors }: Props) {
+  const insets = useSafeAreaInsets();
 
   return (
     <ScreenStack style={styles.container}>
-      {routes.map((route, index) => {
+      {state.routes.map((route, index) => {
         const { options, render: renderScene } = descriptors[route.key];
         const {
           gestureEnabled,
@@ -191,14 +189,17 @@ export default function NativeStackView({
               navigation.dispatch({
                 ...StackActions.pop(),
                 source: route.key,
-                target: key,
+                target: state.key,
               });
             }}
           >
             <HeaderConfig
               {...options}
               route={route}
               headerShown={isHeaderInPush}
+              headerTopInsetEnabled={
+                options.headerTopInsetEnabled ?? insets.top !== 0
+              }
             />
             <MaybeNestedStack
               options={options}
@@ -214,6 +215,14 @@ export default function NativeStackView({
   );
 }
 
+export default function NativeStackView(props: Props) {
+  return (
+    <SafeAreaProviderCompat>
+      <NativeStackViewInner {...props} />
+    </SafeAreaProviderCompat>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

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