@amazon-devices/react-navigation__stack 7.0.1759135970 → 8.0.9000000000-rn-83

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

@@ -1,16 +1,35 @@
-import { Background, getDefaultHeaderHeight, SafeAreaProviderCompat } from '@amazon-devices/react-navigation__elements';
-import Color from 'color';
+"use strict";
+
+import { getDefaultHeaderHeight, SafeAreaProviderCompat } from '@amazon-devices/react-navigation__elements';
 import * as React from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
-import { forModalPresentationIOS, forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
-import { DefaultTransition, ModalFadeTransition, ModalTransition } from '../../TransitionConfigs/TransitionPresets';
-import findLastIndex from '../../utils/findLastIndex';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
-import { MaybeScreen, MaybeScreenContainer } from '../Screens';
-import { getIsModalPresentation } from './Card';
-import CardContainer from './CardContainer';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+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 { getDistanceForDirection } from "../../utils/getDistanceForDirection.js";
+import { getModalRouteKeys } from "../../utils/getModalRoutesKeys.js";
+import { MaybeScreen, MaybeScreenContainer } from "../Screens.js";
+import { CardContainer } from "./CardContainer.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
+  })
+};
+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: {}
 });
@@ -22,8 +41,7 @@ const getInterpolationIndex = (scenes, index) => {
   // Start from current card and count backwards the number of cards with same interpolation
   let interpolationIndex = 0;
   for (let i = index - 1; i >= 0; i--) {
-    var _scenes$i;
-    const cardStyleInterpolatorCurrent = (_scenes$i = scenes[i]) === null || _scenes$i === void 0 ? void 0 : _scenes$i.descriptor.options.cardStyleInterpolator;
+    const cardStyleInterpolatorCurrent = scenes[i]?.descriptor.options.cardStyleInterpolator;
     if (cardStyleInterpolatorCurrent !== cardStyleInterpolator) {
       break;
     }
@@ -31,6 +49,11 @@ const getInterpolationIndex = (scenes, index) => {
   }
   return interpolationIndex;
 };
+const getIsModalPresentation = cardStyleInterpolator => {
+  return cardStyleInterpolator === forModalPresentationIOS ||
+  // Handle custom modal presentation interpolators as well
+  cardStyleInterpolator.name === 'forModalPresentationIOS';
+};
 const getIsModal = (scene, interpolationIndex, isParentModal) => {
   if (isParentModal) {
     return true;
@@ -56,20 +79,21 @@ const getHeaderHeights = (scenes, insets, isParentHeaderShown, isParentModal, la
     return acc;
   }, {});
 };
-const getDistanceFromOptions = (layout, descriptor) => {
-  const {
-    presentation,
-    gestureDirection = presentation === 'modal' ? ModalTransition.gestureDirection : DefaultTransition.gestureDirection
-  } = (descriptor === null || descriptor === void 0 ? void 0 : descriptor.options) || {};
-  return getDistanceForDirection(layout, gestureDirection);
+const getDistanceFromOptions = (layout, options, isRTL) => {
+  if (options?.gestureDirection) {
+    return getDistanceForDirection(layout, options.gestureDirection, isRTL);
+  }
+  const defaultGestureDirection = options?.presentation === 'modal' ? ModalTransition.gestureDirection : DefaultTransition.gestureDirection;
+  const gestureDirection = options?.animation ? NAMED_TRANSITIONS_PRESETS[options?.animation]?.gestureDirection : defaultGestureDirection;
+  return getDistanceForDirection(layout, gestureDirection, isRTL);
 };
-const getProgressFromGesture = (gesture, layout, descriptor) => {
+const getProgressFromGesture = (gesture, layout, options, isRTL) => {
   const distance = getDistanceFromOptions({
     // Make sure that we have a non-zero distance, otherwise there will be incorrect progress
     // This causes blank screen on web if it was previously inside container with display: none
     width: Math.max(1, layout.width),
     height: Math.max(1, layout.height)
-  }, descriptor);
+  }, options, isRTL);
   if (distance > 0) {
     return gesture.interpolate({
       inputRange: [0, distance],
@@ -81,55 +105,75 @@ const getProgressFromGesture = (gesture, layout, descriptor) => {
     outputRange: [0, 1]
   });
 };
-export default class CardStack extends React.Component {
+function getDefaultAnimation(animation) {
+  // 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) {
+  return getDefaultAnimation(animation) !== 'none';
+}
+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.reduce((acc, curr) => {
-      const descriptor = props.descriptors[curr.key];
+    const gestures = [...props.routes, ...props.state.preloadedRoutes].reduce((acc, curr) => {
+      const descriptor = props.descriptors[curr.key] || props.preloadedDescriptors[curr.key];
       const {
-        animationEnabled
-      } = (descriptor === null || descriptor === void 0 ? void 0 : descriptor.options) || {};
-      acc[curr.key] = state.gestures[curr.key] || new Animated.Value(props.openingRouteKeys.includes(curr.key) && animationEnabled !== false ? getDistanceFromOptions(state.layout, descriptor) : 0);
+        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);
       return acc;
     }, {});
-    const scenes = props.routes.map((route, index, self) => {
-      const previousRoute = self[index - 1];
-      const nextRoute = self[index + 1];
+    const modalRouteKeys = getModalRouteKeys([...props.routes, ...props.state.preloadedRoutes], {
+      ...props.descriptors,
+      ...props.preloadedDescriptors
+    });
+    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 nextDescriptor = props.descriptors[nextRoute === null || nextRoute === void 0 ? void 0 : nextRoute.key] || state.descriptors[nextRoute === null || nextRoute === void 0 ? void 0 : nextRoute.key];
-      const previousDescriptor = props.descriptors[previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.key] || state.descriptors[previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.key];
+      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 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;
+      // 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 {
-        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,
+        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 = descriptor.options.headerMode ?? (!(optionsForTransitionConfig.presentation === 'modal' || optionsForTransitionConfig.presentation === 'transparentModal' || (nextDescriptor === null || nextDescriptor === void 0 ? void 0 : nextDescriptor.options.presentation) === 'modal' || (nextDescriptor === null || nextDescriptor === void 0 ? void 0 : nextDescriptor.options.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)) && Platform.OS === 'ios' && descriptor.options.header === undefined ? 'float' : 'screen');
+      const isRTL = props.direction === 'rtl';
       const scene = {
         route,
         descriptor: {
           ...descriptor,
           options: {
             ...descriptor.options,
-            animationEnabled,
+            animation,
             cardOverlayEnabled,
             cardStyleInterpolator,
             gestureDirection,
@@ -140,11 +184,11 @@ export default class CardStack extends React.Component {
           }
         },
         progress: {
-          current: getProgressFromGesture(currentGesture, state.layout, descriptor),
-          next: nextGesture && (nextDescriptor === null || nextDescriptor === void 0 ? void 0 : nextDescriptor.options.presentation) !== 'transparentModal' ? getProgressFromGesture(nextGesture, state.layout, nextDescriptor) : undefined,
-          previous: previousGesture ? getProgressFromGesture(previousGesture, state.layout, previousDescriptor) : undefined
+          current: getProgressFromGesture(currentGesture, state.layout, descriptor.options, isRTL),
+          next: nextGesture && nextOptions?.presentation !== 'transparentModal' ? getProgressFromGesture(nextGesture, state.layout, nextOptions, isRTL) : undefined,
+          previous: previousGesture ? getProgressFromGesture(previousGesture, state.layout, previousOptions, isRTL) : 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
@@ -154,11 +198,70 @@ export default class CardStack extends React.Component {
       }
       return scene;
     });
+    let activeStates = state.activeStates;
+    if (props.routes.length !== state.routes.length) {
+      // amznmod_react - change activeScreensLimit from 1 to 2
+      // Increase activeScreensLimit to prevent detaching the screen underneath
+      // When performing a pop animation, the screen underneath is inactive and has to by mounted
+      // This takes a long time and results with a noticeable delay when navigating between screens
+      // @ts-ignore - accept kepler as a platform
+      let activeScreensLimit = Platform.OS === 'kepler' ? 2 : 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)
     };
   }
@@ -170,6 +273,7 @@ export default 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
@@ -245,11 +349,11 @@ export default class CardStack extends React.Component {
       insets,
       state,
       routes,
+      openingRouteKeys,
       closingRouteKeys,
       onOpenRoute,
       onCloseRoute,
       renderHeader,
-      renderScene,
       isParentHeaderShown,
       isParentModal,
       onTransitionStart,
@@ -258,14 +362,14 @@ export default class CardStack extends React.Component {
       onGestureEnd,
       onGestureCancel,
       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,
+      activeStates,
       headerHeights
     } = this.state;
     const focusedRoute = state.routes[state.index];
@@ -282,137 +386,99 @@ export default class CardStack extends React.Component {
       }
       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 === null || cardStyleInterpolator === void 0 ? void 0 : 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 = /*#__PURE__*/React.createElement(React.Fragment, {
-      key: "header"
-    }, renderHeader({
-      mode: 'float',
-      layout,
-      scenes,
-      getPreviousScene: this.getPreviousScene,
-      getFocusedRoute: this.getFocusedRoute,
-      onContentHeightChange: this.handleHeaderLayout,
-      style: [styles.floating, isFloatHeaderAbsolute && [
-      // Without this, the header buttons won't be touchable on Android when headerTransparent: true
-      {
-        height: focusedHeaderHeight
-      }, styles.absolute]]
-    }));
-    return /*#__PURE__*/React.createElement(Background, null, isFloatHeaderAbsolute ? null : floatingHeader, /*#__PURE__*/React.createElement(MaybeScreenContainer, {
-      enabled: detachInactiveScreens,
+    return /*#__PURE__*/_jsxs(View, {
       style: styles.container,
-      onLayout: this.handleLayout
-    }, routes.map((route, index, self) => {
-      var _scenes, _scenes2;
-      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 = 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;
-      }
-      const {
-        headerShown = true,
-        headerTransparent,
-        headerStyle,
-        headerTintColor,
-        freezeOnBlur
-      } = 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;
-      let headerDarkContent;
-      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(scene, interpolationIndex, isParentModal);
-      const isNextScreenTransparent = ((_scenes = scenes[index + 1]) === null || _scenes === void 0 ? void 0 : _scenes.descriptor.options.presentation) === 'transparentModal';
-      const detachCurrentScreen = ((_scenes2 = scenes[index + 1]) === null || _scenes2 === void 0 ? void 0 : _scenes2.descriptor.options.detachPreviousScreen) !== false;
-      return /*#__PURE__*/React.createElement(MaybeScreen, {
-        key: route.key,
-        style: StyleSheet.absoluteFill,
-        enabled: detachInactiveScreens,
-        active: isScreenActive,
-        freezeOnBlur: freezeOnBlur,
-        pointerEvents: "box-none"
-      }, /*#__PURE__*/React.createElement(CardContainer, {
-        index: index,
-        interpolationIndex: interpolationIndex,
-        modal: isModal,
-        active: index === self.length - 1,
-        focused: focused,
-        closing: closingRouteKeys.includes(route.key),
-        layout: layout,
-        gesture: gesture,
-        scene: scene,
-        safeAreaInsetTop: safeAreaInsetTop,
-        safeAreaInsetRight: safeAreaInsetRight,
-        safeAreaInsetBottom: safeAreaInsetBottom,
-        safeAreaInsetLeft: safeAreaInsetLeft,
-        onGestureStart: onGestureStart,
-        onGestureCancel: onGestureCancel,
-        onGestureEnd: onGestureEnd,
-        headerHeight: headerHeight,
-        isParentHeaderShown: isParentHeaderShown,
-        onHeaderHeightChange: this.handleHeaderLayout,
+      children: [renderHeader({
+        mode: 'float',
+        layout,
+        scenes,
         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
-      }));
-    })), isFloatHeaderAbsolute ? floatingHeader : null);
+        onContentHeightChange: this.handleHeaderLayout,
+        style: [styles.floating, isFloatHeaderAbsolute && [
+        // Without this, the header buttons won't be touchable on Android when headerTransparent: true
+        {
+          height: focusedHeaderHeight
+        }, styles.absolute]]
+      }), /*#__PURE__*/_jsx(MaybeScreenContainer, {
+        enabled: detachInactiveScreens,
+        style: styles.container,
+        onLayout: this.handleLayout,
+        children: [...routes, ...state.preloadedRoutes].map((route, index) => {
+          const focused = focusedRoute.key === route.key;
+          const gesture = gestures[route.key];
+          const scene = scenes[index];
+          // It is possible that for a short period the route appears in both arrays.
+          // Particularly, if the screen is removed with `retain`, then it needs a moment to execute the animation.
+          // However, due to the router action, it immediately populates the `preloadedRoutes` array.
+          // Practically, the logic below takes care that it is rendered only once.
+          const isPreloaded = state.preloadedRoutes.includes(route) && !routes.includes(route);
+          if (state.preloadedRoutes.includes(route) && routes.includes(route) && index >= routes.length) {
+            return null;
+          }
+          const {
+            headerShown = true,
+            headerTransparent,
+            freezeOnBlur,
+            autoHideHomeIndicator
+          } = 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;
+
+          // 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(MaybeScreen, {
+            style: [StyleSheet.absoluteFill],
+            enabled: detachInactiveScreens,
+            active: activityState,
+            freezeOnBlur: freezeOnBlur,
+            shouldFreeze: activityState === STATE_INACTIVE && !isPreloaded,
+            homeIndicatorHidden: autoHideHomeIndicator,
+            pointerEvents: "box-none",
+            children: /*#__PURE__*/_jsx(CardContainer, {
+              index: index,
+              interpolationIndex: interpolationIndex,
+              modal: isModal,
+              active: index === routes.length - 1,
+              focused: focused,
+              opening: openingRouteKeys.includes(route.key),
+              closing: closingRouteKeys.includes(route.key),
+              layout: layout,
+              gesture: gesture,
+              scene: scene,
+              safeAreaInsetTop: safeAreaInsetTop,
+              safeAreaInsetRight: safeAreaInsetRight,
+              safeAreaInsetBottom: safeAreaInsetBottom,
+              safeAreaInsetLeft: safeAreaInsetLeft,
+              onGestureStart: onGestureStart,
+              onGestureCancel: onGestureCancel,
+              onGestureEnd: onGestureEnd,
+              headerHeight: headerHeight,
+              isParentHeaderShown: isParentHeaderShown,
+              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
+            })
+          }, route.key);
+        })
+      })]
+    });
   }
 }
 const styles = StyleSheet.create({
@@ -422,8 +488,8 @@ const styles = StyleSheet.create({
   absolute: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0
+    start: 0,
+    end: 0
   },
   floating: {
     zIndex: 1