@react-navigation/stack 8.0.0-alpha.6 → 8.0.0-alpha.60

package/lib/module/views/Stack/CardStack.js

@@ -1,13 +1,11 @@
 "use strict";
 
 import { getDefaultHeaderHeight } from '@react-navigation/elements';
-import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
+import { ActivityView, SafeAreaProviderCompat } from '@react-navigation/elements/internal';
 import * as React from 'react';
 import { Animated, Platform, StyleSheet, View } from 'react-native';
-import { Screen, ScreenContainer } from 'react-native-screens';
-import { forModalPresentationIOS, forNoAnimation as forNoAnimationCard } from "../../TransitionConfigs/CardStyleInterpolators.js";
-import { BottomSheetAndroid, DefaultTransition, FadeFromBottomAndroid, FadeFromRightAndroid, ModalFadeTransition, ModalSlideFromBottomIOS, ModalTransition, RevealFromBottomAndroid, ScaleFromCenterAndroid, SlideFromLeftIOS, SlideFromRightIOS } from "../../TransitionConfigs/TransitionPresets.js";
-import { findLastIndex } from "../../utils/findLastIndex.js";
+import { forBottomSheetAndroid, forCrossDissolveIOS, forDialogAndroid, forFadeFromBottomAndroid, forFadeFromRightAndroid, forFlipIOS, forModalPresentationIOS, forNoAnimation as forNoAnimationCard, forRevealFromBottomAndroid, forScaleFromCenterAndroid, forVerticalIOS } from "../../TransitionConfigs/CardStyleInterpolators.js";
+import { DefaultTransition, FadeFromBottomAndroid, FadeFromRightAndroid, ModalFadeTransition, ModalFlipIOS, ModalSlideFromBottomIOS, ModalTransition, RevealFromBottomAndroid, ScaleFromCenterAndroid, SlideFromLeftIOS, SlideFromRightIOS } from "../../TransitionConfigs/TransitionPresets.js";
 import { getDistanceForDirection } from "../../utils/getDistanceForDirection.js";
 import { getModalRouteKeys } from "../../utils/getModalRoutesKeys.js";
 import { CardContainer } from "./CardContainer.js";
@@ -17,27 +15,30 @@ const NAMED_TRANSITIONS_PRESETS = {
   fade: ModalFadeTransition,
   fade_from_bottom: FadeFromBottomAndroid,
   fade_from_right: FadeFromRightAndroid,
+  flip: ModalFlipIOS,
+  ios_from_left: SlideFromLeftIOS,
+  ios_from_right: SlideFromRightIOS,
   none: DefaultTransition,
   reveal_from_bottom: RevealFromBottomAndroid,
   scale_from_center: ScaleFromCenterAndroid,
   slide_from_left: SlideFromLeftIOS,
   slide_from_right: SlideFromRightIOS,
-  slide_from_bottom: Platform.select({
-    ios: ModalSlideFromBottomIOS,
-    default: BottomSheetAndroid
-  })
+  slide_from_bottom: ModalSlideFromBottomIOS
+};
+const GESTURE_DISABLED_INTERPOLATORS = [forCrossDissolveIOS, forDialogAndroid, forFadeFromBottomAndroid, forFadeFromRightAndroid, forFlipIOS, forRevealFromBottomAndroid, forScaleFromCenterAndroid, forVerticalIOS];
+const SCREEN_HEADER_INTERPOLATORS = [...GESTURE_DISABLED_INTERPOLATORS, forBottomSheetAndroid];
+const HIDDEN_HEADER_HEIGHT = {
+  measured: false,
+  value: 0
 };
-const EPSILON = 1e-5;
-const STATE_INACTIVE = 0;
-const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
-const STATE_ON_TOP = 2;
-const FALLBACK_DESCRIPTOR = Object.freeze({
-  options: {}
-});
 const getInterpolationIndex = (scenes, index) => {
+  const scene = scenes[index];
+  if (scene == null) {
+    throw new Error(`Couldn't find a scene at index ${index}.`);
+  }
   const {
     cardStyleInterpolator
-  } = scenes[index].descriptor.options;
+  } = scene.descriptor.options;
 
   // Start from current card and count backwards the number of cards with same interpolation
   let interpolationIndex = 0;
