@react-navigation/native-stack 7.0.0-alpha.7 → 7.0.0-alpha.9

package/src/views/NativeStackView.native.tsx

@@ -104,7 +104,12 @@ const MaybeNestedStack = ({
   if (isHeaderInModal) {
     return (
       <ScreenStack style={styles.container}>
-        <Screen enabled style={StyleSheet.absoluteFill}>
+        <Screen
+          enabled
+          isNativeStack
+          hasLargeHeader={options.headerLargeTitle ?? false}
+          style={StyleSheet.absoluteFill}
+        >
           {content}
           <HeaderConfig
             {...options}
@@ -128,11 +133,13 @@ type SceneViewProps = {
   previousDescriptor?: NativeStackDescriptor;
   nextDescriptor?: NativeStackDescriptor;
   onWillDisappear: () => void;
+  onWillAppear: () => void;
   onAppear: () => void;
   onDisappear: () => void;
   onDismissed: ScreenProps['onDismissed'];
   onHeaderBackButtonClicked: ScreenProps['onHeaderBackButtonClicked'];
   onNativeDismissCancelled: ScreenProps['onDismissed'];
+  onGestureCancel: ScreenProps['onGestureCancel'];
 };
 
 const SceneView = ({
@@ -142,11 +149,13 @@ const SceneView = ({
   previousDescriptor,
   nextDescriptor,
   onWillDisappear,
+  onWillAppear,
   onAppear,
   onDisappear,
   onDismissed,
   onHeaderBackButtonClicked,
   onNativeDismissCancelled,
+  onGestureCancel,
 }: SceneViewProps) => {
   const { route, navigation, options, render } = descriptor;
 
@@ -162,20 +171,27 @@ const SceneView = ({
     animationTypeForReplace = 'push',
     gestureEnabled,
     gestureDirection = presentation === 'card' ? 'horizontal' : 'vertical',
+    gestureResponseDistance,
     header,
     headerBackButtonMenuEnabled,
     headerShown,
     headerBackground,
     headerTransparent,
     autoHideHomeIndicator,
+    keyboardHandlingEnabled,
     navigationBarColor,
     navigationBarHidden,
     orientation,
+    sheetAllowedDetents = 'large',
+    sheetLargestUndimmedDetent = 'all',
+    sheetGrabberVisible = false,
+    sheetCornerRadius = -1.0,
+    sheetExpandsWhenScrolledToEdge = true,
     statusBarAnimation,
     statusBarHidden,
     statusBarStyle,
     statusBarTranslucent,
-    statusBarColor,
+    statusBarBackgroundColor,
     freezeOnBlur,
   } = options;
 
@@ -231,17 +247,9 @@ 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,
-    statusBarHeight
-  );
+  const defaultHeaderHeight = getDefaultHeaderHeight(frame, isModal, topInset);
 
   const [customHeaderHeight, setCustomHeaderHeight] =
     React.useState(defaultHeaderHeight);
@@ -270,7 +278,9 @@ const SceneView = ({
     <Screen
       key={route.key}
       enabled
+      isNativeStack
       style={StyleSheet.absoluteFill}
+      hasLargeHeader={options.headerLargeTitle ?? false}
       customAnimationOnSwipe={animationMatchesGesture}
       fullScreenSwipeEnabled={fullScreenGestureEnabled}
       gestureEnabled={
@@ -281,29 +291,36 @@ const SceneView = ({
           : gestureEnabled
       }
       homeIndicatorHidden={autoHideHomeIndicator}
+      hideKeyboardOnSwipe={keyboardHandlingEnabled}
       navigationBarColor={navigationBarColor}
       navigationBarHidden={navigationBarHidden}
       replaceAnimation={animationTypeForReplace}
       stackPresentation={presentation === 'card' ? 'push' : presentation}
       stackAnimation={animation}
       screenOrientation={orientation}
+      sheetAllowedDetents={sheetAllowedDetents}
+      sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+      sheetGrabberVisible={sheetGrabberVisible}
+      sheetCornerRadius={sheetCornerRadius}
+      sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
       statusBarAnimation={statusBarAnimation}
       statusBarHidden={statusBarHidden}
       statusBarStyle={statusBarStyle}
-      statusBarColor={statusBarColor}
+      statusBarColor={statusBarBackgroundColor}
       statusBarTranslucent={statusBarTranslucent}
       swipeDirection={gestureDirectionOverride}
       transitionDuration={animationDuration}
+      onWillAppear={onWillAppear}
       onWillDisappear={onWillDisappear}
       onAppear={onAppear}
       onDisappear={onDisappear}
       onDismissed={onDismissed}
-      isNativeStack
+      onGestureCancel={onGestureCancel}
+      gestureResponseDistance={gestureResponseDistance}
       nativeBackButtonDismissalEnabled={false} // on Android
       onHeaderBackButtonClicked={onHeaderBackButtonClicked}
       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
@@ -457,6 +474,13 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
                 target: route.key,
               });
             }}
+            onWillAppear={() => {
+              navigation.emit({
+                type: 'transitionStart',
+                data: { closing: false },
+                target: route.key,
+              });
+            }}
             onAppear={() => {
               navigation.emit({
                 type: 'transitionEnd',
@@ -494,6 +518,12 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
                 target: state.key,
               });
             }}
+            onGestureCancel={() => {
+              navigation.emit({
+                type: 'gestureCancel',
+                target: route.key,
+              });
+            }}
           />
         );
       })}

package/src/views/NativeStackView.tsx

@@ -9,7 +9,7 @@ import {
 import {
   type ParamListBase,
   type StackNavigationState,
-  useLinkTools,
+  useLinkBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
@@ -34,7 +34,13 @@ const TRANSPARENT_PRESENTATIONS = [
 
 export function NativeStackView({ state, descriptors }: Props) {
   const parentHeaderBack = React.useContext(HeaderBackContext);
-  const { buildHref } = useLinkTools();
+  const { buildHref } = useLinkBuilder();
+
+  if (state.preloadedRoutes.length !== 0) {
+    throw new Error(
+      'Preloading routes is not supported in the NativeStackNavigator navigator.'
+    );
+  }
 
   return (
     <SafeAreaProviderCompat>
@@ -114,29 +120,28 @@ export function NativeStackView({ state, descriptors }: Props) {
                               label: headerBackTitle,
                             })
                         : headerLeft === undefined && canGoBack
-                        ? ({ tintColor }) => (
-                            <HeaderBackButton
-                              tintColor={tintColor}
-                              backImage={
-                                headerBackImageSource !== undefined
-                                  ? () => (
-                                      <Image
-                                        source={headerBackImageSource}
-                                        resizeMode="contain"
-                                        style={[
-                                          styles.backImage,
-                                          { tintColor },
-                                        ]}
-                                      />
-                                    )
-                                  : undefined
-                              }
-                              canGoBack={canGoBack}
-                              onPress={navigation.goBack}
-                              href={headerBack.href}
-                            />
-                          )
-                        : headerLeft
+                          ? ({ tintColor }) => (
+                              <HeaderBackButton
+                                tintColor={tintColor}
+                                backImage={
+                                  headerBackImageSource !== undefined
+                                    ? () => (
+                                        <Image
+                                          source={headerBackImageSource}
+                                          resizeMode="contain"
+                                          style={[
+                                            styles.backImage,
+                                            { tintColor },
+                                          ]}
+                                        />
+                                      )
+                                    : undefined
+                                }
+                                onPress={navigation.goBack}
+                                href={headerBack.href}
+                              />
+                            )
+                          : headerLeft
                     }
                     headerRight={
                       typeof headerRight === 'function'