@react-navigation/stack 8.0.0-alpha.4 → 8.0.0-alpha.40

package/src/views/Stack/CardStack.tsx

@@ -1,5 +1,8 @@
 import { getDefaultHeaderHeight } from '@react-navigation/elements';
-import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
+import {
+  ActivityView,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements/internal';
 import type {
   LocaleDirection,
   ParamListBase,
@@ -15,7 +18,6 @@ import {
   View,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
-import { Screen, ScreenContainer } from 'react-native-screens';
 
 import {
   forModalPresentationIOS,
@@ -44,16 +46,20 @@ import type {
   StackNavigationOptions,
   TransitionPreset,
 } from '../../types';
-import { findLastIndex } from '../../utils/findLastIndex';
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getModalRouteKeys } from '../../utils/getModalRoutesKeys';
-import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
+import type {
+  HeaderHeight,
+  Props as HeaderContainerProps,
+} from '../Header/HeaderContainer';
 import { CardContainer } from './CardContainer';
 
 type GestureValues = {
   [key: string]: Animated.Value;
 };
 
+type HeaderHeights = Record<string, HeaderHeight>;
+
 type Props = {
   direction: LocaleDirection;
   insets: EdgeInsets;
@@ -62,6 +68,7 @@ type Props = {
   routes: Route<string>[];
   openingRouteKeys: string[];
   closingRouteKeys: string[];
+  replacingRouteKeys: string[];
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
   getPreviousRoute: (props: {
@@ -87,8 +94,7 @@ type State = {
   scenes: Scene[];
   gestures: GestureValues;
   layout: Layout;
-  activeStates: (0 | 1 | Animated.AnimatedInterpolation<0 | 1>)[];
-  headerHeights: Record<string, number>;
+  headerHeights: HeaderHeights;
 };
 
 const NAMED_TRANSITIONS_PRESETS = {
@@ -107,16 +113,16 @@ const NAMED_TRANSITIONS_PRESETS = {
   }),
 } as const satisfies Record<StackAnimationName, TransitionPreset>;
 
-const EPSILON = 1e-5;
+const HIDDEN_HEADER_HEIGHT = { measured: false, value: 0 };
 
-const STATE_INACTIVE = 0;
-const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
-const STATE_ON_TOP = 2;
+const getInterpolationIndex = (scenes: Scene[], index: number) => {
+  const scene = scenes[index];
 
-const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
+  if (scene == null) {
+    throw new Error(`Couldn't find a scene at index ${index}.`);
+  }
 
-const getInterpolationIndex = (scenes: Scene[], index: number) => {
-  const { cardStyleInterpolator } = scenes[index].descriptor.options;
+  const { cardStyleInterpolator } = scene.descriptor.options;
 
   // Start from current card and count backwards the number of cards with same interpolation
   let interpolationIndex = 0;
@@ -167,9 +173,9 @@ const getHeaderHeights = (
   isParentHeaderShown: boolean,
   isParentModal: boolean,
   layout: Layout,
-  previous: Record<string, number>
+  previous: HeaderHeights
 ) => {
-  return scenes.reduce<Record<string, number>>((acc, curr, index) => {
+  return scenes.reduce<HeaderHeights>((acc, curr, index) => {
     const {
       headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
       headerStyle,
@@ -180,19 +186,34 @@ const getHeaderHeights = (
     const height =
       'height' in style && typeof style.height === 'number'
         ? style.height
-        : previous[curr.route.key];
+        : 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,
-          });
+    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;
   }, {});
@@ -263,6 +284,27 @@ export function getAnimationEnabled(animation: StackAnimationName | undefined) {
   return getDefaultAnimation(animation) !== 'none';
 }
 
+const getAllRoutes = (
+  routes: Route<string>[],
+  state: StackNavigationState<ParamListBase>
+) => {
+  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: Route<string>, routes: Route<string>[]) =>
+  // `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<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
@@ -275,10 +317,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);
+
+    const gestures = allRoutes.reduce<GestureValues>((acc, curr) => {
       const descriptor = props.descriptors[curr.key];
       const { animation } = descriptor?.options || {};
 
@@ -287,7 +328,7 @@ export class CardStack extends React.Component<Props, State> {
         new Animated.Value(
           (props.openingRouteKeys.includes(curr.key) &&
             getAnimationEnabled(animation)) ||
-          props.state.preloadedRoutes.includes(curr)
+            isInactiveRoute(curr, props.routes)
             ? getDistanceFromOptions(
                 state.layout,
                 descriptor?.options,
@@ -299,254 +340,179 @@ export class CardStack extends React.Component<Props, State> {
       return acc;
     }, {});
 
-    const modalRouteKeys = getModalRouteKeys(
-      [...props.routes, ...props.state.preloadedRoutes],
-      props.descriptors
-    );
+    const modalRouteKeys = getModalRouteKeys(allRoutes, 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 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 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 oldScene = state.scenes[index];
+
+      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?.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
+      // 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,
           },
-          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,
+        ],
+      };
 
-    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;
-          }
-        }
+      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;
       }
 
-      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:
-          | Animated.AnimatedInterpolation<0 | 1 | 2>
-          | 0
-          | 1
-          | 2;
-
-        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 scene;
+    });
 
     return {
       routes: props.routes,
       scenes,
       gestures,
       descriptors: props.descriptors,
-      activeStates,
       headerHeights: getHeaderHeights(
         scenes,
         props.insets,
@@ -567,7 +533,6 @@ export class CardStack extends React.Component<Props, State> {
       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
@@ -611,14 +576,17 @@ export class CardStack extends React.Component<Props, State> {
     this.setState(({ 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,
+          },
         },
       };
     });
@@ -627,7 +595,13 @@ export class CardStack extends React.Component<Props, State> {
   private getFocusedRoute = () => {
     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;
   };
 
   private getPreviousScene = ({ route }: { route: Route<string> }) => {
@@ -654,27 +628,37 @@ export class CardStack extends React.Component<Props, State> {
       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',
     } = this.props;
 
-    const { scenes, layout, gestures, activeStates, headerHeights } =
-      this.state;
+    const { scenes, layout, gestures, headerHeights } = 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, headerTransparent, headerShown = true } = options;
 
@@ -693,13 +677,16 @@ export class CardStack extends React.Component<Props, State> {
       scenes.findLast((scene) => scene.route.key === focusedRoute.key)
         ?.descriptor.options.headerMode === 'float';
 
+    const focusedHeaderHeight = headerHeights[focusedRoute.key];
+
     return (
       <View style={styles.container}>
         {renderHeader({
           mode: 'float',
-          scenes,
+          scenes: activeHeaderScenes,
           getPreviousScene: this.getPreviousScene,
           getFocusedRoute: this.getFocusedRoute,
+          contentHeight: headerHeights[focusedRoute.key],
           onContentHeightChange: this.handleHeaderLayout,
           style: [
             isFloatHeaderAbsolute && [
@@ -707,39 +694,36 @@ export class CardStack extends React.Component<Props, State> {
               // 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,
               },
             ],
           ],
         })}
-        <ScreenContainer
-          enabled={detachInactiveScreens}
-          style={styles.container}
-          onLayout={this.handleLayout}
-        >
-          {[...routes, ...state.preloadedRoutes].map((route, index) => {
+        <View style={styles.container} onLayout={this.handleLayout}>
+          {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,
+              headerMode,
               headerTransparent,
-              freezeOnBlur,
-              autoHideHomeIndicator,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -748,7 +732,9 @@ export class CardStack extends React.Component<Props, State> {
             const safeAreaInsetLeft = insets.left;
 
             const headerHeight =
-              headerShown !== false ? headerHeights[route.key] : 0;
+              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);
@@ -758,33 +744,107 @@ export class CardStack extends React.Component<Props, State> {
               isParentModal
             );
 
-            const isNextScreenTransparent =
-              scenes[index + 1]?.descriptor.options.presentation ===
-              'transparentModal';
-
-            const detachCurrentScreen =
-              scenes[index + 1]?.descriptor.options.detachPreviousScreen !==
-              false;
+            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 activityState = isPreloaded
-              ? STATE_INACTIVE
-              : activeStates[index];
+            const isNextScreenTransparent =
+              nextScene?.descriptor.options.presentation === 'transparentModal';
+
+            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 ||
+              isNextScreenTransparent ||
+              // 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 ||
+              // 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 = // Render focused and animating screens normally
+              focused || isFocusing
+                ? 'normal'
+                : inactiveBehavior === 'none' ||
+                    // 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
+                      !('state' in route && route.state)
+                    ? 'unmounted'
+                    : 'paused';
+
+            if (activityMode === 'unmounted') {
+              return null;
+            }
 
             return (
-              <Screen
+              <ActivityView
                 key={route.key}
-                style={[StyleSheet.absoluteFill, { pointerEvents: 'box-none' }]}
-                enabled={detachInactiveScreens}
-                activityState={activityState}
-                freezeOnBlur={freezeOnBlur}
-                shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
-                homeIndicatorHidden={autoHideHomeIndicator}
+                mode={activityMode}
+                visible={isVisible}
+                style={{
+                  ...StyleSheet.absoluteFill,
+                  // Avoid unfocused larger pages increasing scroll area
+                  // e.g. when a smaller screen is pushed over a larger one on web
+                  overflow: isTopmost ? undefined : 'hidden',
+                  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,
+                }}
               >
                 <CardContainer
                   index={index}
                   interpolationIndex={interpolationIndex}
                   modal={isModal}
-                  active={index === routes.length - 1}
+                  active={isTopmost}
                   focused={focused}
                   opening={openingRouteKeys.includes(route.key)}
                   closing={closingRouteKeys.includes(route.key)}
@@ -803,22 +863,19 @@ export class CardStack extends React.Component<Props, State> {
                   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}
-                />
-              </Screen>
+                  preloaded={isInactive}
+                >
+                  {scene.descriptor.render()}
+                </CardContainer>
+              </ActivityView>
             );
           })}
-        </ScreenContainer>
+        </View>
       </View>
     );
   }