@react-navigation/stack 7.0.0-rc.2 → 7.0.0-rc.21

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

@@ -1,13 +1,29 @@
+"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 { Background, getDefaultHeaderHeight, SafeAreaProviderCompat } from '@react-navigation/elements';
 import * as React from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
-import { forModalPresentationIOS, forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
-import { BottomSheetAndroid, DefaultTransition, FadeFromBottomAndroid, FadeFromRightAndroid, ModalFadeTransition, ModalSlideFromBottomIOS, ModalTransition, RevealFromBottomAndroid, ScaleFromCenterAndroid, SlideFromLeftIOS, SlideFromRightIOS } from '../../TransitionConfigs/TransitionPresets';
-import { findLastIndex } from '../../utils/findLastIndex';
-import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
-import { getModalRouteKeys } from '../../utils/getModalRoutesKeys';
-import { MaybeScreen, MaybeScreenContainer } from '../Screens';
-import { CardContainer } from './CardContainer';
+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,
@@ -102,110 +118,79 @@ const getProgressFromGesture = (gesture, layout, descriptor, isRTL) => {
     outputRange: [0, 1]
   });
 };
-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];
+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 {
-        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
+        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)
+        };
+      });
     });
-    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 {
-        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
+    _defineProperty(_this, "handleHeaderLayout", ({
+      route,
+      height
+    }) => {
+      _this.setState(({
+        headerHeights
+      }) => {
+        const previousHeight = headerHeights[route.key];
+        if (previousHeight === height) {
+          return null;
+        }
+        return {
+          headerHeights: {
+            ...headerHeights,
+            [route.key]: height
           }
-        },
-        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;
+        };
+      });
+    });
+    _defineProperty(_this, "getFocusedRoute", () => {
+      const {
+        state
+      } = _this.props;
+      return state.routes[state.index];
+    });
+    _defineProperty(_this, "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 scene;
+      return undefined;
     });
-    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 = {
+    _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
@@ -213,243 +198,286 @@ export class CardStack extends React.Component {
       // common cases here.
       headerHeights: {}
     };
+    return _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)
-      };
-    });
-  };
-  handleHeaderLayout = ({
-    route,
-    height
-  }) => {
-    this.setState(({
-      headerHeights
-    }) => {
-      const previousHeight = headerHeights[route.key];
-      if (previousHeight === height) {
-        return null;
-      }
-      return {
-        headerHeights: {
-          ...headerHeights,
-          [route.key]: height
-        }
-      };
-    });
-  };
-  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,
-      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--) {
+  _inherits(CardStack, _React$Component);
+  return _createClass(CardStack, [{
+    key: "render",
+    value: function render() {
       const {
-        options
-      } = scenes[i].descriptor;
+        insets,
+        state,
+        routes,
+        closingRouteKeys,
+        onOpenRoute,
+        onCloseRoute,
+        renderHeader,
+        isParentHeaderShown,
+        isParentModal,
+        onTransitionStart,
+        onTransitionEnd,
+        onGestureStart,
+        onGestureEnd,
+        onGestureCancel,
+        detachInactiveScreens = Platform.OS === 'web' || Platform.OS === 'android' || Platform.OS === 'ios'
+      } = this.props;
       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;
+        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(Background, {
+        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,
+                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 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,
-      style: styles.container,
-      onLayout: this.handleLayout
-    }, [...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) {
+  }], [{
+    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]);
 
-      // 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;
+        // 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;
 
-      // 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__*/React.createElement(MaybeScreen, {
-        key: route.key,
-        style: [StyleSheet.absoluteFill],
-        enabled: detachInactiveScreens,
-        active: isScreenActive,
-        freezeOnBlur: freezeOnBlur,
-        homeIndicatorHidden: autoHideHomeIndicator,
-        pointerEvents: "box-none"
-      }, /*#__PURE__*/React.createElement(CardContainer, {
-        index: index,
-        interpolationIndex: interpolationIndex,
-        modal: isModal,
-        active: index === routes.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,
-        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
-      }));
-    })), isFloatHeaderAbsolute ? floatingHeader : 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);
+
+        // 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);
 const styles = StyleSheet.create({
   container: {
     flex: 1