@react-navigation/native-stack 7.0.0-rc.9 → 7.0.0

package/src/views/NativeStackView.native.tsx

@@ -10,7 +10,7 @@ import {
   NavigationContext,
   NavigationRouteContext,
   type ParamListBase,
-  type Route,
+  type RouteProp,
   StackActions,
   type StackNavigationState,
   usePreventRemoveContext,
@@ -30,104 +30,25 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
-  Screen,
   type ScreenProps,
   ScreenStack,
-  type StackPresentationTypes,
+  ScreenStackItem,
 } from 'react-native-screens';
-import warnOnce from 'warn-once';
 
 import type {
   NativeStackDescriptor,
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
-  NativeStackNavigationOptions,
 } from '../types';
 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,
-}: {
-  options: NativeStackNavigationOptions;
-  route: Route<string>;
-  presentation: Exclude<StackPresentationTypes, 'push'> | 'card';
-  headerHeight: number;
-  headerTopInsetEnabled: boolean;
-  children: React.ReactNode;
-}) => {
-  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 = (
-    <DebugContainer
-      style={[
-        styles.container,
-        presentation !== 'transparentModal' &&
-          presentation !== 'containedTransparentModal' && {
-            backgroundColor: colors.background,
-          },
-        contentStyle,
-      ]}
-      stackPresentation={presentation === 'card' ? 'push' : presentation}
-    >
-      {children}
-    </DebugContainer>
-  );
+import { FooterComponent } from './FooterComponent';
+import { useHeaderConfigProps } from './useHeaderConfigProps';
 
-  if (isHeaderInModal) {
-    return (
-      <ScreenStack style={styles.container}>
-        <Screen
-          enabled
-          isNativeStack
-          hasLargeHeader={options.headerLargeTitle ?? false}
-          style={StyleSheet.absoluteFill}
-        >
-          {content}
-          <HeaderConfig
-            {...options}
-            route={route}
-            headerHeight={headerHeight}
-            headerTopInsetEnabled={headerTopInsetEnabled}
-            canGoBack
-          />
-        </Screen>
-      </ScreenStack>
-    );
-  }
-
-  return content;
-};
+const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
 
 type SceneViewProps = {
   index: number;
@@ -136,6 +57,7 @@ type SceneViewProps = {
   previousDescriptor?: NativeStackDescriptor;
   nextDescriptor?: NativeStackDescriptor;
   isPresentationModal?: boolean;
+  isPreloaded?: boolean;
   onWillDisappear: () => void;
   onWillAppear: () => void;
   onAppear: () => void;
@@ -144,6 +66,7 @@ type SceneViewProps = {
   onHeaderBackButtonClicked: ScreenProps['onHeaderBackButtonClicked'];
   onNativeDismissCancelled: ScreenProps['onDismissed'];
   onGestureCancel: ScreenProps['onGestureCancel'];
+  onSheetDetentChanged: ScreenProps['onSheetDetentChanged'];
 };
 
 const SceneView = ({
@@ -153,6 +76,7 @@ const SceneView = ({
   previousDescriptor,
   nextDescriptor,
   isPresentationModal,
+  isPreloaded,
   onWillDisappear,
   onWillAppear,
   onAppear,
@@ -161,6 +85,7 @@ const SceneView = ({
   onHeaderBackButtonClicked,
   onNativeDismissCancelled,
   onGestureCancel,
+  onSheetDetentChanged,
 }: SceneViewProps) => {
   const { route, navigation, options, render } = descriptor;
 
@@ -174,6 +99,7 @@ const SceneView = ({
   const {
     animationDuration,
     animationTypeForReplace = 'push',
+    fullScreenGestureShadowEnabled = true,
     gestureEnabled,
     gestureDirection = presentation === 'card' ? 'horizontal' : 'vertical',
     gestureResponseDistance,
@@ -188,17 +114,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,
+    unstable_sheetFooter = null,
     freezeOnBlur,
+    contentStyle,
   } = options;
 
   if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
@@ -232,6 +162,7 @@ const SceneView = ({
     presentation = 'card';
   }
 
+  const { colors } = useTheme();
   const insets = useSafeAreaInsets();
   const frame = useSafeAreaFrame();
 
@@ -259,7 +190,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),
   });
 
@@ -276,7 +207,7 @@ const SceneView = ({
 
   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
@@ -307,32 +238,55 @@ const SceneView = ({
       ? 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;
 
+  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 (
-    <Screen
+    <ScreenStackItem
       key={route.key}
-      enabled
-      isNativeStack
+      screenId={route.key}
+      activityState={isPreloaded ? 0 : 2}
       style={StyleSheet.absoluteFill}
-      hasLargeHeader={options.headerLargeTitle ?? false}
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       customAnimationOnSwipe={animationMatchesGesture}
       fullScreenSwipeEnabled={fullScreenGestureEnabled}
+      fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
+      freezeOnBlur={freezeOnBlur}
       gestureEnabled={
-        isAndroid
+        Platform.OS === 'android'
           ? // This prop enables handling of system back gestures on Android
             // Since we handle them in JS side, we disable this
             false
@@ -341,7 +295,6 @@ const SceneView = ({
       homeIndicatorHidden={autoHideHomeIndicator}
       hideKeyboardOnSwipe={keyboardHandlingEnabled}
       navigationBarColor={navigationBarColor}
-      // @ts-expect-error prop supported from react-native-screens 3.32.0 onwards
       navigationBarTranslucent={navigationBarTranslucent}
       navigationBarHidden={navigationBarHidden}
       replaceAnimation={animationTypeForReplace}
@@ -349,9 +302,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}
@@ -366,6 +321,7 @@ const SceneView = ({
       onDisappear={onDisappear}
       onDismissed={onDismissed}
       onGestureCancel={onGestureCancel}
+      onSheetDetentChanged={onSheetDetentChanged}
       gestureResponseDistance={gestureResponseDistance}
       nativeBackButtonDismissalEnabled={false} // on Android
       onHeaderBackButtonClicked={onHeaderBackButtonClicked}
@@ -386,6 +342,16 @@ 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' &&
@@ -410,107 +376,77 @@ const SceneView = ({
           },
         }
       )}
-      // this prop is available since rn-screens 3.16
-      freezeOnBlur={freezeOnBlur}
+      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
     >
       <NavigationContext.Provider value={navigation}>
         <NavigationRouteContext.Provider value={route}>
-          <HeaderShownContext.Provider
-            value={isParentHeaderShown || headerShown !== false}
-          >
-            <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
-              <HeaderHeightContext.Provider
-                value={
-                  headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
-                }
-              >
-                {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
-                    style={[
-                      styles.background,
-                      headerTransparent ? styles.translucent : null,
-                      { height: headerHeight },
-                    ]}
-                  >
-                    {headerBackground()}
-                  </View>
-                ) : null}
+          <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
+            <HeaderHeightContext.Provider
+              value={
+                headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
+              }
+            >
+              {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
+                  style={[
+                    styles.background,
+                    headerTransparent ? styles.translucent : null,
+                    { height: headerHeight },
+                  ]}
+                >
+                  {headerBackground()}
+                </View>
+              ) : null}
+              {header !== undefined && headerShown !== false ? (
                 <View
-                  accessibilityElementsHidden={!focused}
-                  importantForAccessibility={
-                    focused ? 'auto' : 'no-hide-descendants'
-                  }
-                  style={styles.scene}
+                  onLayout={(e) => {
+                    const headerHeight = e.nativeEvent.layout.height;
+
+                    setHeaderHeight(headerHeight);
+                    rawAnimatedHeaderHeight.setValue(headerHeight);
+                  }}
+                  style={[
+                    styles.header,
+                    headerTransparent ? styles.absolute : null,
+                  ]}
                 >
-                  <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) => {
-                        const headerHeight = e.nativeEvent.layout.height;
-
-                        setHeaderHeight(headerHeight);
-                        rawAnimatedHeaderHeight.setValue(headerHeight);
-                      }}
-                      style={headerTransparent ? styles.absolute : null}
-                    >
-                      {header({
-                        back: headerBack,
-                        options,
-                        route,
-                        navigation,
-                      })}
-                    </View>
-                  ) : null}
+                  {header({
+                    back: headerBack,
+                    options,
+                    route,
+                    navigation,
+                  })}
                 </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>
+              ) : null}
+              <HeaderShownContext.Provider
+                value={isParentHeaderShown || headerShown !== false}
+              >
+                <HeaderBackContext.Provider value={headerBack}>
+                  {render()}
+                </HeaderBackContext.Provider>
+              </HeaderShownContext.Provider>
+              {presentation === 'formSheet' && unstable_sheetFooter && (
+                <FooterComponent>{unstable_sheetFooter()}</FooterComponent>
+              )}
+            </HeaderHeightContext.Provider>
+          </AnimatedHeaderHeightContext.Provider>
         </NavigationRouteContext.Provider>
       </NavigationContext.Provider>
-    </Screen>
+    </ScreenStackItem>
   );
 };
 
@@ -518,9 +454,18 @@ type Props = {
   state: StackNavigationState<ParamListBase>;
   navigation: NativeStackNavigationHelpers;
   descriptors: NativeStackDescriptorMap;
+  describe: (
+    route: RouteProp<ParamListBase>,
+    placeholder: boolean
+  ) => NativeStackDescriptor;
 };
 
-export function NativeStackView({ state, navigation, descriptors }: Props) {
+export function NativeStackView({
+  state,
+  navigation,
+  descriptors,
+  describe,
+}: Props) {
   const { setNextDismissedKey } = useDismissedRouteError(state);
 
   const { colors } = useTheme();
@@ -529,11 +474,18 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
 
   const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
 
+  const preloadedDescriptors =
+    state.preloadedRoutes.reduce<NativeStackDescriptorMap>((acc, route) => {
+      acc[route.key] = acc[route.key] || describe(route, true);
+      return acc;
+    }, {});
+
   return (
     <SafeAreaProviderCompat style={{ backgroundColor: colors.background }}>
       <ScreenStack style={styles.container}>
-        {state.routes.map((route, index) => {
-          const descriptor = descriptors[route.key];
+        {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;
@@ -544,6 +496,10 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
 
           const isModal = modalRouteKeys.includes(route.key);
 
+          const isPreloaded =
+            preloadedDescriptors[route.key] !== undefined &&
+            descriptors[route.key] === undefined;
+
           return (
             <SceneView
               key={route.key}
@@ -553,6 +509,7 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
               previousDescriptor={previousDescriptor}
               nextDescriptor={nextDescriptor}
               isPresentationModal={isModal}
+              isPreloaded={isPreloaded}
               onWillDisappear={() => {
                 navigation.emit({
                   type: 'transitionStart',
@@ -610,6 +567,16 @@ export function NativeStackView({ state, navigation, descriptors }: Props) {
                   target: route.key,
                 });
               }}
+              onSheetDetentChanged={(event) => {
+                navigation.emit({
+                  type: 'sheetDetentChange',
+                  target: route.key,
+                  data: {
+                    index: event.nativeEvent.index,
+                    stable: event.nativeEvent.isStable,
+                  },
+                });
+              }}
             />
           );
         })}
@@ -622,9 +589,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  scene: {
-    flex: 1,
-    flexDirection: 'column-reverse',
+  header: {
+    zIndex: 1,
   },
   absolute: {
     position: 'absolute',