refactor: move more header stuff to elements package

packages/stack/src/index.tsx

@@ -38,11 +38,9 @@ export {
  * Utilities
  */
 export { default as CardAnimationContext } from './utils/CardAnimationContext';
-export { default as HeaderHeightContext } from './utils/HeaderHeightContext';
 export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
 
 export { default as useCardAnimation } from './utils/useCardAnimation';
-export { default as useHeaderHeight } from './utils/useHeaderHeight';
 export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
 
 /**

packages/stack/src/utils/HeaderHeightContext.tsx

@@ -1,3 +0,0 @@
-import * as React from 'react';
-
-export default React.createContext<number | undefined>(undefined);

packages/stack/src/utils/HeaderShownContext.tsx

@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-const HeaderShownContext = React.createContext(false);
-
-export default HeaderShownContext;

packages/stack/src/utils/useHeaderHeight.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import HeaderHeightContext from './HeaderHeightContext';
-
-export default function useFloatingHeaderHeight() {
-  const height = React.useContext(HeaderHeightContext);
-
-  if (height === undefined) {
-    throw new Error(
-      "Couldn't find the header height. Are you inside a screen in Stack?"
-    );
-  }
-
-  return height;
-}

packages/stack/src/views/Header/Header.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { StackActions, useNavigationState } from '@react-navigation/native';
+import { Header as BaseHeader } from '@react-navigation/elements';
 
 import HeaderSegment from './HeaderSegment';
 import HeaderTitle from './HeaderTitle';
-import HeaderShownContext from '../../utils/HeaderShownContext';
 import ModalPresentationContext from '../../utils/ModalPresentationContext';
 import debounce from '../../utils/debounce';
 import type { StackHeaderProps, StackHeaderTitleProps } from '../../types';
@@ -57,7 +57,7 @@ export default React.memo(function Header({
   );
 
   const isModal = React.useContext(ModalPresentationContext);
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isParentHeaderShown = React.useContext(BaseHeader.ShownContext);
   const isFirstRouteInParent = useNavigationState(
     (state) => state.routes[0].key === route.key
   );

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -8,6 +8,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
+import { Header as BaseHeader } from '@react-navigation/elements';
 import HeaderBackButton from './HeaderBackButton';
 import HeaderBackground from './HeaderBackground';
 import memoize from '../../utils/memoize';
@@ -51,29 +52,6 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
   });
 };
 
-export const getDefaultHeaderHeight = (
-  layout: Layout,
-  statusBarHeight: number
-): number => {
-  const isLandscape = layout.width > layout.height;
-
-  let headerHeight;
-
-  if (Platform.OS === 'ios') {
-    if (isLandscape && !Platform.isPad) {
-      headerHeight = 32;
-    } else {
-      headerHeight = 44;
-    }
-  } else if (Platform.OS === 'android') {
-    headerHeight = 56;
-  } else {
-    headerHeight = 64;
-  }
-
-  return headerHeight + statusBarHeight;
-};
-
 export default function HeaderSegment(props: Props) {
   const [leftLabelLayout, setLeftLabelLayout] = React.useState<
     Layout | undefined
@@ -176,7 +154,10 @@ export default function HeaderSegment(props: Props) {
     styleInterpolator,
   } = props;
 
-  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+  const defaultHeight = BaseHeader.getDefaultHeight(
+    layout,
+    headerStatusBarHeight
+  );
 
   const {
     height = defaultHeight,

packages/stack/src/views/Stack/CardContainer.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import { Route, useTheme } from '@react-navigation/native';
+import { Header as BaseHeader } from '@react-navigation/elements';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import { forModalPresentationIOS } from '../../TransitionConfigs/CardStyleInterpolators';
-import HeaderHeightContext from '../../utils/HeaderHeightContext';
-import HeaderShownContext from '../../utils/HeaderShownContext';
 import PreviousSceneContext from '../../utils/PreviousSceneContext';
 import ModalPresentationContext from '../../utils/ModalPresentationContext';
 import type {
@@ -244,13 +243,13 @@ function CardContainer({
       <View style={styles.container}>
         <View style={styles.scene}>
           <PreviousSceneContext.Provider value={previousScene}>
-            <HeaderShownContext.Provider
+            <BaseHeader.ShownContext.Provider
               value={isParentHeaderShown || headerShown !== false}
             >
-              <HeaderHeightContext.Provider value={headerHeight}>
+              <BaseHeader.HeightContext.Provider value={headerHeight}>
                 {renderScene({ route: scene.descriptor.route })}
-              </HeaderHeightContext.Provider>
-            </HeaderShownContext.Provider>
+              </BaseHeader.HeightContext.Provider>
+            </BaseHeader.ShownContext.Provider>
           </PreviousSceneContext.Provider>
         </View>
         {headerMode !== 'float' ? (

packages/stack/src/views/Stack/CardStack.tsx

@@ -11,14 +11,16 @@ import type {
   Route,
   StackNavigationState,
 } from '@react-navigation/native';
-import { SafeAreaProviderCompat } from '@react-navigation/elements';
+import {
+  Header as BaseHeader,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements';
 
 import {
   MaybeScreenContainer,
   MaybeScreen,
   shouldUseActivityState,
 } from '../Screens';
-import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import CardContainer from './CardContainer';
 import {
@@ -118,7 +120,7 @@ const getHeaderHeights = (
     acc[curr.key] =
       typeof height === 'number'
         ? height
-        : getDefaultHeaderHeight(layout, headerStatusBarHeight);
+        : BaseHeader.getDefaultHeight(layout, headerStatusBarHeight);
 
     return acc;
   }, {});

packages/stack/src/views/Stack/StackView.tsx

@@ -11,7 +11,10 @@ import {
   Route,
   ParamListBase,
 } from '@react-navigation/native';
-import { SafeAreaProviderCompat } from '@react-navigation/elements';
+import {
+  Header as BaseHeader,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements';
 
 import { GestureHandlerRootView } from '../GestureHandler';
 import CardStack from './CardStack';
@@ -19,7 +22,6 @@ import KeyboardManager from '../KeyboardManager';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
-import HeaderShownContext from '../../utils/HeaderShownContext';
 import type {
   StackNavigationHelpers,
   StackNavigationConfig,
@@ -460,7 +462,7 @@ export default class StackView extends React.Component<Props, State> {
               {(insets) => (
                 <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
                   {(props) => (
-                    <HeaderShownContext.Consumer>
+                    <BaseHeader.ShownContext.Consumer>
                       {(isParentHeaderShown) => (
                         <CardStack
                           mode={mode}
@@ -487,7 +489,7 @@ export default class StackView extends React.Component<Props, State> {
                           {...props}
                         />
                       )}
-                    </HeaderShownContext.Consumer>
+                    </BaseHeader.ShownContext.Consumer>
                   )}
                 </KeyboardManager>
               )}