fix: match native iOS header height in stack

react-navigation · Nov 27, 2022 · 7496a87 · 7496a87
1 parent 92a2eea
commit 7496a87
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 179 deletions.
diff --git a/packages/elements/src/Header/Header.tsx b/packages/elements/src/Header/Header.tsx
@@ -12,6 +12,10 @@ import HeaderShownContext from './HeaderShownContext';
 import HeaderTitle from './HeaderTitle';
 
 type Props = HeaderOptions & {
+  /**
+   * Whether the header is in a modal
+   */
+  modal?: boolean;
   /**
    * Layout of the screen.
    */
@@ -46,6 +50,7 @@ export default function Header(props: Props) {
 
   const {
     layout = frame,
+    modal = false,
     title,
     headerTitle: customTitle,
     headerTitleAlign = Platform.select({
@@ -69,7 +74,11 @@ export default function Header(props: Props) {
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
   } = props;
 
-  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+  const defaultHeight = getDefaultHeaderHeight(
+    layout,
+    modal,
+    headerStatusBarHeight
+  );
 
   const {
     height = defaultHeight,

diff --git a/packages/elements/src/Header/getDefaultHeaderHeight.tsx b/packages/elements/src/Header/getDefaultHeaderHeight.tsx
@@ -4,17 +4,30 @@ import type { Layout } from '../types';
 
 export default function getDefaultHeaderHeight(
   layout: Layout,
+  modal: boolean,
   statusBarHeight: number
 ): number {
-  const isLandscape = layout.width > layout.height;
-
   let headerHeight;
 
+  const isLandscape = layout.width > layout.height;
+
   if (Platform.OS === 'ios') {
-    if (isLandscape && !Platform.isPad) {
-      headerHeight = 32;
+    if (Platform.isPad) {
+      if (modal) {
+        headerHeight = 56;
+      } else {
+        headerHeight = 50;
+      }
     } else {
-      headerHeight = 44;
+      if (isLandscape) {
+        headerHeight = 32;
+      } else {
+        if (modal) {
+          headerHeight = 56;
+        } else {
+          headerHeight = 44;
+        }
+      }
     }
   } else if (Platform.OS === 'android') {
     headerHeight = 56;

diff --git a/packages/elements/src/Screen.tsx b/packages/elements/src/Screen.tsx
@@ -19,6 +19,7 @@ import HeaderShownContext from './Header/HeaderShownContext';
 
 type Props = {
   focused: boolean;
+  modal?: boolean;
   navigation: NavigationProp<ParamListBase>;
   route: RouteProp<ParamListBase>;
   header: React.ReactNode;
@@ -37,6 +38,7 @@ export default function Screen(props: Props) {
 
   const {
     focused,
+    modal = false,
     header,
     headerShown = true,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
@@ -47,7 +49,7 @@ export default function Screen(props: Props) {
   } = props;
 
   const [headerHeight, setHeaderHeight] = React.useState(() =>
-    getDefaultHeaderHeight(dimensions, headerStatusBarHeight)
+    getDefaultHeaderHeight(dimensions, modal, headerStatusBarHeight)
   );
 
   return (

diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -80,6 +80,10 @@ type SceneOptionsDefaults = TransitionPreset & {
 };
 
 export type Scene = {
+  /**
+   * Route object for the current screen.
+   */
+  route: Route<string>;
   /**
    * Descriptor object for the screen.
    */

diff --git a/packages/stack/src/views/Header/Header.tsx b/packages/stack/src/views/Header/Header.tsx
@@ -62,6 +62,7 @@ export default React.memo(function Header({
       progress={progress}
       insets={insets}
       layout={layout}
+      modal={isModal}
       headerBackTitle={
         options.headerBackTitle !== undefined
           ? options.headerBackTitle

diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -26,6 +26,7 @@ type Props = StackHeaderOptions & {
   layout: Layout;
   title: string;
   insets: EdgeInsets;
+  modal: boolean;
   onGoBack?: () => void;
   progress: SceneProgress;
   styleInterpolator: StackHeaderStyleInterpolator;
@@ -99,6 +100,7 @@ export default function HeaderSegment(props: Props) {
     progress,
     insets,
     layout,
+    modal,
     onGoBack,
     headerTitle: title,
     headerLeft: left,
@@ -120,7 +122,11 @@ export default function HeaderSegment(props: Props) {
     ...rest
   } = props;
 
-  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+  const defaultHeight = getDefaultHeaderHeight(
+    layout,
+    modal,
+    headerStatusBarHeight
+  );
 
   const { height = defaultHeight } = StyleSheet.flatten(
     customHeaderStyle || {}
@@ -172,6 +178,7 @@ export default function HeaderSegment(props: Props) {
 
   return (
     <Header
+      modal={modal}
       layout={layout}
       headerTitle={headerTitle}
       headerLeft={headerLeft}

diff --git a/packages/stack/src/views/ModalStatusBarManager.tsx b/packages/stack/src/views/ModalStatusBarManager.tsx
@@ -21,7 +21,6 @@ export default function ModalStatusBarManager({
   const { dark: darkTheme } = useTheme();
   const [overlapping, setOverlapping] = React.useState(true);
 
-  const enabled = layout.width && layout.height > layout.width;
   const scale = 1 - 20 / layout.width;
   const offset = (insets.top - 34) * scale;
 
@@ -31,22 +30,14 @@ export default function ModalStatusBarManager({
   )?.translateY;
 
   React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
     const listener = ({ value }: { value: number }) => {
       setOverlapping(value < offset);
     };
 
     const sub = translateY?.addListener(listener);
 
     return () => translateY?.removeListener(sub);
-  }, [enabled, offset, translateY]);
-
-  if (!enabled) {
-    return null;
-  }
+  }, [offset, translateY]);
 
   const darkContent = dark ?? !darkTheme;