@react-navigation/native-stack 7.0.0-rc.3 → 7.0.0-rc.30

package/lib/module/views/NativeStackView.native.js

@@ -1,64 +1,20 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+"use strict";
+
 import { getDefaultHeaderHeight, getHeaderTitle, HeaderBackContext, HeaderHeightContext, HeaderShownContext, SafeAreaProviderCompat } from '@react-navigation/elements';
 import { NavigationContext, NavigationRouteContext, StackActions, usePreventRemoveContext, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, Platform, StatusBar, StyleSheet, useAnimatedValue, View } from 'react-native';
 import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Screen, ScreenStack } from 'react-native-screens';
-import warnOnce from 'warn-once';
-import { debounce } from '../utils/debounce';
-import { getModalRouteKeys } from '../utils/getModalRoutesKeys';
-import { AnimatedHeaderHeightContext } from '../utils/useAnimatedHeaderHeight';
-import { useDismissedRouteError } from '../utils/useDismissedRouteError';
-import { useInvalidPreventRemoveError } from '../utils/useInvalidPreventRemoveError';
-import { DebugContainer } from './DebugContainer';
-import { HeaderConfig } from './HeaderConfig';
-const isAndroid = Platform.OS === 'android';
-const MaybeNestedStack = ({
-  options,
-  route,
-  presentation,
-  headerHeight,
-  headerTopInsetEnabled,
-  children
-}) => {
-  const {
-    colors
-  } = useTheme();
-  const {
-    header,
-    headerShown = true,
-    contentStyle
-  } = options;
-  const isHeaderInModal = isAndroid ? false : presentation !== 'card' && headerShown === true && header === undefined;
-  const headerShownPreviousRef = React.useRef(headerShown);
-  React.useEffect(() => {
-    warnOnce(!isAndroid && presentation !== 'card' && headerShownPreviousRef.current !== headerShown, `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`);
-    headerShownPreviousRef.current = headerShown;
-  }, [headerShown, presentation, route.name]);
-  const content = /*#__PURE__*/React.createElement(DebugContainer, {
-    style: [styles.container, presentation !== 'transparentModal' && presentation !== 'containedTransparentModal' && {
-      backgroundColor: colors.background
-    }, contentStyle],
-    stackPresentation: presentation === 'card' ? 'push' : presentation
-  }, children);
-  if (isHeaderInModal) {
-    return /*#__PURE__*/React.createElement(ScreenStack, {
-      style: styles.container
-    }, /*#__PURE__*/React.createElement(Screen, {
-      enabled: true,
-      isNativeStack: true,
-      hasLargeHeader: options.headerLargeTitle ?? false,
-      style: StyleSheet.absoluteFill
-    }, content, /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, options, {
-      route: route,
-      headerHeight: headerHeight,
-      headerTopInsetEnabled: headerTopInsetEnabled,
-      canGoBack: true
-    }))));
-  }
-  return content;
-};
+import { ScreenStack, ScreenStackItem } from 'react-native-screens';
+import { debounce } from "../utils/debounce.js";
+import { getModalRouteKeys } from "../utils/getModalRoutesKeys.js";
+import { AnimatedHeaderHeightContext } from "../utils/useAnimatedHeaderHeight.js";
+import { useDismissedRouteError } from "../utils/useDismissedRouteError.js";
+import { useInvalidPreventRemoveError } from "../utils/useInvalidPreventRemoveError.js";
+import { FooterComponent } from "./FooterComponent.js";
+import { useHeaderConfigProps } from "./useHeaderConfigProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
 const SceneView = ({
   index,
   focused,
@@ -66,6 +22,7 @@ const SceneView = ({
   previousDescriptor,
   nextDescriptor,
   isPresentationModal,
+  isPreloaded,
   onWillDisappear,
   onWillAppear,
   onAppear,
@@ -73,7 +30,8 @@ const SceneView = ({
   onDismissed,
   onHeaderBackButtonClicked,
   onNativeDismissCancelled,
-  onGestureCancel
+  onGestureCancel,
+  onSheetDetentChanged
 }) => {
   const {
     route,
@@ -90,6 +48,7 @@ const SceneView = ({
   const {
     animationDuration,
     animationTypeForReplace = 'push',
+    fullScreenGestureShadowEnabled = false,
     gestureEnabled,
     gestureDirection = presentation === 'card' ? 'horizontal' : 'vertical',
     gestureResponseDistance,
@@ -104,17 +63,21 @@ const SceneView = ({
     navigationBarTranslucent,
     navigationBarHidden,
     orientation,
-    sheetAllowedDetents = 'large',
-    sheetLargestUndimmedDetent = 'all',
+    sheetAllowedDetents = [1.0],
+    sheetLargestUndimmedDetentIndex = -1,
     sheetGrabberVisible = false,
     sheetCornerRadius = -1.0,
+    sheetElevation = 24,
     sheetExpandsWhenScrolledToEdge = true,
+    sheetInitialDetentIndex = 0,
     statusBarAnimation,
     statusBarHidden,
     statusBarStyle,
     statusBarTranslucent,
     statusBarBackgroundColor,
-    freezeOnBlur
+    unstable_sheetFooter = null,
+    freezeOnBlur,
+    contentStyle
   } = options;
   if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
     // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
@@ -142,6 +105,9 @@ const SceneView = ({
     // for navigator with first screen as `modal` and the next as `card`
     presentation = 'card';
   }
+  const {
+    colors
+  } = useTheme();
   const insets = useSafeAreaInsets();
   const frame = useSafeAreaFrame();
 
@@ -162,7 +128,7 @@ const SceneView = ({
     // FIXME: Currently screens isn't using Material 3
     // So our `getDefaultHeaderHeight` doesn't return the correct value
     // So we hardcode the value here for now until screens is updated
-    android: 56 + topInset,
+    android: ANDROID_DEFAULT_HEADER_HEIGHT + topInset,
     default: getDefaultHeaderHeight(frame, isModal, topInset)
   });
   const [headerHeight, setHeaderHeight] = React.useState(defaultHeaderHeight);
@@ -173,7 +139,7 @@ const SceneView = ({
   debounce(setHeaderHeight, 100), []);
   const hasCustomHeader = header !== undefined;
   let headerHeightCorrectionOffset = 0;
-  if (isAndroid && !hasCustomHeader) {
+  if (Platform.OS === 'android' && !hasCustomHeader) {
     const statusBarHeight = StatusBar.currentHeight ?? 0;
 
     // FIXME: On Android, the native header height is not correctly calculated
@@ -192,30 +158,45 @@ const SceneView = ({
   // we apply additional padding in header only if its true.
   // For more details see: https://github.com/react-navigation/react-navigation/pull/12014
   const headerTopInsetEnabled = typeof statusBarTranslucent === 'boolean' ? statusBarTranslucent : topInset !== 0;
+  const canGoBack = previousDescriptor != null || parentHeaderBack != null;
   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 headerBack = React.useMemo(() => {
+    if (canGoBack) {
+      return {
+        href: undefined,
+        // No href needed for native
+        title: backTitle
+      };
+    }
+    return undefined;
+  }, [canGoBack, backTitle]);
   const isRemovePrevented = preventedRoutes[route.key]?.preventRemove;
-  return /*#__PURE__*/React.createElement(Screen, {
-    key: route.key,
-    enabled: true,
-    isNativeStack: true,
+  const headerConfig = useHeaderConfigProps({
+    ...options,
+    route,
+    canGoBack,
+    headerBackButtonMenuEnabled: isRemovePrevented !== undefined ? !isRemovePrevented : headerBackButtonMenuEnabled,
+    headerBackTitle: options.headerBackTitle !== undefined ? options.headerBackTitle : undefined,
+    headerHeight,
+    headerShown: header !== undefined ? false : headerShown,
+    headerTopInsetEnabled
+  });
+  return /*#__PURE__*/_jsx(ScreenStackItem, {
+    activityState: isPreloaded ? 0 : 2,
     style: StyleSheet.absoluteFill,
-    hasLargeHeader: options.headerLargeTitle ?? false,
+    accessibilityElementsHidden: !focused,
+    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
     customAnimationOnSwipe: animationMatchesGesture,
     fullScreenSwipeEnabled: fullScreenGestureEnabled,
-    gestureEnabled: isAndroid ?
+    fullScreenSwipeShadowEnabled: fullScreenGestureShadowEnabled,
+    freezeOnBlur: freezeOnBlur,
+    gestureEnabled: Platform.OS === 'android' ?
     // This prop enables handling of system back gestures on Android
     // Since we handle them in JS side, we disable this
     false : gestureEnabled,
     homeIndicatorHidden: autoHideHomeIndicator,
     hideKeyboardOnSwipe: keyboardHandlingEnabled,
-    navigationBarColor: navigationBarColor
-    // @ts-expect-error prop supported from react-native-screens 3.32.0 onwards
-    ,
+    navigationBarColor: navigationBarColor,
     navigationBarTranslucent: navigationBarTranslucent,
     navigationBarHidden: navigationBarHidden,
     replaceAnimation: animationTypeForReplace,
@@ -223,9 +204,11 @@ const SceneView = ({
     stackAnimation: animation,
     screenOrientation: orientation,
     sheetAllowedDetents: sheetAllowedDetents,
-    sheetLargestUndimmedDetent: sheetLargestUndimmedDetent,
+    sheetLargestUndimmedDetentIndex: sheetLargestUndimmedDetentIndex,
     sheetGrabberVisible: sheetGrabberVisible,
+    sheetInitialDetentIndex: sheetInitialDetentIndex,
     sheetCornerRadius: sheetCornerRadius,
+    sheetElevation: sheetElevation,
     sheetExpandsWhenScrolledToEdge: sheetExpandsWhenScrolledToEdge,
     statusBarAnimation: statusBarAnimation,
     statusBarHidden: statusBarHidden,
@@ -240,6 +223,7 @@ const SceneView = ({
     onDisappear: onDisappear,
     onDismissed: onDismissed,
     onGestureCancel: onGestureCancel,
+    onSheetDetentChanged: onSheetDetentChanged,
     gestureResponseDistance: gestureResponseDistance,
     nativeBackButtonDismissalEnabled: false // on Android
     ,
@@ -259,6 +243,12 @@ const SceneView = ({
     }], {
       useNativeDriver: true,
       listener: e => {
+        if (Platform.OS === 'android' && (options.headerBackground != null || options.headerTransparent)) {
+          // FIXME: On Android, we get 0 if the header is translucent
+          // So we set a default height in that case
+          setHeaderHeight(ANDROID_DEFAULT_HEADER_HEIGHT + topInset);
+          return;
+        }
         if (e.nativeEvent && typeof e.nativeEvent === 'object' && 'headerHeight' in e.nativeEvent && typeof e.nativeEvent.headerHeight === 'number') {
           const headerHeight = e.nativeEvent.headerHeight + headerHeightCorrectionOffset;
 
@@ -272,68 +262,67 @@ const SceneView = ({
           }
         }
       }
-    })
-    // this prop is available since rn-screens 3.16
+    }),
+    contentStyle: [presentation !== 'transparentModal' && presentation !== 'containedTransparentModal' && {
+      backgroundColor: colors.background
+    }, contentStyle],
+    headerConfig: headerConfig
+    // When ts-expect-error is added, it affects all the props below it
+    // So we keep any props that need it at the end
+    // Otherwise invalid props may not be caught by TypeScript
     ,
-    freezeOnBlur: freezeOnBlur
-  }, /*#__PURE__*/React.createElement(NavigationContext.Provider, {
-    value: navigation
-  }, /*#__PURE__*/React.createElement(NavigationRouteContext.Provider, {
-    value: route
-  }, /*#__PURE__*/React.createElement(HeaderShownContext.Provider, {
-    value: isParentHeaderShown || headerShown !== false
-  }, /*#__PURE__*/React.createElement(AnimatedHeaderHeightContext.Provider, {
-    value: animatedHeaderHeight
-  }, /*#__PURE__*/React.createElement(HeaderHeightContext.Provider, {
-    value: headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
-  }, headerBackground != null ?
-  /*#__PURE__*/
-  /**
-   * 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)
-   */
-  React.createElement(View, {
-    style: [styles.background, headerTransparent ? styles.translucent : null, {
-      height: headerHeight
-    }]
-  }, headerBackground()) : null, /*#__PURE__*/React.createElement(View, {
-    accessibilityElementsHidden: !focused,
-    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
-    style: styles.scene
-  }, /*#__PURE__*/React.createElement(MaybeNestedStack, {
-    options: options,
-    route: route,
-    presentation: presentation,
-    headerHeight: headerHeight,
-    headerTopInsetEnabled: headerTopInsetEnabled
-  }, /*#__PURE__*/React.createElement(HeaderBackContext.Provider, {
-    value: headerBack
-  }, render())), header !== undefined && headerShown !== false ? /*#__PURE__*/React.createElement(View, {
-    onLayout: e => {
-      const headerHeight = e.nativeEvent.layout.height;
-      setHeaderHeight(headerHeight);
-      rawAnimatedHeaderHeight.setValue(headerHeight);
-    },
-    style: headerTransparent ? styles.absolute : null
-  }, header({
-    back: headerBack,
-    options,
-    route,
-    navigation
-  })) : null), /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, 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
-  }))))))));
+    children: /*#__PURE__*/_jsx(NavigationContext.Provider, {
+      value: navigation,
+      children: /*#__PURE__*/_jsx(NavigationRouteContext.Provider, {
+        value: route,
+        children: /*#__PURE__*/_jsx(AnimatedHeaderHeightContext.Provider, {
+          value: animatedHeaderHeight,
+          children: /*#__PURE__*/_jsxs(HeaderHeightContext.Provider, {
+            value: headerShown !== false ? headerHeight : parentHeaderHeight ?? 0,
+            children: [headerBackground != null ?
+            /*#__PURE__*/
+            /**
+             * 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)
+             */
+            _jsx(View, {
+              style: [styles.background, headerTransparent ? styles.translucent : null, {
+                height: headerHeight
+              }],
+              children: headerBackground()
+            }) : null, header !== undefined && headerShown !== false ? /*#__PURE__*/_jsx(View, {
+              onLayout: e => {
+                const headerHeight = e.nativeEvent.layout.height;
+                setHeaderHeight(headerHeight);
+                rawAnimatedHeaderHeight.setValue(headerHeight);
+              },
+              style: [styles.header, headerTransparent ? styles.absolute : null],
+              children: header({
+                back: headerBack,
+                options,
+                route,
+                navigation
+              })
+            }) : null, /*#__PURE__*/_jsx(HeaderShownContext.Provider, {
+              value: isParentHeaderShown || headerShown !== false,
+              children: /*#__PURE__*/_jsx(HeaderBackContext.Provider, {
+                value: headerBack,
+                children: render()
+              })
+            }), presentation === 'formSheet' && unstable_sheetFooter && /*#__PURE__*/_jsx(FooterComponent, {
+              children: unstable_sheetFooter()
+            })]
+          })
+        })
+      })
+    })
+  }, route.key);
 };
 export function NativeStackView({
   state,
   navigation,
-  descriptors
+  descriptors,
+  describe
 }) {
   const {
     setNextDismissedKey
@@ -343,102 +332,118 @@ export function NativeStackView({
   } = useTheme();
   useInvalidPreventRemoveError(descriptors);
   const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
-  return /*#__PURE__*/React.createElement(SafeAreaProviderCompat, {
+  const preloadedDescriptors = state.preloadedRoutes.reduce((acc, route) => {
+    acc[route.key] = acc[route.key] || describe(route, true);
+    return acc;
+  }, {});
+  return /*#__PURE__*/_jsx(SafeAreaProviderCompat, {
     style: {
       backgroundColor: colors.background
-    }
-  }, /*#__PURE__*/React.createElement(ScreenStack, {
-    style: styles.container
-  }, state.routes.map((route, index) => {
-    const descriptor = descriptors[route.key];
-    const isFocused = state.index === index;
-    const previousKey = state.routes[index - 1]?.key;
-    const nextKey = state.routes[index + 1]?.key;
-    const previousDescriptor = previousKey ? descriptors[previousKey] : undefined;
-    const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-    const isModal = modalRouteKeys.includes(route.key);
-    return /*#__PURE__*/React.createElement(SceneView, {
-      key: route.key,
-      index: index,
-      focused: isFocused,
-      descriptor: descriptor,
-      previousDescriptor: previousDescriptor,
-      nextDescriptor: nextDescriptor,
-      isPresentationModal: isModal,
-      onWillDisappear: () => {
-        navigation.emit({
-          type: 'transitionStart',
-          data: {
-            closing: true
+    },
+    children: /*#__PURE__*/_jsx(ScreenStack, {
+      style: styles.container,
+      children: state.routes.concat(state.preloadedRoutes).map((route, index) => {
+        const descriptor = descriptors[route.key] ?? preloadedDescriptors[route.key];
+        const isFocused = state.index === index;
+        const previousKey = state.routes[index - 1]?.key;
+        const nextKey = state.routes[index + 1]?.key;
+        const previousDescriptor = previousKey ? descriptors[previousKey] : undefined;
+        const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
+        const isModal = modalRouteKeys.includes(route.key);
+        const isPreloaded = preloadedDescriptors[route.key] !== undefined && descriptors[route.key] === undefined;
+        return /*#__PURE__*/_jsx(SceneView, {
+          index: index,
+          focused: isFocused,
+          descriptor: descriptor,
+          previousDescriptor: previousDescriptor,
+          nextDescriptor: nextDescriptor,
+          isPresentationModal: isModal,
+          isPreloaded: isPreloaded,
+          onWillDisappear: () => {
+            navigation.emit({
+              type: 'transitionStart',
+              data: {
+                closing: true
+              },
+              target: route.key
+            });
           },
-          target: route.key
-        });
-      },
-      onWillAppear: () => {
-        navigation.emit({
-          type: 'transitionStart',
-          data: {
-            closing: false
+          onWillAppear: () => {
+            navigation.emit({
+              type: 'transitionStart',
+              data: {
+                closing: false
+              },
+              target: route.key
+            });
           },
-          target: route.key
-        });
-      },
-      onAppear: () => {
-        navigation.emit({
-          type: 'transitionEnd',
-          data: {
-            closing: false
+          onAppear: () => {
+            navigation.emit({
+              type: 'transitionEnd',
+              data: {
+                closing: false
+              },
+              target: route.key
+            });
           },
-          target: route.key
-        });
-      },
-      onDisappear: () => {
-        navigation.emit({
-          type: 'transitionEnd',
-          data: {
-            closing: true
+          onDisappear: () => {
+            navigation.emit({
+              type: 'transitionEnd',
+              data: {
+                closing: true
+              },
+              target: route.key
+            });
           },
-          target: route.key
-        });
-      },
-      onDismissed: event => {
-        navigation.dispatch({
-          ...StackActions.pop(event.nativeEvent.dismissCount),
-          source: route.key,
-          target: state.key
-        });
-        setNextDismissedKey(route.key);
-      },
-      onHeaderBackButtonClicked: () => {
-        navigation.dispatch({
-          ...StackActions.pop(),
-          source: route.key,
-          target: state.key
-        });
-      },
-      onNativeDismissCancelled: event => {
-        navigation.dispatch({
-          ...StackActions.pop(event.nativeEvent.dismissCount),
-          source: route.key,
-          target: state.key
-        });
-      },
-      onGestureCancel: () => {
-        navigation.emit({
-          type: 'gestureCancel',
-          target: route.key
-        });
-      }
-    });
-  })));
+          onDismissed: event => {
+            navigation.dispatch({
+              ...StackActions.pop(event.nativeEvent.dismissCount),
+              source: route.key,
+              target: state.key
+            });
+            setNextDismissedKey(route.key);
+          },
+          onHeaderBackButtonClicked: () => {
+            navigation.dispatch({
+              ...StackActions.pop(),
+              source: route.key,
+              target: state.key
+            });
+          },
+          onNativeDismissCancelled: event => {
+            navigation.dispatch({
+              ...StackActions.pop(event.nativeEvent.dismissCount),
+              source: route.key,
+              target: state.key
+            });
+          },
+          onGestureCancel: () => {
+            navigation.emit({
+              type: 'gestureCancel',
+              target: route.key
+            });
+          },
+          onSheetDetentChanged: event => {
+            navigation.emit({
+              type: 'sheetDetentChange',
+              target: route.key,
+              data: {
+                index: event.nativeEvent.index,
+                stable: event.nativeEvent.isStable
+              }
+            });
+          }
+        }, route.key);
+      })
+    })
+  });
 }
 const styles = StyleSheet.create({
   container: {
     flex: 1
   },
-  scene: {
-    flex: 1,
-    flexDirection: 'column-reverse'
+  header: {
+    zIndex: 1
   },
   absolute: {
     position: 'absolute',