@@ -51,11 +52,11 @@ const getInterpolationIndex = (scenes, index) => {
   return interpolationIndex;
 };
 const getIsModalPresentation = cardStyleInterpolator => {
-  return cardStyleInterpolator === forModalPresentationIOS ||
-  // Handle custom modal presentation interpolators as well
-  cardStyleInterpolator.name === 'forModalPresentationIOS';
+  return cardStyleInterpolator === forModalPresentationIOS || cardStyleInterpolator.name === forModalPresentationIOS.name;
 };
-const getIsModal = (scene, interpolationIndex, isParentModal) => {
+const getIsGestureEnabledByDefault = cardStyleInterpolator => !GESTURE_DISABLED_INTERPOLATORS.some(interpolator => cardStyleInterpolator === interpolator || cardStyleInterpolator.name === interpolator.name);
+const getIsScreenHeader = cardStyleInterpolator => SCREEN_HEADER_INTERPOLATORS.some(interpolator => cardStyleInterpolator === interpolator || cardStyleInterpolator.name === interpolator.name);
+const getIsInModalPresentation = (scene, interpolationIndex, isParentModal) => {
   if (isParentModal) {
     return true;
   }
@@ -72,15 +73,33 @@ const getHeaderHeights = (scenes, insets, isParentHeaderShown, isParentModal, la
       headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
       headerStyle
     } = curr.descriptor.options;
-    const style = StyleSheet.flatten(headerStyle || {});
-    const height = 'height' in style && typeof style.height === 'number' ? style.height : previous[curr.route.key];
+    const style = StyleSheet.flatten(headerStyle);
+    const height = style != null && 'height' in style && typeof style.height === 'number' ? style.height : undefined;
     const interpolationIndex = getInterpolationIndex(scenes, index);
-    const isModal = getIsModal(curr, interpolationIndex, isParentModal);
-    acc[curr.route.key] = typeof height === 'number' ? height : getDefaultHeaderHeight({
-      landscape: layout.width > layout.height,
-      modalPresentation: isModal,
-      topInset: headerStatusBarHeight
-    });
+    const isModal = getIsInModalPresentation(curr, interpolationIndex, isParentModal);
+    if (typeof height === 'number') {
+      acc[curr.route.key] = {
+        measured: true,
+        value: height
+      };
+    } else {
+      const previousHeight = previous[curr.route.key];
+      const defaultHeight = getDefaultHeaderHeight({
+        landscape: layout.width > layout.height,
+        modalPresentation: isModal,
+        topInset: headerStatusBarHeight
+      });
+
+      // If we hadn't measured before, use re-computed default height
+      if (!previousHeight?.measured && defaultHeight !== previousHeight?.value) {
+        acc[curr.route.key] = {
+          measured: false,
+          value: defaultHeight
+        };
+      } else if (previousHeight) {
+        acc[curr.route.key] = previousHeight;
+      }
+    }
     return acc;
   }, {});
 };
