@react-navigation/stack 7.0.0-alpha.7 → 7.0.0-alpha.8

package/lib/typescript/src/views/Stack/StackView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackView.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/StackView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,KAAK,EAEV,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AASrB,KAAK,KAAK,GAAG,qBAAqB,GAAG;IACnC,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,EAAE,sBAAsB,CAAC;IACnC,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF,KAAK,KAAK,GAAG;IAEX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAExB,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAEhC,mBAAmB,EAAE,kBAAkB,CAAC;IAExC,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAG7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAWF,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1D,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmNxB,KAAK,EAAE,KAAK,CAQV;IAEF,OAAO,CAAC,gBAAgB,CAYtB;IAEF,OAAO,CAAC,WAAW,CASjB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe,CAwCrB;IAEF,OAAO,CAAC,gBAAgB,CAwBtB;IAEF,OAAO,CAAC,qBAAqB,CAQxB;IAEL,OAAO,CAAC,mBAAmB,CAQtB;IAEL,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM;CAmDP"}
+{"version":3,"file":"StackView.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/StackView.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,KAAK,EACV,KAAK,SAAS,EAEd,KAAK,oBAAoB,EAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AASrB,KAAK,KAAK,GAAG,qBAAqB,GAAG;IACnC,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,EAAE,sBAAsB,CAAC;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CACR,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAC/B,WAAW,EAAE,OAAO,KACjB,eAAe,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IAEX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAExB,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAEhC,mBAAmB,EAAE,kBAAkB,CAAC;IAExC,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAE3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAG7B,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAWF,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1D,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;IAmNxB,KAAK,EAAE,KAAK,CAQV;IAEF,OAAO,CAAC,gBAAgB,CAYtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe,CAwCrB;IAEF,OAAO,CAAC,gBAAgB,CAwBtB;IAEF,OAAO,CAAC,qBAAqB,CAQxB;IAEL,OAAO,CAAC,mBAAmB,CAQtB;IAEL,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM;CAyDP"}

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": "7.0.0-alpha.7",
+  "version": "7.0.0-alpha.8",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,11 +40,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.0.0-alpha.4",
+    "@react-navigation/elements": "^2.0.0-alpha.5",
     "color": "^4.2.3"
   },
   "devDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.6",
+    "@react-navigation/native": "^7.0.0-alpha.7",
     "@testing-library/react-native": "^12.3.1",
     "@types/color": "^3.0.5",
     "@types/react": "~18.2.33",
@@ -58,7 +58,7 @@
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.6",
+    "@react-navigation/native": "^7.0.0-alpha.7",
     "react": "*",
     "react-native": "0.72.6",
     "react-native-gesture-handler": "~2.12.0",
@@ -79,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "d718b717320d41c90051c2a5f849b8d74f518a18"
+  "gitHead": "d0e6a2cd79d2c6aff0cf54e46e31edc407c3c46b"
 }

package/src/navigators/createStackNavigator.tsx

