@react-navigation/stack 8.0.0-alpha.24 → 8.0.0-alpha.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "8.0.0-alpha.24",
+  "version": "8.0.0-alpha.25",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,13 +45,13 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^3.0.0-alpha.22",
+    "@react-navigation/elements": "^3.0.0-alpha.23",
     "color": "^5.0.3",
     "use-latest-callback": "^0.3.3"
   },
   "devDependencies": {
     "@jest/globals": "^30.3.0",
-    "@react-navigation/native": "^8.0.0-alpha.19",
+    "@react-navigation/native": "^8.0.0-alpha.20",
     "@testing-library/react-native": "^13.3.3",
     "@types/color": "^4.2.0",
     "@types/react": "~19.2.2",
@@ -66,7 +66,7 @@
     "typescript": "^6.0.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^8.0.0-alpha.19",
+    "@react-navigation/native": "^8.0.0-alpha.20",
     "react": ">= 19.2.0",
     "react-native": "*",
     "react-native-gesture-handler": ">= 2.0.0",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "d7d3b8f648421eff0bf832ec9b2759651c12fc98"
+  "gitHead": "d465f4e6b2996e5ed4648b23487e2027e83b263d"
 }

package/src/index.tsx

@@ -9,6 +9,7 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
 export {
   createStackNavigator,
   createStackScreen,
+  type StackTypeBag,
 } from './navigators/createStackNavigator';
 
 /**

package/src/navigators/createStackNavigator.tsx

@@ -1,18 +1,14 @@
 import {
   createNavigatorFactory,
+  createScreenFactory,
   type EventArg,
+  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackActionHelpers,
   StackActions,
   type StackNavigationState,
   StackRouter,
   type StackRouterOptions,
-  type StaticConfig,
-  type StaticParamList,
-  type StaticScreenConfig,
-  type StaticScreenConfigLinking,
-  type StaticScreenConfigScreen,
-  type TypedNavigator,
   useLocale,
   useNavigationBuilder,
 } from '@react-navigation/native';
@@ -21,7 +17,6 @@ import * as React from 'react';
 import type {
   StackNavigationEventMap,
   StackNavigationOptions,
-  StackNavigationProp,
   StackNavigatorProps,
 } from '../types';
 import { StackView } from '../views/Stack/StackView';
@@ -96,41 +91,15 @@ function StackNavigator({
   );
 }
 
-type StackTypeBag<ParamList extends {}> = {
-  ParamList: ParamList;
-  State: StackNavigationState<ParamList>;
+export interface StackTypeBag extends NavigatorTypeBagBase {
+  State: StackNavigationState<this['ParamList']>;
   ScreenOptions: StackNavigationOptions;
   EventMap: StackNavigationEventMap;
-  NavigationList: {
-    [RouteName in keyof ParamList]: StackNavigationProp<ParamList, RouteName>;
-  };
+  ActionHelpers: StackActionHelpers<this['ParamList']>;
   Navigator: typeof StackNavigator;
-};
-
-export function createStackNavigator<
-  const ParamList extends ParamListBase,
->(): TypedNavigator<StackTypeBag<ParamList>, undefined>;
-export function createStackNavigator<
-  const Config extends StaticConfig<StackTypeBag<ParamListBase>>,
->(
-  config: Config
-): TypedNavigator<StackTypeBag<StaticParamList<{ config: Config }>>, Config>;
-export function createStackNavigator(config?: unknown) {
-  return createNavigatorFactory(StackNavigator)(config);
 }
 
-export function createStackScreen<
-  const Linking extends StaticScreenConfigLinking,
-  const Screen extends StaticScreenConfigScreen,
->(
-  config: StaticScreenConfig<
-    Linking,
-    Screen,
-    StackNavigationState<ParamListBase>,
-    StackNavigationOptions,
-    StackNavigationEventMap,
-    StackNavigationProp<ParamListBase>
-  >
-) {
-  return config;
-}
+export const createStackNavigator =
+  createNavigatorFactory<StackTypeBag>(StackNavigator);
+
+export const createStackScreen = createScreenFactory<StackTypeBag>();

package/src/types.tsx

@@ -346,12 +346,6 @@ export type StackNavigationOptions = StackHeaderOptions &
     /**
      * Style object for the card in stack.
      * You can provide a custom background color to use instead of the default background here.
-     *
-     * You can also specify `{ backgroundColor: 'transparent' }` to make the previous screen visible underneath.
-     * This is useful to implement things like modal dialogs.
-     *
-     * You might also need to change the animation of the screen using `cardStyleInterpolator`
-     * so that the previous screen isn't transformed or invisible.
      */
     cardStyle?: StyleProp<ViewStyle>;
     /**

package/src/views/Stack/CardContainer.tsx

@@ -194,6 +194,7 @@ function CardContainerInner({
     gestureVelocityImpact,
     headerMode,
     headerShown,
+    headerTransparent,
     transitionSpec,
   } = scene.descriptor.options;
 
@@ -284,7 +285,15 @@ function CardContainerInner({
                   getPreviousScene,
                   getFocusedRoute,
                   onContentHeightChange: onHeaderHeightChange,
-                  style: styles.header,
+                  style: [
+                    styles.header,
+                    headerTransparent
+                      ? {
+                          // Specify an explicit min height for Android screen readers
+                          minHeight: headerHeight,
+                        }
+                      : null,
+                  ],
                 })
               : null}
             <View style={styles.scene}>

package/src/views/Stack/CardStack.tsx

@@ -258,6 +258,39 @@ export function getAnimationEnabled(animation: StackAnimationName | undefined) {
   return getDefaultAnimation(animation) !== 'none';
 }
 
+const getAllRoutes = (
+  routes: Route<string>[],
+  preloadedRoutes: Route<string>[]
+) => {
+  const routeKeys = new Set(routes.map((route) => route.key));
+
+  // If a route is moved from `state.routes` to `state.preloadedRoutes`,
+  // It can still be in the local copy of `routes` until the animation ends
+  // So we need to deduplicate the routes to avoid rendering the same route twice
+  return [
+    ...routes,
+    ...preloadedRoutes.filter((route) => !routeKeys.has(route.key)),
+  ];
+};
+
+const isPreloadedRoute = (
+  route: Route<string>,
+  props: {
+    routes: Route<string>[];
+    state: StackNavigationState<ParamListBase>;
+  }
+) => {
+  // The route can be in both `routes` and `preloadedRoutes` until the animation ends
+  // Treat it as not preloaded, similar to how removed routes are treated until the animation ends
+  if (props.routes.some((currentRoute) => currentRoute.key === route.key)) {
+    return false;
+  }
+
+  return props.state.preloadedRoutes.some(
+    (currentRoute) => currentRoute.key === route.key
+  );
+};
+
 export class CardStack extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
@@ -270,10 +303,9 @@ export class CardStack extends React.Component<Props, State> {
       return null;
     }
 
-    const gestures = [
-      ...props.routes,
-      ...props.state.preloadedRoutes,
-    ].reduce<GestureValues>((acc, curr) => {
+    const allRoutes = getAllRoutes(props.routes, props.state.preloadedRoutes);
+
+    const gestures = allRoutes.reduce<GestureValues>((acc, curr) => {
       const descriptor = props.descriptors[curr.key];
       const { animation } = descriptor?.options || {};
 
@@ -282,7 +314,7 @@ export class CardStack extends React.Component<Props, State> {
         new Animated.Value(
           (props.openingRouteKeys.includes(curr.key) &&
             getAnimationEnabled(animation)) ||
-            props.state.preloadedRoutes.includes(curr)
+            isPreloadedRoute(curr, props)
             ? getDistanceFromOptions(
                 state.layout,
                 descriptor?.options,
@@ -294,171 +326,164 @@ export class CardStack extends React.Component<Props, State> {
       return acc;
     }, {});
 
-    const modalRouteKeys = getModalRouteKeys(
-      [...props.routes, ...props.state.preloadedRoutes],
-      props.descriptors
-    );
-
-    const scenes = [...props.routes, ...props.state.preloadedRoutes].map(
-      (route, index, self) => {
-        // For preloaded screens, we don't care about the previous and the next screen
-        const isPreloaded = props.state.preloadedRoutes.includes(route);
-        const previousRoute = isPreloaded ? undefined : self[index - 1];
-        const nextRoute = isPreloaded ? undefined : self[index + 1];
-
-        const oldScene = state.scenes[index];
-
-        const currentGesture = gestures[route.key];
-        const previousGesture = previousRoute
-          ? gestures[previousRoute.key]
-          : undefined;
-        const nextGesture = nextRoute ? gestures[nextRoute.key] : undefined;
-
-        const descriptor =
-          props.descriptors[route.key] ||
-          state.descriptors[route.key] ||
-          (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
-
-        const nextOptions =
-          nextRoute &&
-          (
-            props.descriptors[nextRoute?.key] ||
-            state.descriptors[nextRoute?.key]
-          )?.options;
-
-        const previousOptions =
-          previousRoute &&
-          (
-            props.descriptors[previousRoute?.key] ||
-            state.descriptors[previousRoute?.key]
-          )?.options;
-
-        // When a screen is not the last, it should use next screen's transition config
-        // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
-        // For example combining a slide and a modal transition would look wrong otherwise
-        // With this approach, combining different transition styles in the same navigator mostly looks right
-        // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
-        // but the majority of the transitions look alright
-        const optionsForTransitionConfig =
-          index !== self.length - 1 &&
-          nextOptions &&
-          nextOptions?.presentation !== 'transparentModal'
-            ? nextOptions
-            : descriptor.options;
-
-        // Assume modal if there are already modal screens in the stack
-        // or current screen is a modal when no presentation is specified
-        const isModal = modalRouteKeys.includes(route.key);
-
-        const animation = getDefaultAnimation(
-          optionsForTransitionConfig.animation
-        );
+    const modalRouteKeys = getModalRouteKeys(allRoutes, props.descriptors);
+
+    const scenes = allRoutes.map((route, index, self) => {
+      // For preloaded screens, we don't care about the previous and the next screen
+      const isPreloaded = isPreloadedRoute(route, props);
+      const previousRoute = isPreloaded ? undefined : self[index - 1];
+      const nextRoute = isPreloaded ? undefined : self[index + 1];
+
+      const oldScene = state.scenes[index];
+
+      const currentGesture = gestures[route.key];
+      const previousGesture = previousRoute
+        ? gestures[previousRoute.key]
+        : undefined;
+      const nextGesture = nextRoute ? gestures[nextRoute.key] : undefined;
+
+      const descriptor =
+        props.descriptors[route.key] ||
+        state.descriptors[route.key] ||
+        (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
+
+      const nextOptions =
+        nextRoute &&
+        (props.descriptors[nextRoute?.key] || state.descriptors[nextRoute?.key])
+          ?.options;
+
+      const previousOptions =
+        previousRoute &&
+        (
+          props.descriptors[previousRoute?.key] ||
+          state.descriptors[previousRoute?.key]
+        )?.options;
+
+      // When a screen is not the last, it should use next screen's transition config
+      // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
+      // For example combining a slide and a modal transition would look wrong otherwise
+      // With this approach, combining different transition styles in the same navigator mostly looks right
+      // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
+      // but the majority of the transitions look alright
+      const optionsForTransitionConfig =
+        index !== self.length - 1 &&
+        nextOptions &&
+        nextOptions?.presentation !== 'transparentModal'
+          ? nextOptions
+          : descriptor.options;
+
+      // Assume modal if there are already modal screens in the stack
+      // or current screen is a modal when no presentation is specified
+      const isModal = modalRouteKeys.includes(route.key);
+
+      const animation = getDefaultAnimation(
+        optionsForTransitionConfig.animation
+      );
 
-        const isAnimationEnabled = getAnimationEnabled(animation);
-
-        const transitionPreset =
-          animation !== 'default'
-            ? NAMED_TRANSITIONS_PRESETS[animation]
-            : optionsForTransitionConfig.presentation === 'transparentModal'
-              ? ModalFadeTransition
-              : optionsForTransitionConfig.presentation === 'modal' || isModal
-                ? ModalTransition
-                : DefaultTransition;
-
-        const {
-          gestureEnabled = Platform.OS === 'ios' && isAnimationEnabled,
-          gestureDirection = transitionPreset.gestureDirection,
-          transitionSpec = transitionPreset.transitionSpec,
-          cardStyleInterpolator = isAnimationEnabled
-            ? transitionPreset.cardStyleInterpolator
-            : forNoAnimationCard,
-          headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
-          cardOverlayEnabled = (Platform.OS !== 'ios' &&
-            optionsForTransitionConfig.presentation !== 'transparentModal') ||
-            getIsModalPresentation(cardStyleInterpolator),
-        } = optionsForTransitionConfig;
-
-        const headerMode: StackHeaderMode =
-          descriptor.options.headerMode ??
-          (!(
-            optionsForTransitionConfig.presentation === 'modal' ||
-            optionsForTransitionConfig.presentation === 'transparentModal' ||
-            nextOptions?.presentation === 'modal' ||
-            nextOptions?.presentation === 'transparentModal' ||
-            getIsModalPresentation(cardStyleInterpolator)
-          ) &&
-          Platform.OS === 'ios' &&
-          descriptor.options.header === undefined
-            ? 'float'
-            : 'screen');
-
-        const isRTL = props.direction === 'rtl';
-
-        const scene = {
-          route,
-          descriptor: {
-            ...descriptor,
-            options: {
-              ...descriptor.options,
-              animation,
-              cardOverlayEnabled,
-              cardStyleInterpolator,
-              gestureDirection,
-              gestureEnabled,
-              headerStyleInterpolator,
-              transitionSpec,
-              headerMode,
-            },
+      const isAnimationEnabled = getAnimationEnabled(animation);
+
+      const transitionPreset =
+        animation !== 'default'
+          ? NAMED_TRANSITIONS_PRESETS[animation]
+          : optionsForTransitionConfig.presentation === 'transparentModal'
+            ? ModalFadeTransition
+            : optionsForTransitionConfig.presentation === 'modal' || isModal
+              ? ModalTransition
+              : DefaultTransition;
+
+      const {
+        gestureEnabled = Platform.OS === 'ios' && isAnimationEnabled,
+        gestureDirection = transitionPreset.gestureDirection,
+        transitionSpec = transitionPreset.transitionSpec,
+        cardStyleInterpolator = isAnimationEnabled
+          ? transitionPreset.cardStyleInterpolator
+          : forNoAnimationCard,
+        headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
+        cardOverlayEnabled = (Platform.OS !== 'ios' &&
+          optionsForTransitionConfig.presentation !== 'transparentModal') ||
+          getIsModalPresentation(cardStyleInterpolator),
+      } = optionsForTransitionConfig;
+
+      const headerMode: StackHeaderMode =
+        descriptor.options.headerMode ??
+        (!(
+          optionsForTransitionConfig.presentation === 'modal' ||
+          optionsForTransitionConfig.presentation === 'transparentModal' ||
+          nextOptions?.presentation === 'modal' ||
+          nextOptions?.presentation === 'transparentModal' ||
+          getIsModalPresentation(cardStyleInterpolator)
+        ) &&
+        Platform.OS === 'ios' &&
+        descriptor.options.header === undefined
+          ? 'float'
+          : 'screen');
+
+      const isRTL = props.direction === 'rtl';
+
+      const scene = {
+        route,
+        descriptor: {
+          ...descriptor,
+          options: {
+            ...descriptor.options,
+            animation,
+            cardOverlayEnabled,
+            cardStyleInterpolator,
+            gestureDirection,
+            gestureEnabled,
+            headerStyleInterpolator,
+            transitionSpec,
+            headerMode,
           },
-          progress: {
-            current: getProgressFromGesture(
-              currentGesture,
-              state.layout,
-              descriptor.options,
-              isRTL
-            ),
-            next:
-              nextGesture && nextOptions?.presentation !== 'transparentModal'
-                ? getProgressFromGesture(
-                    nextGesture,
-                    state.layout,
-                    nextOptions,
-                    isRTL
-                  )
-                : undefined,
-            previous: previousGesture
+        },
+        progress: {
+          current: getProgressFromGesture(
+            currentGesture,
+            state.layout,
+            descriptor.options,
+            isRTL
+          ),
+          next:
+            nextGesture && nextOptions?.presentation !== 'transparentModal'
               ? getProgressFromGesture(
-                  previousGesture,
+                  nextGesture,
                   state.layout,
-                  previousOptions,
+                  nextOptions,
                   isRTL
                 )
               : undefined,
-          },
-          __memo: [
-            state.layout,
-            descriptor,
-            nextOptions,
-            previousOptions,
-            currentGesture,
-            nextGesture,
-            previousGesture,
-          ],
-        };
-
-        if (
-          oldScene &&
-          scene.__memo.every((it, i) => {
-            // @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
-            return oldScene.__memo[i] === it;
-          })
-        ) {
-          return oldScene;
-        }
-
-        return scene;
+          previous: previousGesture
+            ? getProgressFromGesture(
+                previousGesture,
+                state.layout,
+                previousOptions,
+                isRTL
+              )
+            : undefined,
+        },
+        __memo: [
+          state.layout,
+          descriptor,
+          nextOptions,
+          previousOptions,
+          currentGesture,
+          nextGesture,
+          previousGesture,
+        ],
+      };
+
+      if (
+        oldScene &&
+        scene.__memo.every((it, i) => {
+          // @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
+          return oldScene.__memo[i] === it;
+        })
+      ) {
+        return oldScene;
       }
-    );
+
+      return scene;
+    });
 
     return {
       routes: props.routes,
@@ -586,6 +611,8 @@ export class CardStack extends React.Component<Props, State> {
 
     const { scenes, layout, gestures, headerHeights } = this.state;
 
+    const allRoutes = getAllRoutes(routes, state.preloadedRoutes);
+
     const focusedRoute = state.routes[state.index];
 
     const isFloatHeaderAbsolute = scenes.slice(-2).some((scene) => {
@@ -627,26 +654,15 @@ export class CardStack extends React.Component<Props, State> {
           ],
         })}
         <View style={styles.container} onLayout={this.handleLayout}>
-          {[...routes, ...state.preloadedRoutes].map((route, index, self) => {
+          {allRoutes.map((route, index, self) => {
             const focused = focusedRoute.key === route.key;
             const gesture = gestures[route.key];
             const scene = scenes[index];
-            // It is possible that for a short period the route appears in both arrays.
-            // Particularly, if the screen is removed with `retain`, then it needs a moment to execute the animation.
-            // However, due to the router action, it immediately populates the `preloadedRoutes` array.
-            // Practically, the logic below takes care that it is rendered only once.
-            const isPreloaded =
-              state.preloadedRoutes.includes(route) && !routes.includes(route);
-            if (
-              state.preloadedRoutes.includes(route) &&
-              routes.includes(route) &&
-              index >= routes.length
-            ) {
-              return null;
-            }
+            const isPreloaded = isPreloadedRoute(route, this.props);
 
             const {
               inactiveBehavior = 'pause',
+              animation,
               headerShown = true,
               headerTransparent,
             } = scene.descriptor.options;
@@ -667,6 +683,16 @@ export class CardStack extends React.Component<Props, State> {
               isParentModal
             );
 
+            const isAnimationEnabled =
+              getAnimationEnabled(animation) ||
+              // Also check next screen's animation,
+              // As it will result in both screens being visible
+              (scenes[index + 1]
+                ? getAnimationEnabled(
+                    scenes[index + 1].descriptor.options.animation
+                  )
+                : false);
+
             const isNextScreenTransparent =
               scenes[index + 1]?.descriptor.options.presentation ===
               'transparentModal';
@@ -683,14 +709,16 @@ export class CardStack extends React.Component<Props, State> {
 
             const isBeforeLast = index === routes.length - 2;
 
-            // Keep animating and the last two rendered routes visible for smoother transitions.
-            // Preloaded routes should stay mounted, but remain hidden until focused.
+            // Keep animating and the last two rendered routes visible for smoother transitions
             const isVisible =
               focused ||
-              isFocusing ||
-              isRemoving ||
               isNextScreenTransparent ||
-              (!isPreloaded && index >= routes.length - 2);
+              // We only need to keep other screens visible when animation is enabled
+              (isAnimationEnabled &&
+                (isFocusing ||
+                  isRemoving ||
+                  // Preloaded routes should stay mounted, but remain hidden until focused
+                  (!isPreloaded && index >= routes.length - 2)));
 
             const activityMode = // Render focused and animating screens normally
               focused || isFocusing

package/src/views/Stack/StackView.tsx

@@ -66,6 +66,10 @@ export class StackView extends React.Component<Props, State> {
     const previousRoutes = state.previousState
       ? [...state.previousState.routes, ...state.previousState.preloadedRoutes]
       : [];
+    const previousFocusedRoute = state.previousState
+      ? state.previousState.routes[state.previousState.index]
+      : undefined;
+    const nextFocusedRouteFromState = props.state.routes[props.state.index];
 
     // If there was no change in routes, we don't need to compute anything
     if (
@@ -73,6 +77,7 @@ export class StackView extends React.Component<Props, State> {
         allRoutes.map((r) => r.key),
         previousRoutes.map((r) => r.key)
       ) &&
+      previousFocusedRoute?.key === nextFocusedRouteFromState?.key &&
       state.routes.length
     ) {
       // If there were any routes being closed or replaced,
@@ -158,10 +163,6 @@ export class StackView extends React.Component<Props, State> {
 
     // Get previous focused route from previousState (actual focused route, not last in previousRoutes
     // which can be a preloaded route that was never focused)
-    const previousFocusedRoute = state.previousState
-      ? state.previousState.routes[state.previousState.index]
-      : undefined;
-
     const nextFocusedRoute = routes[routes.length - 1];
 
     const isAnimationEnabled = (key: string) => {