@@ -118,32 +137,54 @@ function getDefaultAnimation(animation) {
 export function getAnimationEnabled(animation) {
   return getDefaultAnimation(animation) !== 'none';
 }
+const getAllRoutes = (routes, state) => {
+  const routeKeys = new Set(routes.map(route => route.key));
+  const inactiveRoutes = state.routes.slice(state.index + 1);
+
+  // If a route is moved from active routes to inactive routes,
+  // 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, ...inactiveRoutes.filter(route => !routeKeys.has(route.key))];
+};
+const isInactiveRoute = (route, routes) =>
+// `routes` contains active routes and routes animating during transitions.
+// Any route added by `getAllRoutes` that's missing from this list is inactive.
+!routes.some(currentRoute => currentRoute.key === route.key);
 export class CardStack extends React.Component {
   static getDerivedStateFromProps(props, state) {
     if (props.routes === state.routes && props.descriptors === state.descriptors) {
       return null;
     }
-    const gestures = [...props.routes, ...props.state.preloadedRoutes].reduce((acc, curr) => {
+    const allRoutes = getAllRoutes(props.routes, props.state);
+    const gestures = allRoutes.reduce((acc, curr) => {
       const descriptor = props.descriptors[curr.key];
       const {
         animation
       } = descriptor?.options || {};
-      acc[curr.key] = state.gestures[curr.key] || new Animated.Value(props.openingRouteKeys.includes(curr.key) && getAnimationEnabled(animation) || props.state.preloadedRoutes.includes(curr) ? getDistanceFromOptions(state.layout, descriptor?.options, props.direction === 'rtl') : 0);
+      acc[curr.key] = state.gestures[curr.key] || new Animated.Value(props.openingRouteKeys.includes(curr.key) && getAnimationEnabled(animation) || isInactiveRoute(curr, props.routes) ? getDistanceFromOptions(state.layout, descriptor?.options, props.direction === 'rtl') : 0);
       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 modalRouteKeys = getModalRouteKeys(allRoutes, props.descriptors);
+    const scenes = allRoutes.map((route, index, self) => {
+      // For preloaded or retained screens, we don't care about the previous and the next screen
+      const isInactive = isInactiveRoute(route, props.routes);
+      const previousRoute = isInactive ? undefined : self[index - 1];
+      const nextRoute = isInactive ? undefined : self[index + 1];
       const oldScene = state.scenes[index];
+      const previousScene = oldScene?.route.key === route.key ? oldScene : state.scenes.find(scene => scene.route.key === route.key);
+      const closing = previousScene?.closing ?? new Animated.Value(props.closingRouteKeys.includes(route.key) ? 1 : 0);
       const currentGesture = gestures[route.key];
+      if (currentGesture == null) {
+        throw new Error(`Couldn't find a gesture for route '${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;
+      const descriptor = props.descriptors[route.key] ?? state.descriptors[route.key] ?? oldScene?.descriptor;
+      if (descriptor == null) {
+        throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+      }
+      const nextOptions = nextRoute ? (props.descriptors[nextRoute.key] ?? state.descriptors[nextRoute.key])?.options : undefined;
+      const previousOptions = previousRoute ? (props.descriptors[previousRoute.key] ?? state.descriptors[previousRoute.key])?.options : undefined;
 
       // 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
@@ -160,14 +201,15 @@ export class CardStack extends React.Component {
       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,
+        gestureEnabled = Platform.OS === 'ios' && isAnimationEnabled && getIsGestureEnabledByDefault(cardStyleInterpolator),
         headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
-        cardOverlayEnabled = Platform.OS !== 'ios' && optionsForTransitionConfig.presentation !== 'transparentModal' || getIsModalPresentation(cardStyleInterpolator)
+        cardOverlayEnabled,
+        cardShadowEnabled
       } = optionsForTransitionConfig;
-      const headerMode = 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 headerMode = descriptor.options.headerMode ?? (!(optionsForTransitionConfig.presentation === 'modal' || optionsForTransitionConfig.presentation === 'transparentModal' || nextOptions?.presentation === 'modal' || nextOptions?.presentation === 'transparentModal' || getIsModalPresentation(cardStyleInterpolator) || getIsScreenHeader(cardStyleInterpolator)) && Platform.OS === 'ios' && descriptor.options.header === undefined ? 'float' : 'screen');
       const isRTL = props.direction === 'rtl';
       const scene = {
         route,
@@ -177,6 +219,7 @@ export class CardStack extends React.Component {
             ...descriptor.options,
             animation,
             cardOverlayEnabled,
+            cardShadowEnabled,
             cardStyleInterpolator,
             gestureDirection,
             gestureEnabled,
@@ -190,76 +233,25 @@ export class CardStack extends React.Component {
           next: nextGesture && nextOptions?.presentation !== 'transparentModal' ? getProgressFromGesture(nextGesture, state.layout, nextOptions, isRTL) : undefined,
           previous: previousGesture ? getProgressFromGesture(previousGesture, state.layout, previousOptions, isRTL) : undefined
         },
+        closing,
         __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;
     });
-    let activeStates = state.activeStates;
-    if (props.routes.length !== state.routes.length) {
-      let activeScreensLimit = 1;
-      for (let i = props.routes.length - 1; i >= 0; i--) {
-        const {
-          options
-        } = scenes[i].descriptor;
-        const {
-          // By default, we don't want to detach the previous screen of the active one for modals
-          detachPreviousScreen = options.presentation === 'transparentModal' ? false : getIsModalPresentation(options.cardStyleInterpolator) ? i !== findLastIndex(scenes, scene => {
-            const {
-              cardStyleInterpolator
-            } = scene.descriptor.options;
-            return cardStyleInterpolator === forModalPresentationIOS || cardStyleInterpolator?.name === 'forModalPresentationIOS';
-          }) : true
-        } = options;
-        if (detachPreviousScreen === false) {
-          activeScreensLimit++;
-        } else {
-          // Check at least last 2 screens before stopping
-          // This will make sure that screen isn't detached when another screen is animating on top of the transparent one
-          // e.g. opaque -> transparent -> opaque
-          if (i <= props.routes.length - 2) {
-            break;
-          }
-        }
-      }
-      activeStates = props.routes.map((_, index, self) => {
-        // The activity state represents state of the screen:
-        // 0 - inactive, the screen is detached
-        // 1 - transitioning or below the top screen, the screen is mounted but interaction is disabled
-        // 2 - on top of the stack, the screen is mounted and interaction is enabled
-        let activityState;
-        const lastActiveState = state.activeStates[index];
-        const activeAfterTransition = index >= self.length - activeScreensLimit;
-        if (lastActiveState === STATE_INACTIVE && !activeAfterTransition) {
-          // screen was inactive before and it will still be inactive after the transition
-          activityState = STATE_INACTIVE;
-        } else {
-          const sceneForActivity = scenes[self.length - 1];
-          const outputValue = index === self.length - 1 ? STATE_ON_TOP // the screen is on top after the transition
-          : activeAfterTransition ? 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
-
-          activityState = sceneForActivity ? sceneForActivity.progress.current.interpolate({
-            inputRange: [0, 1 - EPSILON, 1],
-            outputRange: [1, 1, outputValue],
-            extrapolate: 'clamp'
-          }) : STATE_TRANSITIONING_OR_BELOW_TOP;
-        }
-        return activityState;
-      });
-    }
     return {
       routes: props.routes,
       scenes,
       gestures,
       descriptors: props.descriptors,
-      activeStates,
-      headerHeights: getHeaderHeights(scenes, props.insets, props.isParentHeaderShown, props.isParentModal, state.layout, state.headerHeights)
+      headerHeights: getHeaderHeights(scenes, props.insets, props.isParentHeaderShown, props.isParentModal, state.layout, state.headerHeights),
+      // Nested navigators clean up `route.state` when the screen is paused with `Activity`
+      // So we remember routes which had state until they are removed
+      nestedStateRouteKeys: allRoutes.filter(route => 'state' in route && route.state || state.nestedStateRouteKeys.includes(route.key)).map(route => route.key)
     };
   }
   constructor(props) {
@@ -270,13 +262,13 @@ export class CardStack extends React.Component {
       gestures: {},
       layout: SafeAreaProviderCompat.initialMetrics.frame,
       descriptors: this.props.descriptors,
-      activeStates: [],
       // Used when card's header is null and mode is float to make transition
       // between screens with headers and those without headers smooth.
       // This is not a great heuristic here. We don't know synchronously
       // on mount what the header height is so we have just used the most
       // common cases here.
-      headerHeights: {}
+      headerHeights: {},
+      nestedStateRouteKeys: []
     };
   }
   handleLayout = e => {
@@ -306,13 +298,16 @@ export class CardStack extends React.Component {
       headerHeights
     }) => {
       const previousHeight = headerHeights[route.key];
-      if (previousHeight === height) {
+      if (previousHeight?.value === height) {
         return null;
       }
       return {
         headerHeights: {
           ...headerHeights,
-          [route.key]: height
+          [route.key]: {
+            measured: true,
+            value: height
+          }
         }
       };
     });
@@ -321,7 +316,11 @@ export class CardStack extends React.Component {
     const {
       state
     } = this.props;
-    return state.routes[state.index];
+    const route = state.routes[state.index];
+    if (route == null) {
+      throw new Error(`Couldn't find a route at index ${state.index}.`);
+    }
+    return route;
   };
   getPreviousScene = ({
     route
@@ -348,27 +347,36 @@ export class CardStack extends React.Component {
       routes,
       openingRouteKeys,
       closingRouteKeys,
+      replacingRouteKeys,
       onOpenRoute,
       onCloseRoute,
+      onGestureStart,
+      onGestureEnd,
+      onGestureCancel,
       renderHeader,
       isParentHeaderShown,
       isParentModal,
       onTransitionStart,
-      onTransitionEnd,
-      onGestureStart,
-      onGestureEnd,
-      onGestureCancel,
-      detachInactiveScreens = Platform.OS === 'web' || Platform.OS === 'android' || Platform.OS === 'ios'
+      onTransitionEnd
     } = this.props;
     const {
       scenes,
       layout,
       gestures,
-      activeStates,
-      headerHeights
+      headerHeights,
+      nestedStateRouteKeys
     } = this.state;
+    const allRoutes = getAllRoutes(routes, state);
     const focusedRoute = state.routes[state.index];
-    const isFloatHeaderAbsolute = scenes.slice(-2).some(scene => {
+    if (focusedRoute == null) {
+      throw new Error(`Couldn't find a route at index ${state.index}.`);
+    }
+
+    // Render only two top-most active headers as a workaround for
+    // https://github.com/react-navigation/react-navigation/issues/12456.
+    // If the header is persisted, it might be placed incorrectly when navigating back
+    const activeHeaderScenes = scenes.filter(scene => !isInactiveRoute(scene.route, routes)).slice(-2);
+    const isFloatHeaderAbsolute = activeHeaderScenes.some(scene => {
       const options = scene.descriptor.options ?? {};
       const {
         headerMode,
@@ -381,71 +389,129 @@ export class CardStack extends React.Component {
       return false;
     });
     const isFloatHeaderFocused = scenes.findLast(scene => scene.route.key === focusedRoute.key)?.descriptor.options.headerMode === 'float';
+    const focusedHeaderHeight = headerHeights[focusedRoute.key];
     return /*#__PURE__*/_jsxs(View, {
       style: styles.container,
       children: [renderHeader({
         mode: 'float',
-        scenes,
+        scenes: activeHeaderScenes,
         getPreviousScene: this.getPreviousScene,
         getFocusedRoute: this.getFocusedRoute,
+        contentHeight: headerHeights[focusedRoute.key],
         onContentHeightChange: this.handleHeaderLayout,
         style: [isFloatHeaderAbsolute && [styles.absolute,
         // The header title can't be found with maestro without this
         // In some cases, header buttons may not be touchable as well
         isFloatHeaderFocused && {
-          height: headerHeights[focusedRoute.key]
+          height: focusedHeaderHeight?.value
         }]]
-      }), /*#__PURE__*/_jsx(ScreenContainer, {
-        enabled: detachInactiveScreens,
+      }), /*#__PURE__*/_jsx(View, {
         style: styles.container,
         onLayout: this.handleLayout,
-        children: [...routes, ...state.preloadedRoutes].map((route, index) => {
+        children: 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;
+          if (gesture == null) {
+            throw new Error(`Couldn't find a gesture for route '${route.key}'.`);
+          }
+          if (scene == null) {
+            throw new Error(`Couldn't find a scene at index ${index}.`);
           }
+          const nextScene = scenes[index + 1];
+          const nextRoute = self[index + 1];
           const {
+            inactiveBehavior = 'pause',
+            animation,
             headerShown = true,
-            headerTransparent,
-            freezeOnBlur,
-            autoHideHomeIndicator
+            headerMode,
+            headerTransparent
           } = scene.descriptor.options;
           const safeAreaInsetTop = insets.top;
           const safeAreaInsetRight = insets.right;
           const safeAreaInsetBottom = insets.bottom;
           const safeAreaInsetLeft = insets.left;
-          const headerHeight = headerShown !== false ? headerHeights[route.key] : 0;
+          const headerHeight = headerShown !== false ? headerHeights[route.key] : HIDDEN_HEADER_HEIGHT;
 
           // Start from current card and count backwards the number of cards with same interpolation
           const interpolationIndex = getInterpolationIndex(scenes, index);
-          const isModal = getIsModal(scene, interpolationIndex, isParentModal);
-          const isNextScreenTransparent = scenes[index + 1]?.descriptor.options.presentation === 'transparentModal';
-          const detachCurrentScreen = scenes[index + 1]?.descriptor.options.detachPreviousScreen !== false;
-          const activityState = isPreloaded ? STATE_INACTIVE : activeStates[index];
-          return /*#__PURE__*/_jsx(Screen, {
-            style: [StyleSheet.absoluteFill, {
-              pointerEvents: 'box-none'
-            }],
-            enabled: detachInactiveScreens,
-            activityState: activityState,
-            freezeOnBlur: freezeOnBlur,
-            shouldFreeze: activityState === STATE_INACTIVE && !isPreloaded,
-            homeIndicatorHidden: autoHideHomeIndicator,
+          const isInModalPresentation = getIsInModalPresentation(scene, interpolationIndex, isParentModal);
+          const isModal = scene.descriptor.options.presentation === 'modal' || getIsModalPresentation(scene.descriptor.options.cardStyleInterpolator);
+          const isNextScreenModal = nextScene != null && (nextScene.descriptor.options.presentation === 'modal' || getIsModalPresentation(nextScene.descriptor.options.cardStyleInterpolator));
+          const isNextScreenTransparent = nextScene?.descriptor.options.presentation === 'transparentModal';
+          const isAnimationEnabled = getAnimationEnabled(animation) || (
+          // Also check next screen's animation,
+          // As it will result in both screens being visible
+          nextScene ? getAnimationEnabled(nextScene.descriptor.options.animation) : false);
+          const isRemoving = replacingRouteKeys.includes(route.key) || closingRouteKeys.includes(route.key);
+          const isFocusing = openingRouteKeys.includes(route.key) || nextRoute != null && [...closingRouteKeys, ...replacingRouteKeys].includes(nextRoute.key);
+          const isInactive = isInactiveRoute(route, this.props.routes);
+          const isRetained = state.retainedRouteKeys?.includes(route.key);
+          const isPreloaded = isInactive && !isRetained;
+          const isTopmost = index === routes.length - 1;
+          const isBeforeLast = index === routes.length - 2;
+
+          // Keep animating and the last two rendered routes visible for smoother transitions
+          const isVisible = focused ||
+          // React native destroys the view when hidden
+          // So we keep retained screens visible
+          // This makes sure any videos being played don't stop etc.
+          isRetained || isNextScreenTransparent ||
+          // Modal presentation on iOS has multiple screens visible at the same time
+          // The base screen before the modals renders the dim, which is always persistent
+          // On iPadOS, the base screen is visible while modal is in a smaller area on top
+          // The top edge of the last 3 screens can be seen animating behind the modal
+          isNextScreenModal && (!isModal || index >= routes.length - 3) ||
+          // We only need to keep other screens visible when animation is enabled
+          isAnimationEnabled && (isFocusing || isRemoving ||
+          // Preloaded screens should stay mounted, but remain hidden until focused
+          !isPreloaded && index >= routes.length - 2);
+          const activityMode =
+          // Keep focused and focusing screens interactive
+          focused || isFocusing ? 'normal' : inactiveBehavior === 'none' ||
+          // Keep effects running until the closing animation finishes
+          isRemoving ||
+          // Unpause preloaded or retained screens so updates are visible
+          // Handle retained explicitly as isInactive won't be updated until animation end
+          isInactive || isRetained ||
+          // Keep the screen before transparent screen active
+          // This lets the screen under the transparent screen update and animate
+          isNextScreenTransparent ||
+          // Keep the screen before last screen active
+          // Otherwise it breaks animation when going back
+          isBeforeLast ? 'inert' : inactiveBehavior === 'unmount' &&
+          // Don't unmount screens that needs to stay visible
+          !isVisible &&
+          // Don't unmount screens with nested navigators
+          // So we don't lose their state
+          !nestedStateRouteKeys.includes(route.key) ? 'unmounted' : 'paused';
+          if (activityMode === 'unmounted') {
+            return null;
+          }
+          return /*#__PURE__*/_jsx(ActivityView, {
+            mode: activityMode,
+            visible: isVisible,
+            style: {
+              ...StyleSheet.absoluteFill,
+              marginTop: headerTransparent || headerMode === 'screen' ? 0 :
+              // Add offset for non-transparent floating header
+              isFloatHeaderAbsolute ?
+              // If header is absolute, offset the card by the header height
+              headerHeight?.value :
+              // Otherwise, the in-flow float header already takes the
+              // focused header's space, so offset by the difference
+              headerHeight && focusedHeaderHeight ? headerHeight.value - focusedHeaderHeight.value : 0
+            },
             children: /*#__PURE__*/_jsx(CardContainer, {
               index: index,
               interpolationIndex: interpolationIndex,
-              modal: isModal,
-              active: index === routes.length - 1,
+              modal: isInModalPresentation,
+              active: isTopmost,
               focused: focused,
               opening: openingRouteKeys.includes(route.key),
               closing: closingRouteKeys.includes(route.key),
+              closingAnimated: scene.closing,
+              nextClosingAnimated: nextScene?.closing,
               layout: layout,
               gesture: gesture,
               scene: scene,
@@ -461,15 +527,13 @@ export class CardStack extends React.Component {
               onHeaderHeightChange: this.handleHeaderLayout,
               getPreviousScene: this.getPreviousScene,
               getFocusedRoute: this.getFocusedRoute,
-              hasAbsoluteFloatHeader: isFloatHeaderAbsolute && !headerTransparent,
               renderHeader: renderHeader,
               onOpenRoute: onOpenRoute,
               onCloseRoute: onCloseRoute,
               onTransitionStart: onTransitionStart,
               onTransitionEnd: onTransitionEnd,
-              isNextScreenTransparent: isNextScreenTransparent,
-              detachCurrentScreen: detachCurrentScreen,
-              preloaded: isPreloaded
+              preloaded: isInactive,
+              children: scene.descriptor.render()
             })
           }, route.key);
         })