react-native-screens 3.25.0 → 3.27.0

package/src/native-stack/views/NativeStackView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View, ViewProps } from 'react-native';
+import { Animated, Platform, StyleSheet, View, ViewProps } from 'react-native';
 // @ts-ignore Getting private component
 // eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
@@ -22,7 +22,6 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-
 import {
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
@@ -31,7 +30,9 @@ 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';
 
 const isAndroid = Platform.OS === 'android';
 
@@ -103,32 +104,37 @@ const MaybeNestedStack = ({
       // This view must *not* be flattened.
       // See https://github.com/software-mansion/react-native-screens/pull/1825
       // for detailed explanation.
-      collapsable={false}
-    >
+      collapsable={false}>
       {children}
     </Container>
   );
 
   const dimensions = useSafeAreaFrame();
   const topInset = useSafeAreaInsets().top;
-  let statusBarHeight = topInset;
-  const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59;
-  const isLargeHeader = options.headerLargeTitle ?? false;
-  if (hasDynamicIsland) {
-    // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
-    statusBarHeight = 54;
-  }
+  const isStatusBarTranslucent = options.statusBarTranslucent ?? false;
+  const statusBarHeight = getStatusBarHeight(
+    topInset,
+    dimensions,
+    isStatusBarTranslucent
+  );
+
+  const hasLargeHeader = options.headerLargeTitle ?? false;
+
   const headerHeight = getDefaultHeaderHeight(
     dimensions,
     statusBarHeight,
     stackPresentation,
-    isLargeHeader
+    hasLargeHeader
   );
 
   if (isHeaderInModal) {
     return (
       <ScreenStack style={styles.container}>
-        <Screen enabled isNativeStack style={StyleSheet.absoluteFill}>
+        <Screen
+          enabled
+          isNativeStack
+          hasLargeHeader={hasLargeHeader}
+          style={StyleSheet.absoluteFill}>
           <HeaderHeightContext.Provider value={headerHeight}>
             <HeaderConfig {...options} route={route} />
             {content}
@@ -217,27 +223,42 @@ const RouteView = ({
     stackPresentation = 'push';
   }
 
-  const isHeaderInPush = isAndroid
-    ? headerShown
-    : stackPresentation === 'push' && headerShown !== false;
-
   const dimensions = useSafeAreaFrame();
   const topInset = useSafeAreaInsets().top;
-  let statusBarHeight = topInset;
-  const hasDynamicIsland = Platform.OS === 'ios' && topInset === 59;
-  const isLargeHeader = options.headerLargeTitle ?? false;
+  const isStatusBarTranslucent = options.statusBarTranslucent ?? false;
+  const statusBarHeight = getStatusBarHeight(
+    topInset,
+    dimensions,
+    isStatusBarTranslucent
+  );
 
-  if (hasDynamicIsland) {
-    // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
-    statusBarHeight = 54;
-  }
-  const headerHeight = getDefaultHeaderHeight(
+  const hasLargeHeader = options.headerLargeTitle ?? false;
+
+  const defaultHeaderHeight = getDefaultHeaderHeight(
     dimensions,
     statusBarHeight,
     stackPresentation,
-    isLargeHeader
+    hasLargeHeader
   );
+
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const isHeaderInPush = isAndroid
+    ? headerShown
+    : stackPresentation === 'push' && headerShown !== false;
+
+  const staticHeaderHeight =
+    isHeaderInPush !== false ? defaultHeaderHeight : parentHeaderHeight ?? 0;
+
+  // We need to ensure the first retrieved header height will be cached and set in animatedHeaderHeight.
+  // We're caching the header height here, as on iOS native side events are not always coming to the JS on first notify.
+  // TODO: Check why first event is not being received once it is cached on the native side.
+  const cachedAnimatedHeaderHeight = React.useRef(defaultHeaderHeight);
+  const animatedHeaderHeight = React.useRef(
+    new Animated.Value(staticHeaderHeight, {
+      useNativeDriver: true,
+    })
+  ).current;
+
   const Screen = React.useContext(ScreenContext);
 
   const { dark } = useTheme();
@@ -247,6 +268,7 @@ const RouteView = ({
       key={route.key}
       enabled
       isNativeStack
+      hasLargeHeader={hasLargeHeader}
       style={StyleSheet.absoluteFill}
       sheetAllowedDetents={sheetAllowedDetents}
       sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
@@ -313,7 +335,19 @@ const RouteView = ({
           target: route.key,
         });
       }}
-      onDismissed={(e) => {
+      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,
@@ -333,25 +367,25 @@ const RouteView = ({
           type: 'gestureCancel',
           target: route.key,
         });
-      }}
-    >
-      <HeaderHeightContext.Provider
-        value={
-          isHeaderInPush !== false ? headerHeight : parentHeaderHeight ?? 0
-        }
-      >
-        <MaybeNestedStack
-          options={options}
-          route={route}
-          stackPresentation={stackPresentation}
-        >
-          {renderScene()}
-        </MaybeNestedStack>
-        {/* HeaderConfig must not be first child of a Screen. 
+      }}>
+      <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>
+          <HeaderConfig
+            {...options}
+            route={route}
+            headerShown={isHeaderInPush}
+          />
+        </HeaderHeightContext.Provider>
+      </AnimatedHeaderHeightContext.Provider>
     </Screen>
   );
 };

package/src/reanimated/ReanimatedHeaderHeightContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+// @ts-ignore file to be used only if `react-native-reanimated` available in the project
+import Animated from 'react-native-reanimated';
+
+export default React.createContext<Animated.SharedValue<number> | undefined>(
+  undefined
+);

package/src/reanimated/ReanimatedNativeStackScreen.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import {
+  HeaderHeightChangeEventType,
   InnerScreen,
   ScreenProps,
   TransitionProgressEventType,
@@ -9,6 +10,13 @@ import {
 // @ts-ignore file to be used only if `react-native-reanimated` available in the project
 import Animated, { useEvent, useSharedValue } from 'react-native-reanimated';
 import ReanimatedTransitionProgressContext from './ReanimatedTransitionProgressContext';
+import {
+  useSafeAreaFrame,
+  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(
   InnerScreen as unknown as React.ComponentClass
@@ -24,6 +32,28 @@ const ReanimatedNativeStackScreen = React.forwardRef<
   ScreenProps
 >((props, ref) => {
   const { children, ...rest } = props;
+  const { stackPresentation = 'push', hasLargeHeader } = rest;
+
+  const dimensions = useSafeAreaFrame();
+  const topInset = useSafeAreaInsets().top;
+  const isStatusBarTranslucent = rest.statusBarTranslucent ?? false;
+  const statusBarHeight = getStatusBarHeight(
+    topInset,
+    dimensions,
+    isStatusBarTranslucent
+  );
+
+  // 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,
+    hasLargeHeader
+  );
+
+  const cachedHeaderHeight = React.useRef(defaultHeaderHeight);
+  const headerHeight = useSharedValue(defaultHeaderHeight);
 
   const progress = useSharedValue(0);
   const closing = useSharedValue(0);
@@ -51,17 +81,34 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             : 'topTransitionProgress',
         ]
       )}
-      {...rest}
-    >
-      <ReanimatedTransitionProgressContext.Provider
-        value={{
-          progress: progress,
-          closing: closing,
-          goingForward: goingForward,
-        }}
-      >
-        {children}
-      </ReanimatedTransitionProgressContext.Provider>
+      onHeaderHeightChangeReanimated={useEvent(
+        (event: HeaderHeightChangeEventType) => {
+          'worklet';
+          if (event.headerHeight !== cachedHeaderHeight.current) {
+            headerHeight.value = event.headerHeight;
+            cachedHeaderHeight.current = event.headerHeight;
+          }
+        },
+        [
+          // @ts-ignore wrong type
+          Platform.OS === 'android'
+            ? 'onHeaderHeightChange'
+            : ENABLE_FABRIC
+            ? 'onHeaderHeightChange'
+            : 'topHeaderHeightChange',
+        ]
+      )}
+      {...rest}>
+      <ReanimatedHeaderHeightContext.Provider value={headerHeight}>
+        <ReanimatedTransitionProgressContext.Provider
+          value={{
+            progress,
+            closing,
+            goingForward,
+          }}>
+          {children}
+        </ReanimatedTransitionProgressContext.Provider>
+      </ReanimatedHeaderHeightContext.Provider>
     </AnimatedScreen>
   );
 });

package/src/reanimated/index.tsx

@@ -1,2 +1,3 @@
 export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';
 export { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';
+export { default as useReanimatedHeaderHeight } from './useReanimatedHeaderHeight';

package/src/reanimated/useReanimatedHeaderHeight.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import ReanimatedHeaderHeightContext from './ReanimatedHeaderHeightContext';
+
+export default function useReanimatedHeaderHeight() {
+  const height = React.useContext(ReanimatedHeaderHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the header height using Reanimated. Are you inside a screen in a navigator with a header and your NavigationContainer is wrapped in ReanimatedScreenProvider?"
+    );
+  }
+
+  return height;
+}

package/src/types.tsx

@@ -73,6 +73,10 @@ export type HeaderSubviewTypes =
   | 'center'
   | 'searchBar';
 
+export type HeaderHeightChangeEventType = {
+  headerHeight: number;
+};
+
 export type TransitionProgressEventType = {
   progress: number;
   closing: number;
@@ -107,6 +111,10 @@ export interface ScreenProps extends ViewProps {
    * Internal boolean used to not attach events used only by native-stack. It prevents non native-stack navigators from sending transition progress from their Screen components.
    */
   isNativeStack?: boolean;
+  /**
+   * Internal boolean used to detect if current header has large title on iOS.
+   */
+  hasLargeHeader?: boolean;
   /**
    * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
    * When `enableFreeze()` is run at the top of the application defaults to `true`.
@@ -178,6 +186,12 @@ export interface ScreenProps extends ViewProps {
    * The callback takes the number of dismissed screens as an argument since iOS 14 native header back button can pop more than 1 screen at a time.
    */
   onDismissed?: (e: NativeSyntheticEvent<{ dismissCount: number }>) => void;
+  /**
+   * A callback that gets called when the header height has changed.
+   */
+  onHeaderHeightChange?: (
+    e: NativeSyntheticEvent<HeaderHeightChangeEventType>
+  ) => void;
   /**
    * A callback that gets called after swipe back is canceled.
    */

package/windows/RNScreens/RNScreens.vcxproj

@@ -13,13 +13,16 @@
     <AppContainerApplication>true</AppContainerApplication>
     <ApplicationType>Windows Store</ApplicationType>
     <ApplicationTypeRevision>10.0</ApplicationTypeRevision>
-    <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0.18362.0</WindowsTargetPlatformVersion>
-    <WindowsTargetPlatformMinVersion>10.0.16299.0</WindowsTargetPlatformMinVersion>
   </PropertyGroup>
-  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
   <PropertyGroup Label="ReactNativeWindowsProps">
     <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
   </PropertyGroup>
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props')" />
+  <PropertyGroup Label="Fallback Windows SDK Versions">
+   <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0.18362.0</WindowsTargetPlatformVersion>
+   <WindowsTargetPlatformMinVersion Condition=" '$(WindowsTargetPlatformMinVersion)' == '' ">10.0.16299.0</WindowsTargetPlatformMinVersion>
+  </PropertyGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
   <ItemGroup Label="ProjectConfigurations">
     <ProjectConfiguration Include="Debug|ARM">
       <Configuration>Debug</Configuration>

package/windows/RNScreens/ScreenStack.cpp

@@ -35,6 +35,7 @@ void ScreenStack::removeAllChildren() {
 
 void ScreenStack::removeChildAt(int64_t index) {
   m_children.RemoveAt(static_cast<uint32_t>(index));
+  onChildModified(index);
 }
 
 void ScreenStack::replaceChild(
@@ -45,5 +46,20 @@ void ScreenStack::replaceChild(
     return;
 
   m_children.SetAt(index, newChild);
+  onChildModified(index);
+}
+
+void ScreenStack::onChildModified(int64_t index) {
+  // Was it the topmost item in the stack?
+  if (index >= m_children.Size() - 1) {
+    if (m_children.Size() == 0) {
+      // Nobody left
+      Content(nullptr);
+    } else {
+      // Focus on the top item
+      auto uiElement = m_children.GetAt(m_children.Size() - 1);
+      Content(uiElement);
+    }
+  }
 }
 } // namespace winrt::RNScreens::implementation

package/windows/RNScreens/ScreenStack.h

@@ -17,6 +17,7 @@ class ScreenStack
       m_children;
 
  private:
+  void onChildModified(int64_t index);
   winrt::Microsoft::ReactNative::IReactContext m_reactContext{nullptr};
 };
 } // namespace winrt::RNScreens::implementation