fix: Allow Reanimated Screen to check large header

src/native-stack/utils/ScreenInfoContext.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { NativeStackNavigationOptions } from '../types';
+
+type ScreenInfoType = {
+  options: NativeStackNavigationOptions;
+};
+
+const ScreenInfoContext = React.createContext<ScreenInfoType>({
+  options: {},
+});
+
+export default ScreenInfoContext;

src/native-stack/utils/getStatusBarHeight.tsx

@@ -0,0 +1,22 @@
+import { Rect } from 'react-native-safe-area-context';
+import { Platform } from 'react-native';
+
+export default function getStatusBarHeight(
+  topInset: number,
+  dimensions: Rect,
+  isStatusBarTranslucent: boolean
+) {
+  if (Platform.OS === 'ios') {
+    // It looks like some iOS devices don't have strictly set status bar height to 44.
+    // Thus, if the top inset is higher than 50, then the device should have a dynamic island.
+    // On models with Dynamic Island the status bar height is smaller than the safe area top inset by 5 pixels.
+    // See https://developer.apple.com/forums/thread/662466 for more details about status bar height.
+    const hasDynamicIsland = topInset > 50;
+    return hasDynamicIsland ? topInset - 5 : topInset;
+  } else if (Platform.OS === 'android') {
+    // On Android we should also rely on frame's y-axis position, as topInset is 0 on visible status bar.
+    return isStatusBarTranslucent ? topInset : dimensions.y;
+  }
+
+  return topInset;
+}

src/native-stack/utils/useScreenInfo.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import ScreenInfoContext from './ScreenInfoContext';
+
+export default function useScreenInfo() {
+  const screenInfo = React.useContext(ScreenInfoContext);
+
+  if (screenInfo === undefined) {
+    throw new Error(
+      "Couldn't find information about the screen. Are you inside a screen in a navigator?"
+    );
+  }
+
+  return screenInfo;
+}

src/native-stack/views/NativeStackView.tsx

