@amazon-devices/react-navigation__stack 7.0.1759135970 → 8.0.9000000000

package/src/views/Stack/CardStack.tsx

@@ -1,20 +1,20 @@
 import {
-  Background,
   getDefaultHeaderHeight,
   SafeAreaProviderCompat,
 } from '@amazon-devices/react-navigation__elements';
 import type {
+  LocaleDirection,
   ParamListBase,
   Route,
   StackNavigationState,
 } from '@amazon-devices/react-navigation__native';
-import Color from 'color';
 import * as React from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   Platform,
   StyleSheet,
+  View,
 } from 'react-native';
 import type { EdgeInsets } from '@amazon-devices/react-native-safe-area-context';
 
@@ -23,33 +23,45 @@ import {
   forNoAnimation as forNoAnimationCard,
 } from '../../TransitionConfigs/CardStyleInterpolators';
 import {
+  BottomSheetAndroid,
   DefaultTransition,
+  FadeFromBottomAndroid,
+  FadeFromRightAndroid,
   ModalFadeTransition,
+  ModalSlideFromBottomIOS,
   ModalTransition,
+  RevealFromBottomAndroid,
+  ScaleFromCenterAndroid,
+  SlideFromLeftIOS,
+  SlideFromRightIOS,
 } from '../../TransitionConfigs/TransitionPresets';
 import type {
   Layout,
   Scene,
-  StackDescriptor,
+  StackAnimationName,
+  StackCardStyleInterpolator,
   StackDescriptorMap,
   StackHeaderMode,
   StackNavigationOptions,
+  TransitionPreset,
 } from '../../types';
-import findLastIndex from '../../utils/findLastIndex';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
+import { findLastIndex } from '../../utils/findLastIndex';
+import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
+import { getModalRouteKeys } from '../../utils/getModalRoutesKeys';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { MaybeScreen, MaybeScreenContainer } from '../Screens';
-import { getIsModalPresentation } from './Card';
-import CardContainer from './CardContainer';
+import { CardContainer } from './CardContainer';
 
 type GestureValues = {
   [key: string]: Animated.Value;
 };
 
 type Props = {
+  direction: LocaleDirection;
   insets: EdgeInsets;
   state: StackNavigationState<ParamListBase>;
   descriptors: StackDescriptorMap;
+  preloadedDescriptors: StackDescriptorMap;
   routes: Route<string>[];
   openingRouteKeys: string[];
   closingRouteKeys: string[];
@@ -59,7 +71,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: (
@@ -79,11 +90,31 @@ type State = {
   scenes: Scene[];
   gestures: GestureValues;
   layout: Layout;
+  activeStates: (0 | 1 | Animated.AnimatedInterpolation<0 | 1>)[];
   headerHeights: Record<string, number>;
 };
 
+const NAMED_TRANSITIONS_PRESETS = {
+  default: DefaultTransition,
+  fade: ModalFadeTransition,
+  fade_from_bottom: FadeFromBottomAndroid,
+  fade_from_right: FadeFromRightAndroid,
+  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,
+  }),
+} as const satisfies Record<StackAnimationName, TransitionPreset>;
+
+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: {} });
 
@@ -107,6 +138,16 @@ const getInterpolationIndex = (scenes: Scene[], index: number) => {
   return interpolationIndex;
 };
 
