@react-navigation/native-stack 7.0.0-alpha.4 → 7.0.0-alpha.6

package/src/views/NativeStackView.native.tsx

@@ -9,24 +9,30 @@ import {
 import {
   NavigationContext,
   NavigationRouteContext,
-  ParamListBase,
-  Route,
+  type ParamListBase,
+  type Route,
   StackActions,
-  StackNavigationState,
+  type StackNavigationState,
   usePreventRemoveContext,
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import {
+  Animated,
+  Platform,
+  StyleSheet,
+  useAnimatedValue,
+  View,
+} from 'react-native';
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-import type { ScreenProps } from 'react-native-screens';
 import {
   Screen,
+  type ScreenProps,
   ScreenStack,
-  StackPresentationTypes,
+  type StackPresentationTypes,
 } from 'react-native-screens';
 import warnOnce from 'warn-once';
 
@@ -36,6 +42,7 @@ import type {
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
 } from '../types';
+import { AnimatedHeaderHeightContext } from '../utils/useAnimatedHeaderHeight';
 import { useDismissedRouteError } from '../utils/useDismissedRouteError';
 import { useInvalidPreventRemoveError } from '../utils/useInvalidPreventRemoveError';
 import { DebugContainer } from './DebugContainer';
@@ -142,13 +149,23 @@ const SceneView = ({
   onNativeDismissCancelled,
 }: SceneViewProps) => {
   const { route, navigation, options, render } = descriptor;
+
+  let {
+    animation,
+    animationMatchesGesture,
+    fullScreenGestureEnabled,
+    presentation = 'card',
+  } = options;
+
   const {
     animationDuration,
     animationTypeForReplace = 'push',
     gestureEnabled,
+    gestureDirection = presentation === 'card' ? 'horizontal' : 'vertical',
     header,
     headerBackButtonMenuEnabled,
     headerShown,
+    headerBackground,
     headerTransparent,
     autoHideHomeIndicator,
     navigationBarColor,
@@ -162,26 +179,20 @@ const SceneView = ({
     freezeOnBlur,
   } = options;
 
-  let {
-    animation,
-    customAnimationOnGesture,
-    fullScreenGestureEnabled,
-    presentation = 'card',
-    gestureDirection = presentation === 'card' ? 'horizontal' : 'vertical',
-  } = options;
-
   if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
     // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
     // so the screen can be dismissed from any point on screen.
-    // `customAnimationOnGesture` needs to be set to `true` so the `animation` set by user can be used,
+    // `animationMatchesGesture` needs to be set to `true` so the `animation` set by user can be used,
     // otherwise `simple_push` will be used.
     // Also, the default animation for this direction seems to be `slide_from_bottom`.
     if (fullScreenGestureEnabled === undefined) {
       fullScreenGestureEnabled = true;
     }
-    if (customAnimationOnGesture === undefined) {
-      customAnimationOnGesture = true;
+
+    if (animationMatchesGesture === undefined) {
+      animationMatchesGesture = true;
     }
+
     if (animation === undefined) {
       animation = 'slide_from_bottom';
     }
@@ -220,23 +231,38 @@ const SceneView = ({
       ? 0
       : insets.top;
 
+  // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
+  const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50;
+  const statusBarHeight = hasDynamicIsland ? topInset - 5 : topInset;
+
   const { preventedRoutes } = usePreventRemoveContext();
 
-  const defaultHeaderHeight = getDefaultHeaderHeight(frame, isModal, topInset);
+  const defaultHeaderHeight = getDefaultHeaderHeight(
+    frame,
+    isModal,
+    statusBarHeight
+  );
 
   const [customHeaderHeight, setCustomHeaderHeight] =
     React.useState(defaultHeaderHeight);
 
+  const animatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
+
   const headerTopInsetEnabled = topInset !== 0;
   const headerHeight = header ? customHeaderHeight : defaultHeaderHeight;
-  const headerBack = previousDescriptor
-    ? {
-        title: getHeaderTitle(
-          previousDescriptor.options,
-          previousDescriptor.route.name
-        ),
-      }
-    : parentHeaderBack;
+
+  const backTitle = previousDescriptor
+    ? getHeaderTitle(previousDescriptor.options, previousDescriptor.route.name)
+    : parentHeaderBack?.title;
+
+  const headerBack = React.useMemo(
+    () => ({
+      // No href needed for native
+      href: undefined,
+      title: backTitle,
+    }),
+    [backTitle]
+  );
 
   const isRemovePrevented = preventedRoutes[route.key]?.preventRemove;
 
@@ -245,7 +271,7 @@ const SceneView = ({
       key={route.key}
       enabled
       style={StyleSheet.absoluteFill}
-      customAnimationOnSwipe={customAnimationOnGesture}
+      customAnimationOnSwipe={animationMatchesGesture}
       fullScreenSwipeEnabled={fullScreenGestureEnabled}
       gestureEnabled={
         isAndroid
@@ -275,9 +301,23 @@ const SceneView = ({
       isNativeStack
       nativeBackButtonDismissalEnabled={false} // on Android
       onHeaderBackButtonClicked={onHeaderBackButtonClicked}
-      // @ts-ignore props not exported from rn-screens
       preventNativeDismiss={isRemovePrevented} // on iOS
       onNativeDismissCancelled={onNativeDismissCancelled}
+      // @ts-expect-error this prop is available since rn-screens 3.26
+      // Unfortunately, because of the bug that exists on Fabric, where native event drivers
+      // for Animated objects are being created after the first notifications about the header height
+      // from the native side, `onHeaderHeightChange` event does not notify
+      // `animatedHeaderHeight` about initial values on appearing screens at the moment.
+      onHeaderHeightChange={Animated.event(
+        [
+          {
+            nativeEvent: {
+              headerHeight: animatedHeaderHeight,
+            },
+          },
+        ],
+        { useNativeDriver: true }
+      )}
       // this prop is available since rn-screens 3.16
       freezeOnBlur={freezeOnBlur}
     >
@@ -286,75 +326,92 @@ const SceneView = ({
           <HeaderShownContext.Provider
             value={isParentHeaderShown || headerShown !== false}
           >
-            <HeaderHeightContext.Provider
-              value={
-                headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
-              }
-            >
-              <View
-                accessibilityElementsHidden={!focused}
-                importantForAccessibility={
-                  focused ? 'auto' : 'no-hide-descendants'
+            <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
+              <HeaderHeightContext.Provider
+                value={
+                  headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
                 }
-                style={styles.scene}
               >
-                <MaybeNestedStack
-                  options={options}
-                  route={route}
-                  presentation={presentation}
-                  headerHeight={headerHeight}
-                  headerTopInsetEnabled={headerTopInsetEnabled}
-                >
-                  <HeaderBackContext.Provider value={headerBack}>
-                    {render()}
-                  </HeaderBackContext.Provider>
-                </MaybeNestedStack>
-                {header !== undefined && headerShown !== false ? (
+                {headerBackground != null ? (
+                  /**
+                   * To show a custom header background, we render it at the top of the screen below the header
+                   * The header also needs to be positioned absolutely (with `translucent` style)
+                   */
                   <View
-                    onLayout={(e) => {
-                      setCustomHeaderHeight(e.nativeEvent.layout.height);
-                    }}
-                    style={headerTransparent ? styles.absolute : null}
+                    style={[
+                      styles.background,
+                      headerTransparent ? styles.translucent : null,
+                      { height: headerHeight },
+                    ]}
                   >
-                    {header({
-                      back: headerBack,
-                      options,
-                      route,
-                      navigation,
-                    })}
+                    {headerBackground()}
                   </View>
                 ) : null}
-              </View>
-              {/**
-               * `HeaderConfig` needs to be the direct child of `Screen` without any intermediate `View`
-               * We don't render it conditionally to make it possible to dynamically render a custom `header`
-               * Otherwise dynamically rendering a custom `header` leaves the native header visible
-               *
-               * https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig
-               *
-               * 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}
-                headerBackButtonMenuEnabled={
-                  isRemovePrevented !== undefined
-                    ? !isRemovePrevented
-                    : headerBackButtonMenuEnabled
-                }
-                headerShown={header !== undefined ? false : headerShown}
-                headerHeight={headerHeight}
-                headerBackTitle={
-                  options.headerBackTitle !== undefined
-                    ? options.headerBackTitle
-                    : undefined
-                }
-                headerTopInsetEnabled={headerTopInsetEnabled}
-                canGoBack={headerBack !== undefined}
-              />
-            </HeaderHeightContext.Provider>
+                <View
+                  accessibilityElementsHidden={!focused}
+                  importantForAccessibility={
+                    focused ? 'auto' : 'no-hide-descendants'
+                  }
+                  style={styles.scene}
+                >
+                  <MaybeNestedStack
+                    options={options}
+                    route={route}
+                    presentation={presentation}
+                    headerHeight={headerHeight}
+                    headerTopInsetEnabled={headerTopInsetEnabled}
+                  >
+                    <HeaderBackContext.Provider value={headerBack}>
+                      {render()}
+                    </HeaderBackContext.Provider>
+                  </MaybeNestedStack>
+                  {header !== undefined && headerShown !== false ? (
+                    <View
+                      onLayout={(e) => {
+                        setCustomHeaderHeight(e.nativeEvent.layout.height);
+                      }}
+                      style={headerTransparent ? styles.absolute : null}
+                    >
+                      {header({
+                        back: headerBack,
+                        options,
+                        route,
+                        navigation,
+                      })}
+                    </View>
+                  ) : null}
+                </View>
+                {/**
+                 * `HeaderConfig` needs to be the direct child of `Screen` without any intermediate `View`
+                 * We don't render it conditionally to make it possible to dynamically render a custom `header`
+                 * Otherwise dynamically rendering a custom `header` leaves the native header visible
+                 *
+                 * https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig
+                 *
+                 * 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}
+                  headerBackButtonMenuEnabled={
+                    isRemovePrevented !== undefined
+                      ? !isRemovePrevented
+                      : headerBackButtonMenuEnabled
+                  }
+                  headerShown={header !== undefined ? false : headerShown}
+                  headerHeight={headerHeight}
+                  headerBackTitle={
+                    options.headerBackTitle !== undefined
+                      ? options.headerBackTitle
+                      : undefined
+                  }
+                  headerTopInsetEnabled={headerTopInsetEnabled}
+                  canGoBack={headerBack !== undefined}
+                />
+              </HeaderHeightContext.Provider>
+            </AnimatedHeaderHeightContext.Provider>
           </HeaderShownContext.Provider>
         </NavigationRouteContext.Provider>
       </NavigationContext.Provider>
@@ -466,4 +523,15 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
   },
+  translucent: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    elevation: 1,
+  },
+  background: {
+    overflow: 'hidden',
+  },
 });

package/src/views/NativeStackView.tsx

@@ -6,9 +6,10 @@ import {
   SafeAreaProviderCompat,
   Screen,
 } from '@react-navigation/elements';
-import type {
-  ParamListBase,
-  StackNavigationState,
+import {
+  type ParamListBase,
+  type StackNavigationState,
+  useLinkTools,
 } from '@react-navigation/native';
 import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
@@ -33,6 +34,7 @@ const TRANSPARENT_PRESENTATIONS = [
 
 export function NativeStackView({ state, descriptors }: Props) {
   const parentHeaderBack = React.useContext(HeaderBackContext);
+  const { buildHref } = useLinkTools();
 
   return (
     <SafeAreaProviderCompat>
@@ -53,6 +55,10 @@ export function NativeStackView({ state, descriptors }: Props) {
                   previousDescriptor.options,
                   previousDescriptor.route.name
                 ),
+                href: buildHref(
+                  previousDescriptor.route.name,
+                  previousDescriptor.route.params
+                ),
               }
             : parentHeaderBack;
 
@@ -116,6 +122,7 @@ export function NativeStackView({ state, descriptors }: Props) {
                                   ? () => (
                                       <Image
                                         source={headerBackImageSource}
+                                        resizeMode="contain"
                                         style={[
                                           styles.backImage,
                                           { tintColor },
@@ -124,8 +131,9 @@ export function NativeStackView({ state, descriptors }: Props) {
                                     )
                                   : undefined
                               }
-                              onPress={navigation.goBack}
                               canGoBack={canGoBack}
+                              onPress={navigation.goBack}
+                              href={headerBack.href}
                             />
                           )
                         : headerLeft
@@ -191,6 +199,5 @@ const styles = StyleSheet.create({
     height: 24,
     width: 24,
     margin: 3,
-    resizeMode: 'contain',
   },
 });