@react-navigation/stack 7.0.12 → 7.0.14

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

@@ -1,18 +1,5 @@
 "use strict";
 
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { getDefaultHeaderHeight, SafeAreaProviderCompat } from '@react-navigation/elements';
 import * as React from 'react';
 import { Animated, Platform, StyleSheet, View } from 'react-native';
@@ -118,79 +105,110 @@ const getProgressFromGesture = (gesture, layout, descriptor, isRTL) => {
     outputRange: [0, 1]
   });
 };
-export let CardStack = /*#__PURE__*/function (_React$Component) {
-  function CardStack(_props) {
-    var _this;
-    _classCallCheck(this, CardStack);
-    _this = _callSuper(this, CardStack, [_props]);
-    _defineProperty(_this, "handleLayout", e => {
-      const {
-        height,
-        width
-      } = e.nativeEvent.layout;
-      const layout = {
-        width,
-        height
-      };
-      _this.setState((state, props) => {
-        if (height === state.layout.height && width === state.layout.width) {
-          return null;
-        }
-        return {
-          layout,
-          headerHeights: getHeaderHeights(state.scenes, props.insets, props.isParentHeaderShown, props.isParentModal, layout, state.headerHeights)
-        };
-      });
-    });
-    _defineProperty(_this, "handleHeaderLayout", ({
-      route,
-      height
-    }) => {
-      _this.setState(({
-        headerHeights
-      }) => {
-        const previousHeight = headerHeights[route.key];
-        if (previousHeight === height) {
-          return null;
-        }
-        return {
-          headerHeights: {
-            ...headerHeights,
-            [route.key]: height
-          }
-        };
-      });
-    });
-    _defineProperty(_this, "getFocusedRoute", () => {
+export class CardStack extends React.Component {
+  static getDerivedStateFromProps(props, state) {
+    if (props.routes === state.routes && props.descriptors === state.descriptors) {
+      return null;
+    }
+    const gestures = [...props.routes, ...props.state.preloadedRoutes].reduce((acc, curr) => {
+      const descriptor = props.descriptors[curr.key] || props.preloadedDescriptors[curr.key];
       const {
-        state
-      } = _this.props;
-      return state.routes[state.index];
+        animation
+      } = descriptor?.options || {};
+      acc[curr.key] = state.gestures[curr.key] || new Animated.Value(props.openingRouteKeys.includes(curr.key) && animation !== 'none' || props.state.preloadedRoutes.includes(curr) ? getDistanceFromOptions(state.layout, descriptor, props.direction === 'rtl') : 0);
+      return acc;
+    }, {});
+    const modalRouteKeys = getModalRouteKeys([...props.routes, ...props.state.preloadedRoutes], {
+      ...props.descriptors,
+      ...props.preloadedDescriptors
     });
-    _defineProperty(_this, "getPreviousScene", ({
-      route
-    }) => {
-      const {
-        getPreviousRoute
-      } = _this.props;
+    const scenes = [...props.routes, ...props.state.preloadedRoutes].map((route, index, self) => {
+      // For preloaded screens, we don't care about the previous and the next screen
+      const isPreloaded = props.state.preloadedRoutes.includes(route);
+      const previousRoute = isPreloaded ? undefined : self[index - 1];
+      const nextRoute = isPreloaded ? undefined : self[index + 1];
+      const oldScene = state.scenes[index];
+      const currentGesture = gestures[route.key];
+      const previousGesture = previousRoute ? gestures[previousRoute.key] : undefined;
+      const nextGesture = nextRoute ? gestures[nextRoute.key] : undefined;
+      const descriptor = (isPreloaded ? props.preloadedDescriptors : props.descriptors)[route.key] || state.descriptors[route.key] || (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
+      const nextDescriptor = nextRoute && (props.descriptors[nextRoute?.key] || state.descriptors[nextRoute?.key]);
+      const previousDescriptor = previousRoute && (props.descriptors[previousRoute?.key] || state.descriptors[previousRoute?.key]);
+
+      // When a screen is not the last, it should use next screen's transition config
+      // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
+      // For example combining a slide and a modal transition would look wrong otherwise
+      // With this approach, combining different transition styles in the same navigator mostly looks right
+      // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
+      // but the majority of the transitions look alright
+      const optionsForTransitionConfig = index !== self.length - 1 && nextDescriptor && nextDescriptor.options.presentation !== 'transparentModal' ? nextDescriptor.options : descriptor.options;
+
+      // 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);
+
+      // 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';
+      const animation = optionsForTransitionConfig.animation ?? (excludedPlatforms ? 'default' : 'none');
+      const isAnimationEnabled = animation !== 'none';
+      const transitionPreset = animation !== 'default' ? NAMED_TRANSITIONS_PRESETS[animation] : isModal || optionsForTransitionConfig.presentation === 'modal' ? ModalTransition : optionsForTransitionConfig.presentation === 'transparentModal' ? ModalFadeTransition : DefaultTransition;
       const {
-        scenes
-      } = _this.state;
-      const previousRoute = getPreviousRoute({
-        route
-      });
-      if (previousRoute) {
-        const previousScene = scenes.find(scene => scene.descriptor.route.key === previousRoute.key);
-        return previousScene;
+        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?.options.presentation === 'modal' || nextDescriptor?.options.presentation === 'transparentModal' || getIsModalPresentation(cardStyleInterpolator)) && Platform.OS === 'ios' && descriptor.options.header === undefined ? 'float' : 'screen');
+      const isRTL = props.direction === 'rtl';
+      const scene = {
+        route,
+        descriptor: {
+          ...descriptor,
+          options: {
+            ...descriptor.options,
+            animation,
+            cardOverlayEnabled,
+            cardStyleInterpolator,
+            gestureDirection,
+            gestureEnabled,
+            headerStyleInterpolator,
+            transitionSpec,
+            headerMode
+          }
+        },
+        progress: {
+          current: getProgressFromGesture(currentGesture, state.layout, descriptor, isRTL),
+          next: nextGesture && nextDescriptor?.options.presentation !== 'transparentModal' ? getProgressFromGesture(nextGesture, state.layout, nextDescriptor, isRTL) : undefined,
+          previous: previousGesture ? getProgressFromGesture(previousGesture, state.layout, previousDescriptor, isRTL) : undefined
+        },
+        __memo: [state.layout, descriptor, nextDescriptor, previousDescriptor, currentGesture, nextGesture, previousGesture]
+      };
+      if (oldScene && scene.__memo.every((it, i) => {
+        // @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
+        return oldScene.__memo[i] === it;
+      })) {
+        return oldScene;
       }
-      return undefined;
+      return scene;
     });
-    _this.state = {
+    return {
+      routes: props.routes,
+      scenes,
+      gestures,
+      descriptors: props.descriptors,
+      headerHeights: getHeaderHeights(scenes, props.insets, props.isParentHeaderShown, props.isParentModal, state.layout, state.headerHeights)
+    };
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
       routes: [],
       scenes: [],
       gestures: {},
       layout: SafeAreaProviderCompat.initialMetrics.frame,
-      descriptors: _this.props.descriptors,
+      descriptors: this.props.descriptors,
       // 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
@@ -198,289 +216,249 @@ export let CardStack = /*#__PURE__*/function (_React$Component) {
       // common cases here.
       headerHeights: {}
     };
-    return _this;
   }
-  _inherits(CardStack, _React$Component);
-  return _createClass(CardStack, [{
-    key: "render",
-    value: function render() {
-      const {
-        insets,
-        state,
-        routes,
-        openingRouteKeys,
-        closingRouteKeys,
-        onOpenRoute,
-        onCloseRoute,
-        renderHeader,
-        isParentHeaderShown,
-        isParentModal,
-        onTransitionStart,
-        onTransitionEnd,
-        onGestureStart,
-        onGestureEnd,
-        onGestureCancel,
-        detachInactiveScreens = Platform.OS === 'web' || Platform.OS === 'android' || Platform.OS === 'ios'
-      } = this.props;
-      const {
-        scenes,
+  handleLayout = e => {
+    const {
+      height,
+      width
+    } = e.nativeEvent.layout;
+    const layout = {
+      width,
+      height
+    };
+    this.setState((state, props) => {
+      if (height === state.layout.height && width === state.layout.width) {
+        return null;
+      }
+      return {
         layout,
-        gestures,
-        headerHeights
-      } = this.state;
-      const focusedRoute = state.routes[state.index];
-      const focusedHeaderHeight = headerHeights[focusedRoute.key];
-      const isFloatHeaderAbsolute = this.state.scenes.slice(-2).some(scene => {
-        const options = scene.descriptor.options ?? {};
-        const {
-          headerMode,
-          headerTransparent,
-          headerShown = true
-        } = options;
-        if (headerTransparent || headerShown === false || headerMode === 'screen') {
-          return true;
+        headerHeights: getHeaderHeights(state.scenes, props.insets, props.isParentHeaderShown, props.isParentModal, layout, state.headerHeights)
+      };
+    });
+  };
+  handleHeaderLayout = ({
+    route,
+    height
+  }) => {
+    this.setState(({
+      headerHeights
+    }) => {
+      const previousHeight = headerHeights[route.key];
+      if (previousHeight === height) {
+        return null;
+      }
+      return {
+        headerHeights: {
+          ...headerHeights,
+          [route.key]: height
         }
-        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;
-          }
+      };
+    });
+  };
+  getFocusedRoute = () => {
+    const {
+      state
+    } = this.props;
+    return state.routes[state.index];
+  };
+  getPreviousScene = ({
+    route
+  }) => {
+    const {
+      getPreviousRoute
+    } = this.props;
+    const {
+      scenes
+    } = this.state;
+    const previousRoute = getPreviousRoute({
+      route
+    });
+    if (previousRoute) {
+      const previousScene = scenes.find(scene => scene.descriptor.route.key === previousRoute.key);
+      return previousScene;
+    }
+    return undefined;
+  };
+  render() {
+    const {
+      insets,
+      state,
+      routes,
+      openingRouteKeys,
+      closingRouteKeys,
+      onOpenRoute,
+      onCloseRoute,
+      renderHeader,
+      isParentHeaderShown,
+      isParentModal,
+      onTransitionStart,
+      onTransitionEnd,
+      onGestureStart,
+      onGestureEnd,
+      onGestureCancel,
+      detachInactiveScreens = Platform.OS === 'web' || Platform.OS === 'android' || Platform.OS === 'ios'
+    } = this.props;
+    const {
+      scenes,
+      layout,
+      gestures,
+      headerHeights
+    } = this.state;
+    const focusedRoute = state.routes[state.index];
+    const focusedHeaderHeight = headerHeights[focusedRoute.key];
+    const isFloatHeaderAbsolute = this.state.scenes.slice(-2).some(scene => {
+      const options = scene.descriptor.options ?? {};
+      const {
+        headerMode,
+        headerTransparent,
+        headerShown = true
+      } = options;
+      if (headerTransparent || headerShown === false || headerMode === 'screen') {
+        return true;
+      }
+      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 = /*#__PURE__*/_jsx(React.Fragment, {
-        children: 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]]
-        })
-      }, "header");
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.container,
-        children: [isFloatHeaderAbsolute ? null : floatingHeader, /*#__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;
-            }
-
-            // 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 < routes.length - activeScreensLimit - 1 || isPreloaded) {
-              // screen should be inactive because it is too deep in the stack
-              isScreenActive = STATE_INACTIVE;
-            } else {
-              const sceneForActivity = scenes[routes.length - 1];
-              const outputValue = index === routes.length - 1 ? STATE_ON_TOP // the screen is on top after the transition
-              : index >= routes.length - activeScreensLimit ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
-              : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
-              isScreenActive = sceneForActivity ? sceneForActivity.progress.current.interpolate({
-                inputRange: [0, 1 - EPSILON, 1],
-                outputRange: [1, 1, outputValue],
-                extrapolate: 'clamp'
-              }) : STATE_TRANSITIONING_OR_BELOW_TOP;
-            }
-            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;
-            return /*#__PURE__*/_jsx(MaybeScreen, {
-              style: [StyleSheet.absoluteFill],
-              enabled: detachInactiveScreens,
-              active: isScreenActive,
-              freezeOnBlur: freezeOnBlur,
-              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);
-          })
-        }), isFloatHeaderAbsolute ? floatingHeader : null]
-      });
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.routes === state.routes && props.descriptors === state.descriptors) {
-        return null;
-      }
-      const gestures = [...props.routes, ...props.state.preloadedRoutes].reduce((acc, curr) => {
-        const 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) && animation !== 'none' || props.state.preloadedRoutes.includes(curr) ? getDistanceFromOptions(state.layout, descriptor, props.direction === 'rtl') : 0);
-        return acc;
-      }, {});
-      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 = (isPreloaded ? props.preloadedDescriptors : props.descriptors)[route.key] || state.descriptors[route.key] || (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
-        const nextDescriptor = nextRoute && (props.descriptors[nextRoute?.key] || state.descriptors[nextRoute?.key]);
-        const previousDescriptor = previousRoute && (props.descriptors[previousRoute?.key] || state.descriptors[previousRoute?.key]);
-
-        // When a screen is not the last, it should use next screen's transition config
-        // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
-        // For example combining a slide and a modal transition would look wrong otherwise
-        // With this approach, combining different transition styles in the same navigator mostly looks right
-        // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
-        // but the majority of the transitions look alright
-        const optionsForTransitionConfig = index !== self.length - 1 && nextDescriptor && nextDescriptor.options.presentation !== 'transparentModal' ? nextDescriptor.options : descriptor.options;
+    const floatingHeader = /*#__PURE__*/_jsx(React.Fragment, {
+      children: 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]]
+      })
+    }, "header");
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [isFloatHeaderAbsolute ? null : floatingHeader, /*#__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;
+          }
 
-        // 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);
+          // 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 < routes.length - activeScreensLimit - 1 || isPreloaded) {
+            // screen should be inactive because it is too deep in the stack
+            isScreenActive = STATE_INACTIVE;
+          } else {
+            const sceneForActivity = scenes[routes.length - 1];
+            const outputValue = index === routes.length - 1 ? STATE_ON_TOP // the screen is on top after the transition
+            : index >= routes.length - activeScreensLimit ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
+            : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
+            isScreenActive = sceneForActivity ? sceneForActivity.progress.current.interpolate({
+              inputRange: [0, 1 - EPSILON, 1],
+              outputRange: [1, 1, outputValue],
+              extrapolate: 'clamp'
+            }) : STATE_TRANSITIONING_OR_BELOW_TOP;
+          }
+          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;
 
-        // 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';
-        const animation = optionsForTransitionConfig.animation ?? (excludedPlatforms ? 'default' : 'none');
-        const isAnimationEnabled = animation !== 'none';
-        const transitionPreset = animation !== 'default' ? NAMED_TRANSITIONS_PRESETS[animation] : isModal || optionsForTransitionConfig.presentation === 'modal' ? ModalTransition : optionsForTransitionConfig.presentation === 'transparentModal' ? ModalFadeTransition : 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 = descriptor.options.headerMode ?? (!(optionsForTransitionConfig.presentation === 'modal' || optionsForTransitionConfig.presentation === 'transparentModal' || nextDescriptor?.options.presentation === 'modal' || nextDescriptor?.options.presentation === 'transparentModal' || getIsModalPresentation(cardStyleInterpolator)) && Platform.OS === 'ios' && descriptor.options.header === undefined ? 'float' : 'screen');
-        const isRTL = props.direction === 'rtl';
-        const scene = {
-          route,
-          descriptor: {
-            ...descriptor,
-            options: {
-              ...descriptor.options,
-              animation,
-              cardOverlayEnabled,
-              cardStyleInterpolator,
-              gestureDirection,
-              gestureEnabled,
-              headerStyleInterpolator,
-              transitionSpec,
-              headerMode
-            }
-          },
-          progress: {
-            current: getProgressFromGesture(currentGesture, state.layout, descriptor, isRTL),
-            next: nextGesture && nextDescriptor?.options.presentation !== 'transparentModal' ? getProgressFromGesture(nextGesture, state.layout, nextDescriptor, isRTL) : undefined,
-            previous: previousGesture ? getProgressFromGesture(previousGesture, state.layout, previousDescriptor, isRTL) : undefined
-          },
-          __memo: [state.layout, descriptor, nextDescriptor, previousDescriptor, currentGesture, nextGesture, previousGesture]
-        };
-        if (oldScene && scene.__memo.every((it, i) => {
-          // @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
-          return oldScene.__memo[i] === it;
-        })) {
-          return oldScene;
-        }
-        return scene;
-      });
-      return {
-        routes: props.routes,
-        scenes,
-        gestures,
-        descriptors: props.descriptors,
-        headerHeights: getHeaderHeights(scenes, props.insets, props.isParentHeaderShown, props.isParentModal, state.layout, state.headerHeights)
-      };
-    }
-  }]);
-}(React.Component);
+          // 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;
+          return /*#__PURE__*/_jsx(MaybeScreen, {
+            style: [StyleSheet.absoluteFill],
+            enabled: detachInactiveScreens,
+            active: isScreenActive,
+            freezeOnBlur: freezeOnBlur,
+            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);
+        })
+      }), isFloatHeaderAbsolute ? floatingHeader : null]
+    });
+  }
+}
 const styles = StyleSheet.create({
   container: {
     flex: 1