fix: use correct header inset for modals on Android

react-navigation · Sep 16, 2022 · f2c7b59 · f2c7b59
1 parent 2ddcdf9
commit f2c7b59
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -8,7 +8,6 @@ import {
   TextStyle,
   View,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   isSearchBarAvailableForCurrentPlatform,
   ScreenStackHeaderBackButtonImage,
@@ -24,6 +23,7 @@ import type { NativeStackNavigationOptions } from '../types';
 import { processFonts } from './FontProcessor';
 
 type Props = NativeStackNavigationOptions & {
+  headerTopInsetEnabled: boolean;
   headerHeight: number;
   route: Route<string>;
   canGoBack: boolean;
@@ -54,12 +54,11 @@ export default function HeaderConfig({
   headerTitleStyle,
   headerTransparent,
   headerSearchBarOptions,
+  headerTopInsetEnabled,
   route,
   title,
   canGoBack,
 }: Props): JSX.Element {
-  const insets = useSafeAreaInsets();
-
   const { colors } = useTheme();
   const tintColor =
     headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
@@ -195,7 +194,7 @@ export default function HeaderConfig({
         titleFontFamily={titleFontFamily}
         titleFontSize={titleFontSize}
         titleFontWeight={titleFontWeight}
-        topInsetEnabled={insets.top !== 0}
+        topInsetEnabled={headerTopInsetEnabled}
         translucent={
           // This defaults to `true`, so we can't pass `undefined`
           translucent === true

diff --git a/packages/native-stack/src/views/NativeStackView.native.tsx b/packages/native-stack/src/views/NativeStackView.native.tsx
@@ -48,12 +48,14 @@ const MaybeNestedStack = ({
   route,
   presentation,
   headerHeight,
+  headerTopInsetEnabled,
   children,
 }: {
   options: NativeStackNavigationOptions;
   route: Route<string>;
   presentation: Exclude<StackPresentationTypes, 'push'> | 'card';
   headerHeight: number;
+  headerTopInsetEnabled: boolean;
   children: React.ReactNode;
 }) => {
   const { colors } = useTheme();
@@ -100,6 +102,7 @@ const MaybeNestedStack = ({
             {...options}
             route={route}
             headerHeight={headerHeight}
+            headerTopInsetEnabled={headerTopInsetEnabled}
             canGoBack
           />
           {content}
@@ -208,7 +211,9 @@ const SceneView = ({
   const parentHeaderBack = React.useContext(HeaderBackContext);
 
   const topInset =
-    isModal || isParentHeaderShown || (isIPhone && isLandscape)
+    isParentHeaderShown ||
+    (Platform.OS === 'ios' && isModal) ||
+    (isIPhone && isLandscape)
       ? 0
       : insets.top;
 
@@ -219,6 +224,7 @@ const SceneView = ({
   const [customHeaderHeight, setCustomHeaderHeight] =
     React.useState(defaultHeaderHeight);
 
+  const headerTopInsetEnabled = topInset !== 0;
   const headerHeight = header ? customHeaderHeight : defaultHeaderHeight;
   const headerBack = previousDescriptor
     ? {
@@ -310,6 +316,7 @@ const SceneView = ({
                       ? options.headerBackTitle
                       : headerBack?.title
                   }
+                  headerTopInsetEnabled={headerTopInsetEnabled}
                   canGoBack={headerBack !== undefined}
                 />
               )}
@@ -318,6 +325,7 @@ const SceneView = ({
                 route={route}
                 presentation={presentation}
                 headerHeight={headerHeight}
+                headerTopInsetEnabled={headerTopInsetEnabled}
               >
                 <HeaderBackContext.Provider value={headerBack}>
                   {render()}