@@ -19,7 +19,6 @@ import {
   PartialState,
 } from '@react-navigation/native';
 import {
-  Rect,
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
@@ -31,8 +30,10 @@ import {
 import HeaderConfig from './HeaderConfig';
 import SafeAreaProviderCompat from '../utils/SafeAreaProviderCompat';
 import getDefaultHeaderHeight from '../utils/getDefaultHeaderHeight';
+import getStatusBarHeight from '../utils/getStatusBarHeight';
 import HeaderHeightContext from '../utils/HeaderHeightContext';
 import AnimatedHeaderHeightContext from '../utils/AnimatedHeaderHeightContext';
+import ScreenInfoContext from '../utils/ScreenInfoContext';
 
 const isAndroid = Platform.OS === 'android';
 
@@ -260,128 +261,130 @@ const RouteView = ({
   const { dark } = useTheme();
 
   return (
-    <Screen
-      key={route.key}
-      enabled
-      isNativeStack
-      style={StyleSheet.absoluteFill}
-      sheetAllowedDetents={sheetAllowedDetents}
-      sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
-      sheetGrabberVisible={sheetGrabberVisible}
-      sheetCornerRadius={sheetCornerRadius}
-      sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
-      customAnimationOnSwipe={customAnimationOnSwipe}
-      freezeOnBlur={freezeOnBlur}
-      fullScreenSwipeEnabled={fullScreenSwipeEnabled}
-      hideKeyboardOnSwipe={hideKeyboardOnSwipe}
-      homeIndicatorHidden={homeIndicatorHidden}
-      gestureEnabled={isAndroid ? false : gestureEnabled}
-      gestureResponseDistance={gestureResponseDistance}
-      nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
-      navigationBarColor={navigationBarColor}
-      navigationBarHidden={navigationBarHidden}
-      replaceAnimation={replaceAnimation}
-      screenOrientation={screenOrientation}
-      stackAnimation={stackAnimation}
-      stackPresentation={stackPresentation}
-      statusBarAnimation={statusBarAnimation}
-      statusBarColor={statusBarColor}
-      statusBarHidden={statusBarHidden}
-      statusBarStyle={statusBarStyle ?? (dark ? 'light' : 'dark')}
-      statusBarTranslucent={statusBarTranslucent}
-      swipeDirection={swipeDirection}
-      transitionDuration={transitionDuration}
-      onHeaderBackButtonClicked={() => {
-        navigation.dispatch({
-          ...StackActions.pop(),
-          source: route.key,
-          target: stateKey,
-        });
-      }}
-      onWillAppear={() => {
-        navigation.emit({
-          type: 'transitionStart',
-          data: { closing: false },
-          target: route.key,
-        });
-      }}
-      onWillDisappear={() => {
-        navigation.emit({
-          type: 'transitionStart',
-          data: { closing: true },
-          target: route.key,
-        });
-      }}
-      onAppear={() => {
-        navigation.emit({
-          type: 'appear',
-          target: route.key,
-        });
-        navigation.emit({
-          type: 'transitionEnd',
-          data: { closing: false },
-          target: route.key,
-        });
-      }}
-      onDisappear={() => {
-        navigation.emit({
-          type: 'transitionEnd',
-          data: { closing: true },
-          target: route.key,
-        });
-      }}
-      onHeaderHeightChange={e => {
-        const headerHeight = e.nativeEvent.headerHeight;
-
-        if (cachedAnimatedHeaderHeight.current !== headerHeight) {
-          // Currently, we're setting value by Animated#setValue, because we want to cache animated value.
-          // Also, in React Native 0.72 there was a bug on Fabric causing a large delay between the screen transition,
-          // which should not occur.
-          // TODO: Check if it's possible to replace animated#setValue to Animated#event.
-          animatedHeaderHeight.setValue(headerHeight);
-          cachedAnimatedHeaderHeight.current = headerHeight;
-        }
-      }}
-      onDismissed={e => {
-        navigation.emit({
-          type: 'dismiss',
-          target: route.key,
-        });
-
-        const dismissCount =
-          e.nativeEvent.dismissCount > 0 ? e.nativeEvent.dismissCount : 1;
-
-        navigation.dispatch({
-          ...StackActions.pop(dismissCount),
-          source: route.key,
-          target: stateKey,
-        });
-      }}
-      onGestureCancel={() => {
-        navigation.emit({
-          type: 'gestureCancel',
-          target: route.key,
-        });
-      }}>
-      <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
-        <HeaderHeightContext.Provider value={staticHeaderHeight}>
-          <MaybeNestedStack
-            options={options}
-            route={route}
-            stackPresentation={stackPresentation}>
-            {renderScene()}
-          </MaybeNestedStack>
-          {/* HeaderConfig must not be first child of a Screen.
+    <ScreenInfoContext.Provider value={{ options }}>
+      <Screen
+        key={route.key}
+        enabled
+        isNativeStack
+        style={StyleSheet.absoluteFill}
+        sheetAllowedDetents={sheetAllowedDetents}
+        sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+        sheetGrabberVisible={sheetGrabberVisible}
+        sheetCornerRadius={sheetCornerRadius}
+        sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
+        customAnimationOnSwipe={customAnimationOnSwipe}
+        freezeOnBlur={freezeOnBlur}
+        fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+        hideKeyboardOnSwipe={hideKeyboardOnSwipe}
+        homeIndicatorHidden={homeIndicatorHidden}
+        gestureEnabled={isAndroid ? false : gestureEnabled}
+        gestureResponseDistance={gestureResponseDistance}
+        nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
+        navigationBarColor={navigationBarColor}
+        navigationBarHidden={navigationBarHidden}
+        replaceAnimation={replaceAnimation}
+        screenOrientation={screenOrientation}
+        stackAnimation={stackAnimation}
+        stackPresentation={stackPresentation}
+        statusBarAnimation={statusBarAnimation}
+        statusBarColor={statusBarColor}
+        statusBarHidden={statusBarHidden}
+        statusBarStyle={statusBarStyle ?? (dark ? 'light' : 'dark')}
+        statusBarTranslucent={statusBarTranslucent}
+        swipeDirection={swipeDirection}
+        transitionDuration={transitionDuration}
+        onHeaderBackButtonClicked={() => {
+          navigation.dispatch({
+            ...StackActions.pop(),
+            source: route.key,
+            target: stateKey,
+          });
+        }}
+        onWillAppear={() => {
+          navigation.emit({
+            type: 'transitionStart',
+            data: { closing: false },
+            target: route.key,
+          });
+        }}
+        onWillDisappear={() => {
+          navigation.emit({
+            type: 'transitionStart',
+            data: { closing: true },
+            target: route.key,
+          });
+        }}
+        onAppear={() => {
+          navigation.emit({
+            type: 'appear',
+            target: route.key,
+          });
+          navigation.emit({
+            type: 'transitionEnd',
+            data: { closing: false },
+            target: route.key,
+          });
+        }}
+        onDisappear={() => {
+          navigation.emit({
+            type: 'transitionEnd',
+            data: { closing: true },
+            target: route.key,
+          });
+        }}
+        onHeaderHeightChange={e => {
+          const headerHeight = e.nativeEvent.headerHeight;
+
+          if (cachedAnimatedHeaderHeight.current !== headerHeight) {
+            // Currently, we're setting value by Animated#setValue, because we want to cache animated value.
+            // Also, in React Native 0.72 there was a bug on Fabric causing a large delay between the screen transition,
+            // which should not occur.
+            // TODO: Check if it's possible to replace animated#setValue to Animated#event.
+            animatedHeaderHeight.setValue(headerHeight);
+            cachedAnimatedHeaderHeight.current = headerHeight;
+          }
+        }}
+        onDismissed={e => {
+          navigation.emit({
+            type: 'dismiss',
+            target: route.key,
+          });
+
+          const dismissCount =
+            e.nativeEvent.dismissCount > 0 ? e.nativeEvent.dismissCount : 1;
+
+          navigation.dispatch({
+            ...StackActions.pop(dismissCount),
+            source: route.key,
+            target: stateKey,
+          });
+        }}
+        onGestureCancel={() => {
+          navigation.emit({
+            type: 'gestureCancel',
+            target: route.key,
+          });
+        }}>
+        <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
+          <HeaderHeightContext.Provider value={staticHeaderHeight}>
+            <MaybeNestedStack
+              options={options}
+              route={route}
+              stackPresentation={stackPresentation}>
+              {renderScene()}
+            </MaybeNestedStack>
+            {/* HeaderConfig must not be first child of a Screen.
            See https://github.com/software-mansion/react-native-screens/pull/1825
            for detailed explanation */}
-          <HeaderConfig
-            {...options}
-            route={route}
-            headerShown={isHeaderInPush}
-          />
-        </HeaderHeightContext.Provider>
-      </AnimatedHeaderHeightContext.Provider>
-    </Screen>
+            <HeaderConfig
+              {...options}
+              route={route}
+              headerShown={isHeaderInPush}
+            />
+          </HeaderHeightContext.Provider>
+        </AnimatedHeaderHeightContext.Provider>
+      </Screen>
+    </ScreenInfoContext.Provider>
   );
 };
 
@@ -422,26 +425,6 @@ export default function NativeStackView(props: Props) {
   );
 }
 
-function getStatusBarHeight(
-  topInset: number,
-  dimensions: Rect,
-  isStatusBarTranslucent: boolean
-) {
-  if (Platform.OS === 'ios') {
-    // It looks like some iOS devices don't have strictly set status bar height to 44.
-    // Thus, if the top inset is higher than 50, then the device should have a dynamic island.
-    // On models with Dynamic Island the status bar height is smaller than the safe area top inset by 5 pixels.
-    // See https://developer.apple.com/forums/thread/662466 for more details about status bar height.
-    const hasDynamicIsland = topInset > 50;
-    return hasDynamicIsland ? topInset - 5 : topInset;
-  } else if (Platform.OS === 'android') {
-    // On Android we should also rely on frame's y-axis position, as topInset is 0 on visible status bar.
-    return isStatusBarTranslucent ? topInset : dimensions.y;
-  }
-
-  return topInset;
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -15,7 +15,9 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import getDefaultHeaderHeight from '../native-stack/utils/getDefaultHeaderHeight';
+import getStatusBarHeight from '../native-stack/utils/getStatusBarHeight';
 import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
+import useScreenInfo from '../native-stack/utils/useScreenInfo';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
   InnerScreen as unknown as React.ComponentClass
@@ -30,24 +32,29 @@ const ReanimatedNativeStackScreen = React.forwardRef<
   typeof AnimatedScreen,
   ScreenProps
 >((props, ref) => {
+  const { options } = useScreenInfo();
+
   const { children, ...rest } = props;
   const { stackPresentation = 'push' } = rest;
 
   const dimensions = useSafeAreaFrame();
   const topInset = useSafeAreaInsets().top;
-  let statusBarHeight = topInset;
-  const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59;
-  if (hasDynamicIsland) {
-    // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
-    statusBarHeight = 54;
-  }
+  const isStatusBarTranslucent = rest.statusBarTranslucent ?? false;
+  const statusBarHeight = getStatusBarHeight(
+    topInset,
+    dimensions,
+    isStatusBarTranslucent
+  );
+
+  const isLargeHeader = options.headerLargeTitle ?? false;
 
   // Default header height, normally used in `useHeaderHeight` hook.
   // Here, it is used for returning a default value for shared value.
   const defaultHeaderHeight = getDefaultHeaderHeight(
     dimensions,
     statusBarHeight,
-    stackPresentation
+    stackPresentation,
+    isLargeHeader
   );
 
   const cachedHeaderHeight = React.useRef(defaultHeaderHeight);