+const getIsModalPresentation = (
+  cardStyleInterpolator: StackCardStyleInterpolator
+) => {
+  return (
+    cardStyleInterpolator === forModalPresentationIOS ||
+    // Handle custom modal presentation interpolators as well
+    cardStyleInterpolator.name === 'forModalPresentationIOS'
+  );
+};
+
 const getIsModal = (
   scene: Scene,
   interpolationIndex: number,
@@ -158,22 +199,30 @@ const getHeaderHeights = (
 
 const getDistanceFromOptions = (
   layout: Layout,
-  descriptor?: StackDescriptor
+  options: StackNavigationOptions | undefined,
+  isRTL: boolean
 ) => {
-  const {
-    presentation,
-    gestureDirection = presentation === 'modal'
+  if (options?.gestureDirection) {
+    return getDistanceForDirection(layout, options.gestureDirection, isRTL);
+  }
+
+  const defaultGestureDirection =
+    options?.presentation === 'modal'
       ? ModalTransition.gestureDirection
-      : DefaultTransition.gestureDirection,
-  } = (descriptor?.options || {}) as StackNavigationOptions;
+      : DefaultTransition.gestureDirection;
 
-  return getDistanceForDirection(layout, gestureDirection);
+  const gestureDirection = options?.animation
+    ? NAMED_TRANSITIONS_PRESETS[options?.animation]?.gestureDirection
+    : defaultGestureDirection;
+
+  return getDistanceForDirection(layout, gestureDirection, isRTL);
 };
 
 const getProgressFromGesture = (
   gesture: Animated.Value,
   layout: Layout,
-  descriptor?: StackDescriptor
+  options: StackNavigationOptions | undefined,
+  isRTL: boolean
 ) => {
   const distance = getDistanceFromOptions(
     {
@@ -182,7 +231,8 @@ const getProgressFromGesture = (
       width: Math.max(1, layout.width),
       height: Math.max(1, layout.height),
     },
-    descriptor
+    options,
+    isRTL
   );
 
   if (distance > 0) {
@@ -198,7 +248,21 @@ const getProgressFromGesture = (
   });
 };
 
-export default class CardStack extends React.Component<Props, State> {
+function getDefaultAnimation(animation: StackAnimationName | undefined) {
+  // Disable screen transition animation by default on web, windows and macos to match the native behavior
+  const excludedPlatforms =
+    Platform.OS !== 'web' &&
+    Platform.OS !== 'windows' &&
+    Platform.OS !== 'macos';
+
+  return animation ?? (excludedPlatforms ? 'default' : 'none');
+}
+
+export function getAnimationEnabled(animation: StackAnimationName | undefined) {
+  return getDefaultAnimation(animation) !== 'none';
+}
+
+export class CardStack extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Props,
     state: State
@@ -210,164 +274,284 @@ export default class CardStack extends React.Component<Props, State> {
       return null;
     }
 
-    const gestures = props.routes.reduce<GestureValues>((acc, curr) => {
-      const descriptor = props.descriptors[curr.key];
-      const { animationEnabled } = descriptor?.options || {};
+    const gestures = [
+      ...props.routes,
+      ...props.state.preloadedRoutes,
+    ].reduce<GestureValues>((acc, curr) => {
+      const descriptor =
+        props.descriptors[curr.key] || props.preloadedDescriptors[curr.key];
+      const { animation } = descriptor?.options || {};
 
       acc[curr.key] =
         state.gestures[curr.key] ||
         new Animated.Value(
-          props.openingRouteKeys.includes(curr.key) &&
-          animationEnabled !== false
-            ? getDistanceFromOptions(state.layout, descriptor)
+          (props.openingRouteKeys.includes(curr.key) &&
+            getAnimationEnabled(animation)) ||
+          props.state.preloadedRoutes.includes(curr)
+            ? getDistanceFromOptions(
+                state.layout,
+                descriptor?.options,
+                props.direction === 'rtl'
+              )
             : 0
         );
 
       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 modalRouteKeys = getModalRouteKeys(
+      [...props.routes, ...props.state.preloadedRoutes],
+      {
+        ...props.descriptors,
+        ...props.preloadedDescriptors,
+      }
+    );
 
-      const currentGesture = gestures[route.key];
-      const previousGesture = previousRoute
-        ? gestures[previousRoute.key]
-        : undefined;
-      const nextGesture = nextRoute ? gestures[nextRoute.key] : undefined;
+    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 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 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;
-
-      let 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 scene = {
-        route,
-        descriptor: {
-          ...descriptor,
-          options: {
-            ...descriptor.options,
-            animationEnabled,
-            cardOverlayEnabled,
-            cardStyleInterpolator,
-            gestureDirection,
-            gestureEnabled,
-            headerStyleInterpolator,
-            transitionSpec,
-            headerMode,
+        const isAnimationEnabled = getAnimationEnabled(animation);
+
+        const transitionPreset =
+          animation !== 'default'
+            ? NAMED_TRANSITIONS_PRESETS[animation]
+            : optionsForTransitionConfig.presentation === 'transparentModal'
+              ? ModalFadeTransition
+              : optionsForTransitionConfig.presentation === 'modal' || isModal
+                ? ModalTransition
+                : DefaultTransition;
+
+        const {
+          gestureEnabled = Platform.OS === 'ios' && isAnimationEnabled,
+          gestureDirection = transitionPreset.gestureDirection,
+          transitionSpec = transitionPreset.transitionSpec,
+          cardStyleInterpolator = isAnimationEnabled
+            ? transitionPreset.cardStyleInterpolator
+            : forNoAnimationCard,
+          headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
+          cardOverlayEnabled = (Platform.OS !== 'ios' &&
+            optionsForTransitionConfig.presentation !== 'transparentModal') ||
+            getIsModalPresentation(cardStyleInterpolator),
+        } = optionsForTransitionConfig;
+
+        const headerMode: StackHeaderMode =
+          descriptor.options.headerMode ??
+          (!(
+            optionsForTransitionConfig.presentation === 'modal' ||
+            optionsForTransitionConfig.presentation === 'transparentModal' ||
+            nextOptions?.presentation === 'modal' ||
+            nextOptions?.presentation === 'transparentModal' ||
+            getIsModalPresentation(cardStyleInterpolator)
+          ) &&
+          Platform.OS === 'ios' &&
+          descriptor.options.header === undefined
+            ? 'float'
+            : 'screen');
+
+        const isRTL = props.direction === 'rtl';
+
+        const scene = {
+          route,
+          descriptor: {
+            ...descriptor,
+            options: {
+              ...descriptor.options,
+              animation,
+              cardOverlayEnabled,
+              cardStyleInterpolator,
+              gestureDirection,
+              gestureEnabled,
+              headerStyleInterpolator,
+              transitionSpec,
+              headerMode,
+            },
           },
-        },
-        progress: {
-          current: getProgressFromGesture(
-            currentGesture,
-            state.layout,
-            descriptor
-          ),
-          next:
-            nextGesture &&
-            nextDescriptor?.options.presentation !== 'transparentModal'
+          progress: {
+            current: getProgressFromGesture(
+              currentGesture,
+              state.layout,
+              descriptor.options,
+              isRTL
+            ),
+            next:
+              nextGesture && nextOptions?.presentation !== 'transparentModal'
+                ? getProgressFromGesture(
+                    nextGesture,
+                    state.layout,
+                    nextOptions,
+                    isRTL
+                  )
+                : undefined,
+            previous: previousGesture
               ? getProgressFromGesture(
-                  nextGesture,
+                  previousGesture,
                   state.layout,
-                  nextDescriptor
+                  previousOptions,
+                  isRTL
                 )
               : undefined,
-          previous: previousGesture
-            ? getProgressFromGesture(
-                previousGesture,
-                state.layout,
-                previousDescriptor
-              )
-            : undefined,
-        },
-        __memo: [
-          state.layout,
-          descriptor,
-          nextDescriptor,
-          previousDescriptor,
-          currentGesture,
-          nextGesture,
-          previousGesture,
-        ],
-      };
+          },
+          __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;
+        }
 
-      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;
-    });
+    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:
+          | 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 {
       routes: props.routes,
       scenes,
       gestures,
       descriptors: props.descriptors,
+      activeStates,
       headerHeights: getHeaderHeights(
         scenes,
         props.insets,
@@ -388,6 +572,7 @@ export default 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
@@ -472,11 +657,11 @@ export default class CardStack extends React.Component<Props, State> {
       insets,
       state,
       routes,
+      openingRouteKeys,
       closingRouteKeys,
       onOpenRoute,
       onCloseRoute,
       renderHeader,
-      renderScene,
       isParentHeaderShown,
       isParentModal,
       onTransitionStart,
@@ -487,12 +672,12 @@ export default class CardStack extends React.Component<Props, State> {
       detachInactiveScreens = Platform.OS === 'web' ||
         Platform.OS === 'android' ||
         Platform.OS === 'ios' ||
-        //amznmod_react add kepler platform
-        //@ts-ignore
+        // @ts-ignore - accept kepler as a platform
         Platform.OS === 'kepler',
     } = this.props;
 
-    const { scenes, layout, gestures, headerHeights } = this.state;
+    const { scenes, layout, gestures, activeStates, headerHeights } =
+      this.state;
 
     const focusedRoute = state.routes[state.index];
     const focusedHeaderHeight = headerHeights[focusedRoute.key];
@@ -512,41 +697,8 @@ export default class CardStack extends React.Component<Props, State> {
       return false;
     });
 
-    let activeScreensLimit = 1;
-
-    for (let i = scenes.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
-        // For example, (Opaque -> Transparent -> Opaque)
-        if (i <= scenes.length - 2) {
-          break;
-        }
-      }
-    }
-
-    const floatingHeader = (
-      <React.Fragment key="header">
+    return (
+      <View style={styles.container}>
         {renderHeader({
           mode: 'float',
           layout,
@@ -563,44 +715,34 @@ export default class CardStack extends React.Component<Props, State> {
             ],
           ],
         })}
-      </React.Fragment>
-    );
-
-    return (
-      <Background>
-        {isFloatHeaderAbsolute ? null : floatingHeader}
         <MaybeScreenContainer
           enabled={detachInactiveScreens}
           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];
-
-            // 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
-            // For those on top of the stack and with interaction enabled, the value is 2
-            // For the old implementation, it stays the same it was
-            let isScreenActive:
-              | 2
-              | 1
-              | 0 = 1;
-
-            if (index < self.length - activeScreensLimit - 1) {
-              // screen should be inactive because it is too deep in the stack
-              isScreenActive = STATE_INACTIVE;
-            } else {
-              isScreenActive = STATE_TRANSITIONING_OR_BELOW_TOP;
+            // It is possible that for a short period the route appears in both arrays.
+            // Particularly, if the screen is removed with `retain`, then it needs a moment to execute the animation.
+            // However, due to the router action, it immediately populates the `preloadedRoutes` array.
+            // Practically, the logic below takes care that it is rendered only once.
+            const isPreloaded =
+              state.preloadedRoutes.includes(route) && !routes.includes(route);
+            if (
+              state.preloadedRoutes.includes(route) &&
+              routes.includes(route) &&
+              index >= routes.length
+            ) {
+              return null;
             }
 
             const {
               headerShown = true,
               headerTransparent,
-              headerStyle,
-              headerTintColor,
               freezeOnBlur,
+              autoHideHomeIndicator,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -611,26 +753,6 @@ export default class CardStack extends React.Component<Props, State> {
             const headerHeight =
               headerShown !== false ? headerHeights[route.key] : 0;
 
-            let headerDarkContent: boolean | undefined;
-
-            if (headerShown) {
-              if (typeof headerTintColor === 'string') {
-                headerDarkContent = Color(headerTintColor).isDark();
-              } else {
-                const flattenedHeaderStyle = StyleSheet.flatten(headerStyle);
-
-                if (
-                  flattenedHeaderStyle &&
-                  'backgroundColor' in flattenedHeaderStyle &&
-                  typeof flattenedHeaderStyle.backgroundColor === 'string'
-                ) {
-                  headerDarkContent = !Color(
-                    flattenedHeaderStyle.backgroundColor
-                  ).isDark();
-                }
-              }
-            }
-
             // Start from current card and count backwards the number of cards with same interpolation
             const interpolationIndex = getInterpolationIndex(scenes, index);
             const isModal = getIsModal(
@@ -647,21 +769,28 @@ export default class CardStack extends React.Component<Props, State> {
               scenes[index + 1]?.descriptor.options.detachPreviousScreen !==
               false;
 
+            const activityState = isPreloaded
+              ? STATE_INACTIVE
+              : activeStates[index];
+
             return (
               <MaybeScreen
                 key={route.key}
-                style={StyleSheet.absoluteFill}
+                style={[StyleSheet.absoluteFill]}
                 enabled={detachInactiveScreens}
-                active={isScreenActive}
+                active={activityState}
                 freezeOnBlur={freezeOnBlur}
+                shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
+                homeIndicatorHidden={autoHideHomeIndicator}
                 pointerEvents="box-none"
               >
                 <CardContainer
                   index={index}
                   interpolationIndex={interpolationIndex}
                   modal={isModal}
-                  active={index === self.length - 1}
+                  active={index === routes.length - 1}
                   focused={focused}
+                  opening={openingRouteKeys.includes(route.key)}
                   closing={closingRouteKeys.includes(route.key)}
                   layout={layout}
                   gesture={gesture}
@@ -678,25 +807,23 @@ export default class CardStack extends React.Component<Props, State> {
                   onHeaderHeightChange={this.handleHeaderLayout}
                   getPreviousScene={this.getPreviousScene}
                   getFocusedRoute={this.getFocusedRoute}
-                  headerDarkContent={headerDarkContent}
                   hasAbsoluteFloatHeader={
                     isFloatHeaderAbsolute && !headerTransparent
                   }
                   renderHeader={renderHeader}
-                  renderScene={renderScene}
                   onOpenRoute={onOpenRoute}
                   onCloseRoute={onCloseRoute}
                   onTransitionStart={onTransitionStart}
                   onTransitionEnd={onTransitionEnd}
                   isNextScreenTransparent={isNextScreenTransparent}
                   detachCurrentScreen={detachCurrentScreen}
+                  preloaded={isPreloaded}
                 />
               </MaybeScreen>
             );
           })}
         </MaybeScreenContainer>
-        {isFloatHeaderAbsolute ? floatingHeader : null}
-      </Background>
+      </View>
     );
   }
 }
@@ -708,8 +835,8 @@ const styles = StyleSheet.create({
   absolute: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
   },
   floating: {
     zIndex: 1,