fix: Allow Reanimated Screen to check large header

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/views/NativeStackView.tsx

@@ -19,7 +19,6 @@ import {
   PartialState,
 } from '@react-navigation/native';
 import {
-  Rect,
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
@@ -31,6 +30,7 @@ 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';
 
@@ -264,6 +264,7 @@ const RouteView = ({
       key={route.key}
       enabled
       isNativeStack
+      screenDescriptor={descriptors[route.key]}
       style={StyleSheet.absoluteFill}
       sheetAllowedDetents={sheetAllowedDetents}
       sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
@@ -422,26 +423,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,6 +15,7 @@ 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';
 
 const AnimatedScreen = Animated.createAnimatedComponent(
@@ -31,23 +32,26 @@ const ReanimatedNativeStackScreen = React.forwardRef<
   ScreenProps
 >((props, ref) => {
   const { children, ...rest } = props;
-  const { stackPresentation = 'push' } = rest;
+  const { stackPresentation = 'push', screenDescriptor } = 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 = screenDescriptor?.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);

src/reanimated/useReanimatedHeaderHeight.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
 
-export default function useReanimatedTransitionProgress() {
+export default function useReanimatedHeaderHeight() {
   const height = React.useContext(ReanimatedHeaderHeightContext);
 
   if (height === undefined) {

src/types.tsx

@@ -7,6 +7,7 @@ import {
   TextInputFocusEventData,
   ColorValue,
 } from 'react-native';
+import { NativeStackDescriptor } from './native-stack/types';
 
 export type SearchBarCommands = {
   focus: () => void;
@@ -97,6 +98,7 @@ export interface ScreenProps extends ViewProps {
   active?: 0 | 1 | Animated.AnimatedInterpolation<number>;
   activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation<number>;
   children?: React.ReactNode;
+  screenDescriptor?: NativeStackDescriptor;
   /**
    * Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`.
    *