@@ -37,11 +37,12 @@ function StackNavigator({
   layout,
   screenListeners,
   screenOptions,
+  screenLayout,
   ...rest
 }: Props) {
   const { direction } = useLocale();
 
-  const { state, descriptors, navigation, NavigationContent } =
+  const { state, describe, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<
       StackNavigationState<ParamListBase>,
       StackRouterOptions,
@@ -55,6 +56,7 @@ function StackNavigator({
       layout,
       screenListeners,
       screenOptions,
+      screenLayout,
       getStateForRouteNamesChange,
     });
 
@@ -90,6 +92,7 @@ function StackNavigator({
         {...rest}
         direction={direction}
         state={state}
+        describe={describe}
         descriptors={descriptors}
         navigation={navigation}
       />

package/src/views/Header/HeaderContainer.tsx

@@ -4,7 +4,7 @@ import {
   NavigationRouteContext,
   type ParamListBase,
   type Route,
-  useLinkTools,
+  useLinkBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
 import {
@@ -54,7 +54,7 @@ export function HeaderContainer({
 }: Props) {
   const focusedRoute = getFocusedRoute();
   const parentHeaderBack = React.useContext(HeaderBackContext);
-  const { buildHref } = useLinkTools();
+  const { buildHref } = useLinkBuilder();
 
   return (
     <Animated.View pointerEvents="box-none" style={style}>

package/src/views/Stack/Card.tsx

@@ -61,6 +61,7 @@ type Props = ViewProps & {
     open: TransitionSpec;
     close: TransitionSpec;
   };
+  preloaded: boolean;
   styleInterpolator: StackCardStyleInterpolator;
   containerStyle?: StyleProp<ViewStyle>;
   contentStyle?: StyleProp<ViewStyle>;
@@ -104,7 +105,11 @@ export class Card extends React.Component<Props> {
   };
 
   componentDidMount() {
-    this.animate({ closing: this.props.closing });
+    if (!this.props.preloaded) {
+      this.animate({
+        closing: this.props.closing,
+      });
+    }
     this.isCurrentlyMounted = true;
   }
 
@@ -133,7 +138,7 @@ export class Card extends React.Component<Props> {
       this.lastToValue !== toValue
     ) {
       // We need to trigger the animation when route was closed
-      // Thr route might have been closed by a `POP` action or by a gesture
+      // The route might have been closed by a `POP` action or by a gesture
       // When route was closed due to a gesture, the animation would've happened already
       // It's still important to trigger the animation so that `onClose` is called
       // If `onClose` is not called, cleanup step won't be performed for gestures
@@ -142,7 +147,7 @@ export class Card extends React.Component<Props> {
   }
 
   componentWillUnmount() {
-    this.props.gesture.stopAnimation();
+    this.props.gesture?.stopAnimation();
     this.isCurrentlyMounted = false;
     this.handleEndInteraction();
   }
@@ -178,7 +183,7 @@ export class Card extends React.Component<Props> {
     closing: boolean;
     velocity?: number;
   }) => {
-    const { gesture, transitionSpec, onOpen, onClose, onTransition } =
+    const { transitionSpec, onOpen, onClose, onTransition, gesture } =
       this.props;
 
     const toValue = this.getAnimateToValue({
@@ -232,13 +237,15 @@ export class Card extends React.Component<Props> {
     layout,
     gestureDirection,
     direction,
+    preloaded,
   }: {
     closing?: boolean;
     layout: Layout;
     gestureDirection: GestureDirection;
     direction: LocaleDirection;
+    preloaded: boolean;
   }) => {
-    if (!closing) {
+    if (!closing && !preloaded) {
       return 0;
     }
 
@@ -298,7 +305,10 @@ export class Card extends React.Component<Props> {
             ? nativeEvent.velocityY
             : nativeEvent.velocityX;
 
-        this.animate({ closing: this.props.closing, velocity });
+        this.animate({
+          closing: this.props.closing,
+          velocity,
+        });
 
         onGestureCanceled?.();
         break;

package/src/views/Stack/CardContainer.tsx

@@ -6,7 +6,7 @@ import {
 } from '@react-navigation/elements';
 import {
   type Route,
-  useLinkTools,
+  useLinkBuilder,
   useLocale,
   useTheme,
 } from '@react-navigation/native';
@@ -28,6 +28,7 @@ type Props = {
   modal: boolean;
   layout: Layout;
   gesture: Animated.Value;
+  preloaded: boolean;
   scene: Scene;
   safeAreaInsetTop: number;
   safeAreaInsetRight: number;
@@ -36,7 +37,6 @@ type Props = {
   getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
   getFocusedRoute: () => Route<string>;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  renderScene: (props: { route: Route<string> }) => React.ReactNode;
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
   onTransitionStart: (
@@ -84,8 +84,8 @@ function CardContainerInner({
   onGestureStart,
   onTransitionEnd,
   onTransitionStart,
+  preloaded,
   renderHeader,
-  renderScene,
   safeAreaInsetBottom,
   safeAreaInsetLeft,
   safeAreaInsetRight,
@@ -205,7 +205,7 @@ function CardContainerInner({
     transitionSpec,
   } = scene.descriptor.options;
 
-  const { buildHref } = useLinkTools();
+  const { buildHref } = useLinkBuilder();
   const previousScene = getPreviousScene({ route: scene.descriptor.route });
 
   let backTitle: string | undefined;
@@ -252,6 +252,7 @@ function CardContainerInner({
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       pointerEvents={active ? 'box-none' : pointerEvents}
       pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
+      preloaded={preloaded}
       containerStyle={
         hasAbsoluteFloatHeader && headerMode !== 'screen'
           ? { marginTop: headerHeight }
@@ -294,7 +295,7 @@ function CardContainerInner({
                 <HeaderHeightContext.Provider
                   value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
                 >
-                  {renderScene({ route: scene.descriptor.route })}
+                  {scene.descriptor.render()}
                 </HeaderHeightContext.Provider>
               </HeaderShownContext.Provider>
             </HeaderBackContext.Provider>

package/src/views/Stack/CardStack.tsx

@@ -52,6 +52,8 @@ type Props = {
   insets: EdgeInsets;
   state: StackNavigationState<ParamListBase>;
   descriptors: StackDescriptorMap;
+  // eslint-disable-next-line react/no-unused-prop-types
+  preloadedDescriptors: StackDescriptorMap;
   routes: Route<string>[];
   // eslint-disable-next-line react/no-unused-prop-types
   openingRouteKeys: string[];
@@ -62,7 +64,6 @@ type Props = {
     route: Route<string>;
   }) => Route<string> | undefined;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  renderScene: (props: { route: Route<string> }) => React.ReactNode;
   isParentHeaderShown: boolean;
   isParentModal: boolean;
   onTransitionStart: (
@@ -174,7 +175,7 @@ const getHeaderHeights = (
 
 const getDistanceFromOptions = (
   layout: Layout,
-  descriptor: StackDescriptor,
+  descriptor: StackDescriptor | undefined,
   isRTL: boolean
 ) => {
   const {
@@ -190,7 +191,7 @@ const getDistanceFromOptions = (
 const getProgressFromGesture = (
   gesture: Animated.Value,
   layout: Layout,
-  descriptor: StackDescriptor,
+  descriptor: StackDescriptor | undefined,
   isRTL: boolean
 ) => {
   const distance = getDistanceFromOptions(
@@ -229,15 +230,20 @@ export class CardStack extends React.Component<Props, State> {
       return null;
     }
 
-    const gestures = props.routes.reduce<GestureValues>((acc, curr) => {
-      const descriptor = props.descriptors[curr.key];
+    const gestures = [
+      ...props.routes,
+      ...props.state.preloadedRoutes,
+    ].reduce<GestureValues>((acc, curr) => {
+      const descriptor =
+        props.descriptors[curr.key] || props.preloadedDescriptors[curr.key];
       const { animationEnabled } = descriptor?.options || {};
 
       acc[curr.key] =
         state.gestures[curr.key] ||
         new Animated.Value(
-          props.openingRouteKeys.includes(curr.key) &&
-          animationEnabled !== false
+          (props.openingRouteKeys.includes(curr.key) &&
+            animationEnabled !== false) ||
+          props.state.preloadedRoutes.includes(curr)
             ? getDistanceFromOptions(
                 state.layout,
                 descriptor,
@@ -249,147 +255,156 @@ export class CardStack extends React.Component<Props, State> {
       return acc;
     }, {});
 
-    const scenes = props.routes.map((route, index, self) => {
-      const previousRoute = self[index - 1];
-      const nextRoute = 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 nextDescriptor =
-        props.descriptors[nextRoute?.key] || state.descriptors[nextRoute?.key];
-
-      const previousDescriptor =
-        props.descriptors[previousRoute?.key] ||
-        state.descriptors[previousRoute?.key];
-
-      // 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 majority of the transitions look alright
-      const optionsForTransitionConfig =
-        index !== self.length - 1 &&
-        nextDescriptor &&
-        nextDescriptor.options.presentation !== 'transparentModal'
-          ? nextDescriptor.options
-          : descriptor.options;
-
-      const defaultTransitionPreset =
-        optionsForTransitionConfig.presentation === 'modal'
-          ? ModalTransition
-          : optionsForTransitionConfig.presentation === 'transparentModal'
-          ? ModalFadeTransition
-          : DefaultTransition;
-
-      const {
-        animationEnabled = Platform.OS !== 'web' &&
-          Platform.OS !== 'windows' &&
-          Platform.OS !== 'macos',
-        gestureEnabled = Platform.OS === 'ios' && animationEnabled,
-        gestureDirection = defaultTransitionPreset.gestureDirection,
-        transitionSpec = defaultTransitionPreset.transitionSpec,
-        cardStyleInterpolator = animationEnabled === false
-          ? forNoAnimationCard
-          : defaultTransitionPreset.cardStyleInterpolator,
-        headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-        cardOverlayEnabled = (Platform.OS !== 'ios' &&
-          optionsForTransitionConfig.presentation !== 'transparentModal') ||
-          getIsModalPresentation(cardStyleInterpolator),
-      } = optionsForTransitionConfig;
-
-      const headerMode: StackHeaderMode =
-        descriptor.options.headerMode ??
-        (!(
-          optionsForTransitionConfig.presentation === 'modal' ||
-          optionsForTransitionConfig.presentation === 'transparentModal' ||
-          nextDescriptor?.options.presentation === 'modal' ||
-          nextDescriptor?.options.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,
-            animationEnabled,
-            cardOverlayEnabled,
-            cardStyleInterpolator,
-            gestureDirection,
-            gestureEnabled,
-            headerStyleInterpolator,
-            transitionSpec,
-            headerMode,
+    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 =
+          (isPreloaded ? props.preloadedDescriptors : props.descriptors)[
+            route.key
+          ] ||
+          state.descriptors[route.key] ||
+          (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
+
+        const nextDescriptor =
+          nextRoute &&
+          (props.descriptors[nextRoute?.key] ||
+            state.descriptors[nextRoute?.key]);
+
+        const previousDescriptor =
+          previousRoute &&
+          (props.descriptors[previousRoute?.key] ||
+            state.descriptors[previousRoute?.key]);
+
+        // 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 &&
+          nextDescriptor &&
+          nextDescriptor.options.presentation !== 'transparentModal'
+            ? nextDescriptor.options
+            : descriptor.options;
+
+        const defaultTransitionPreset =
+          optionsForTransitionConfig.presentation === 'modal'
+            ? ModalTransition
+            : optionsForTransitionConfig.presentation === 'transparentModal'
+            ? ModalFadeTransition
+            : DefaultTransition;
+
+        const {
+          animationEnabled = Platform.OS !== 'web' &&
+            Platform.OS !== 'windows' &&
+            Platform.OS !== 'macos',
+          gestureEnabled = Platform.OS === 'ios' && animationEnabled,
+          gestureDirection = defaultTransitionPreset.gestureDirection,
+          transitionSpec = defaultTransitionPreset.transitionSpec,
+          cardStyleInterpolator = animationEnabled === false
+            ? forNoAnimationCard
+            : defaultTransitionPreset.cardStyleInterpolator,
+          headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+          cardOverlayEnabled = (Platform.OS !== 'ios' &&
+            optionsForTransitionConfig.presentation !== 'transparentModal') ||
+            getIsModalPresentation(cardStyleInterpolator),
+        } = optionsForTransitionConfig;
+
+        const headerMode: StackHeaderMode =
+          descriptor.options.headerMode ??
+          (!(
+            optionsForTransitionConfig.presentation === 'modal' ||
+            optionsForTransitionConfig.presentation === 'transparentModal' ||
+            nextDescriptor?.options.presentation === 'modal' ||
+            nextDescriptor?.options.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,
+              animationEnabled,
+              cardOverlayEnabled,
+              cardStyleInterpolator,
+              gestureDirection,
+              gestureEnabled,
+              headerStyleInterpolator,
+              transitionSpec,
+              headerMode,
+            },
           },
-        },
-        progress: {
-          current: getProgressFromGesture(
-            currentGesture,
-            state.layout,
-            descriptor,
-            isRTL
-          ),
-          next:
-            nextGesture &&
-            nextDescriptor?.options.presentation !== 'transparentModal'
+          progress: {
+            current: getProgressFromGesture(
+              currentGesture,
+              state.layout,
+              descriptor,
+              isRTL
+            ),
+            next:
+              nextGesture &&
+              nextDescriptor?.options.presentation !== 'transparentModal'
+                ? getProgressFromGesture(
+                    nextGesture,
+                    state.layout,
+                    nextDescriptor,
+                    isRTL
+                  )
+                : undefined,
+            previous: previousGesture
               ? getProgressFromGesture(
-                  nextGesture,
+                  previousGesture,
                   state.layout,
-                  nextDescriptor,
+                  previousDescriptor,
                   isRTL
                 )
               : undefined,
-          previous: previousGesture
-            ? getProgressFromGesture(
-                previousGesture,
-                state.layout,
-                previousDescriptor,
-                isRTL
-              )
-            : undefined,
-        },
-        __memo: [
-          state.layout,
-          descriptor,
-          nextDescriptor,
-          previousDescriptor,
-          currentGesture,
-          nextGesture,
-          previousGesture,
-        ],
-      };
+          },
+          __memo: [
+            state.layout,
+            descriptor,
+            nextDescriptor,
+            previousDescriptor,
+            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;
+        }
 
-      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 scene;
-    });
+    );
 
     return {
       routes: props.routes,
@@ -504,7 +519,6 @@ export class CardStack extends React.Component<Props, State> {
       onOpenRoute,
       onCloseRoute,
       renderHeader,
-      renderScene,
       isParentHeaderShown,
       isParentModal,
       onTransitionStart,
@@ -599,10 +613,23 @@ export class CardStack extends React.Component<Props, State> {
           style={styles.container}
           onLayout={this.handleLayout}
         >
-          {routes.map((route, index, self) => {
+          {[...routes, ...state.preloadedRoutes].map((route, index) => {
             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;
+            }
 
             // For the screens that shouldn't be active, the value is 0
             // For those that should be active, but are not the top screen, the value is 1
@@ -614,15 +641,15 @@ export class CardStack extends React.Component<Props, State> {
               | 1
               | 2 = 1;
 
-            if (index < self.length - activeScreensLimit - 1) {
+            if (index < routes.length - activeScreensLimit - 1 || isPreloaded) {
               // screen should be inactive because it is too deep in the stack
               isScreenActive = STATE_INACTIVE;
             } else {
-              const sceneForActivity = scenes[self.length - 1];
+              const sceneForActivity = scenes[routes.length - 1];
               const outputValue =
-                index === self.length - 1
+                index === routes.length - 1
                   ? STATE_ON_TOP // the screen is on top after the transition
-                  : index >= self.length - activeScreensLimit
+                  : index >= routes.length - activeScreensLimit
                   ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
                   : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
               isScreenActive = sceneForActivity
@@ -667,7 +694,7 @@ export class CardStack extends React.Component<Props, State> {
             return (
               <MaybeScreen
                 key={route.key}
-                style={StyleSheet.absoluteFill}
+                style={[StyleSheet.absoluteFill]}
                 enabled={detachInactiveScreens}
                 active={isScreenActive}
                 freezeOnBlur={freezeOnBlur}
@@ -677,7 +704,7 @@ export class CardStack extends React.Component<Props, State> {
                   index={index}
                   interpolationIndex={interpolationIndex}
                   modal={isModal}
-                  active={index === self.length - 1}
+                  active={index === routes.length - 1}
                   focused={focused}
                   closing={closingRouteKeys.includes(route.key)}
                   layout={layout}
@@ -699,13 +726,13 @@ export class CardStack extends React.Component<Props, State> {
                     isFloatHeaderAbsolute && !headerTransparent
                   }
                   renderHeader={renderHeader}
-                  renderScene={renderScene}
                   onOpenRoute={onOpenRoute}
                   onCloseRoute={onCloseRoute}
                   onTransitionStart={onTransitionStart}
                   onTransitionEnd={onTransitionEnd}
                   isNextScreenTransparent={isNextScreenTransparent}
                   detachCurrentScreen={detachCurrentScreen}
+                  preloaded={isPreloaded}
                 />
               </MaybeScreen>
             );