@amazon-devices/react-navigation__stack 8.0.9000000000 → 8.0.9000000002

package/src/views/Stack/CardStack.tsx

@@ -1,844 +0,0 @@
-import {
-  getDefaultHeaderHeight,
-  SafeAreaProviderCompat,
-} from '@amazon-devices/react-navigation__elements';
-import type {
-  LocaleDirection,
-  ParamListBase,
-  Route,
-  StackNavigationState,
-} from '@amazon-devices/react-navigation__native';
-import * as React from 'react';
-import {
-  Animated,
-  type LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
-import type { EdgeInsets } from '@amazon-devices/react-native-safe-area-context';
-
-import {
-  forModalPresentationIOS,
-  forNoAnimation as forNoAnimationCard,
-} from '../../TransitionConfigs/CardStyleInterpolators';
-import {
-  BottomSheetAndroid,
-  DefaultTransition,
-  FadeFromBottomAndroid,
-  FadeFromRightAndroid,
-  ModalFadeTransition,
-  ModalSlideFromBottomIOS,
-  ModalTransition,
-  RevealFromBottomAndroid,
-  ScaleFromCenterAndroid,
-  SlideFromLeftIOS,
-  SlideFromRightIOS,
-} from '../../TransitionConfigs/TransitionPresets';
-import type {
-  Layout,
-  Scene,
-  StackAnimationName,
-  StackCardStyleInterpolator,
-  StackDescriptorMap,
-  StackHeaderMode,
-  StackNavigationOptions,
-  TransitionPreset,
-} from '../../types';
-import { findLastIndex } from '../../utils/findLastIndex';
-import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
-import { getModalRouteKeys } from '../../utils/getModalRoutesKeys';
-import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import { MaybeScreen, MaybeScreenContainer } from '../Screens';
-import { CardContainer } from './CardContainer';
-
-type GestureValues = {
-  [key: string]: Animated.Value;
-};
-
-type Props = {
-  direction: LocaleDirection;
-  insets: EdgeInsets;
-  state: StackNavigationState<ParamListBase>;
-  descriptors: StackDescriptorMap;
-  preloadedDescriptors: StackDescriptorMap;
-  routes: Route<string>[];
-  openingRouteKeys: string[];
-  closingRouteKeys: string[];
-  onOpenRoute: (props: { route: Route<string> }) => void;
-  onCloseRoute: (props: { route: Route<string> }) => void;
-  getPreviousRoute: (props: {
-    route: Route<string>;
-  }) => Route<string> | undefined;
-  renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  isParentHeaderShown: boolean;
-  isParentModal: boolean;
-  onTransitionStart: (
-    props: { route: Route<string> },
-    closing: boolean
-  ) => void;
-  onTransitionEnd: (props: { route: Route<string> }, closing: boolean) => void;
-  onGestureStart: (props: { route: Route<string> }) => void;
-  onGestureEnd: (props: { route: Route<string> }) => void;
-  onGestureCancel: (props: { route: Route<string> }) => void;
-  detachInactiveScreens?: boolean;
-};
-
-type State = {
-  routes: Route<string>[];
-  descriptors: StackDescriptorMap;
-  scenes: Scene[];
-  gestures: GestureValues;
-  layout: Layout;
-  activeStates: (0 | 1 | Animated.AnimatedInterpolation<0 | 1>)[];
-  headerHeights: Record<string, number>;
-};
-
-const NAMED_TRANSITIONS_PRESETS = {
-  default: DefaultTransition,
-  fade: ModalFadeTransition,
-  fade_from_bottom: FadeFromBottomAndroid,
-  fade_from_right: FadeFromRightAndroid,
-  none: DefaultTransition,
-  reveal_from_bottom: RevealFromBottomAndroid,
-  scale_from_center: ScaleFromCenterAndroid,
-  slide_from_left: SlideFromLeftIOS,
-  slide_from_right: SlideFromRightIOS,
-  slide_from_bottom: Platform.select({
-    ios: ModalSlideFromBottomIOS,
-    default: BottomSheetAndroid,
-  }),
-} as const satisfies Record<StackAnimationName, TransitionPreset>;
-
-const EPSILON = 1e-5;
-
-const STATE_INACTIVE = 0;
-const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
-const STATE_ON_TOP = 2;
-
-const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
-
-const getInterpolationIndex = (scenes: Scene[], index: number) => {
-  const { cardStyleInterpolator } = scenes[index].descriptor.options;
-
-  // 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--) {
-    const cardStyleInterpolatorCurrent =
-      scenes[i]?.descriptor.options.cardStyleInterpolator;
-
-    if (cardStyleInterpolatorCurrent !== cardStyleInterpolator) {
-      break;
-    }
-
-    interpolationIndex++;
-  }
-
-  return interpolationIndex;
-};
-
-const getIsModalPresentation = (
-  cardStyleInterpolator: StackCardStyleInterpolator
-) => {
-  return (
-    cardStyleInterpolator === forModalPresentationIOS ||
-    // Handle custom modal presentation interpolators as well
-    cardStyleInterpolator.name === 'forModalPresentationIOS'
-  );
-};
-
-const getIsModal = (
-  scene: Scene,
-  interpolationIndex: number,
-  isParentModal: boolean
-) => {
-  if (isParentModal) {
-    return true;
-  }
-
-  const { cardStyleInterpolator } = scene.descriptor.options;
-  const isModalPresentation = getIsModalPresentation(cardStyleInterpolator);
-  const isModal = isModalPresentation && interpolationIndex !== 0;
-
-  return isModal;
-};
-
-const getHeaderHeights = (
-  scenes: Scene[],
-  insets: EdgeInsets,
-  isParentHeaderShown: boolean,
-  isParentModal: boolean,
-  layout: Layout,
-  previous: Record<string, number>
-) => {
-  return scenes.reduce<Record<string, number>>((acc, curr, index) => {
-    const {
-      headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
-      headerStyle,
-    } = curr.descriptor.options;
-
-    const style = StyleSheet.flatten(headerStyle || {});
-
-    const height =
-      'height' in style && typeof style.height === 'number'
-        ? style.height
-        : previous[curr.route.key];
-
-    const interpolationIndex = getInterpolationIndex(scenes, index);
-    const isModal = getIsModal(curr, interpolationIndex, isParentModal);
-
-    acc[curr.route.key] =
-      typeof height === 'number'
-        ? height
-        : getDefaultHeaderHeight(layout, isModal, headerStatusBarHeight);
-
-    return acc;
-  }, {});
-};
-
-const getDistanceFromOptions = (
-  layout: Layout,
-  options: StackNavigationOptions | undefined,
-  isRTL: boolean
-) => {
-  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: Animated.Value,
-  layout: Layout,
-  options: StackNavigationOptions | undefined,
-  isRTL: boolean
-) => {
-  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),
-    },
-    options,
-    isRTL
-  );
-
-  if (distance > 0) {
-    return gesture.interpolate({
-      inputRange: [0, distance],
-      outputRange: [1, 0],
-    });
-  }
-
-  return gesture.interpolate({
-    inputRange: [distance, 0],
-    outputRange: [0, 1],
-  });
-};
-
-function getDefaultAnimation(animation: StackAnimationName | undefined) {
-  // Disable screen transition animation by default on web, windows and macos to match the native behavior
-  const excludedPlatforms =
-    Platform.OS !== 'web' &&
-    Platform.OS !== 'windows' &&
-    Platform.OS !== 'macos';
-
-  return animation ?? (excludedPlatforms ? 'default' : 'none');
-}
-
-export function getAnimationEnabled(animation: StackAnimationName | undefined) {
-  return getDefaultAnimation(animation) !== 'none';
-}
-
-export class CardStack extends React.Component<Props, State> {
-  static getDerivedStateFromProps(
-    props: Props,
-    state: State
-  ): Partial<State> | null {
-    if (
-      props.routes === state.routes &&
-      props.descriptors === state.descriptors
-    ) {
-      return null;
-    }
-
-    const gestures = [
-      ...props.routes,
-      ...props.state.preloadedRoutes,
-    ].reduce<GestureValues>((acc, curr) => {
-      const descriptor =
-        props.descriptors[curr.key] || props.preloadedDescriptors[curr.key];
-      const { animation } = descriptor?.options || {};
-
-      acc[curr.key] =
-        state.gestures[curr.key] ||
-        new Animated.Value(
-          (props.openingRouteKeys.includes(curr.key) &&
-            getAnimationEnabled(animation)) ||
-          props.state.preloadedRoutes.includes(curr)
-            ? getDistanceFromOptions(
-                state.layout,
-                descriptor?.options,
-                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 nextOptions =
-          nextRoute &&
-          (
-            props.descriptors[nextRoute?.key] ||
-            state.descriptors[nextRoute?.key]
-          )?.options;
-
-        const previousOptions =
-          previousRoute &&
-          (
-            props.descriptors[previousRoute?.key] ||
-            state.descriptors[previousRoute?.key]
-          )?.options;
-
-        // When a screen is not the last, it should use next screen's transition config
-        // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
-        // For example combining a slide and a modal transition would look wrong otherwise
-        // With this approach, combining different transition styles in the same navigator mostly looks right
-        // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
-        // but the majority of the transitions look alright
-        const optionsForTransitionConfig =
-          index !== self.length - 1 &&
-          nextOptions &&
-          nextOptions?.presentation !== 'transparentModal'
-            ? nextOptions
-            : descriptor.options;
-
-        // Assume modal if there are already modal screens in the stack
-        // or current screen is a modal when no presentation is specified
-        const isModal = modalRouteKeys.includes(route.key);
-
-        const animation = getDefaultAnimation(
-          optionsForTransitionConfig.animation
-        );
-
-        const isAnimationEnabled = getAnimationEnabled(animation);
-
-        const transitionPreset =
-          animation !== 'default'
-            ? NAMED_TRANSITIONS_PRESETS[animation]
-            : optionsForTransitionConfig.presentation === 'transparentModal'
-              ? ModalFadeTransition
-              : optionsForTransitionConfig.presentation === 'modal' || isModal
-                ? ModalTransition
-                : DefaultTransition;
-
-        const {
-          gestureEnabled = Platform.OS === 'ios' && isAnimationEnabled,
-          gestureDirection = transitionPreset.gestureDirection,
-          transitionSpec = transitionPreset.transitionSpec,
-          cardStyleInterpolator = isAnimationEnabled
-            ? transitionPreset.cardStyleInterpolator
-            : forNoAnimationCard,
-          headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
-          cardOverlayEnabled = (Platform.OS !== 'ios' &&
-            optionsForTransitionConfig.presentation !== 'transparentModal') ||
-            getIsModalPresentation(cardStyleInterpolator),
-        } = optionsForTransitionConfig;
-
-        const headerMode: StackHeaderMode =
-          descriptor.options.headerMode ??
-          (!(
-            optionsForTransitionConfig.presentation === 'modal' ||
-            optionsForTransitionConfig.presentation === 'transparentModal' ||
-            nextOptions?.presentation === 'modal' ||
-            nextOptions?.presentation === 'transparentModal' ||
-            getIsModalPresentation(cardStyleInterpolator)
-          ) &&
-          Platform.OS === 'ios' &&
-          descriptor.options.header === undefined
-            ? 'float'
-            : 'screen');
-
-        const isRTL = props.direction === 'rtl';
-
-        const scene = {
-          route,
-          descriptor: {
-            ...descriptor,
-            options: {
-              ...descriptor.options,
-              animation,
-              cardOverlayEnabled,
-              cardStyleInterpolator,
-              gestureDirection,
-              gestureEnabled,
-              headerStyleInterpolator,
-              transitionSpec,
-              headerMode,
-            },
-          },
-          progress: {
-            current: getProgressFromGesture(
-              currentGesture,
-              state.layout,
-              descriptor.options,
-              isRTL
-            ),
-            next:
-              nextGesture && nextOptions?.presentation !== 'transparentModal'
-                ? getProgressFromGesture(
-                    nextGesture,
-                    state.layout,
-                    nextOptions,
-                    isRTL
-                  )
-                : undefined,
-            previous: previousGesture
-              ? getProgressFromGesture(
-                  previousGesture,
-                  state.layout,
-                  previousOptions,
-                  isRTL
-                )
-              : undefined,
-          },
-          __memo: [
-            state.layout,
-            descriptor,
-            nextOptions,
-            previousOptions,
-            currentGesture,
-            nextGesture,
-            previousGesture,
-          ],
-        };
-
-        if (
-          oldScene &&
-          scene.__memo.every((it, i) => {
-            // @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
-            return oldScene.__memo[i] === it;
-          })
-        ) {
-          return oldScene;
-        }
-
-        return scene;
-      }
-    );
-
-    let activeStates = state.activeStates;
-
-    if (props.routes.length !== state.routes.length) {
-      let activeScreensLimit = 1;
-
-      for (let i = props.routes.length - 1; i >= 0; i--) {
-        const { options } = scenes[i].descriptor;
-
-        const {
-          // By default, we don't want to detach the previous screen of the active one for modals
-          detachPreviousScreen = options.presentation === 'transparentModal'
-            ? false
-            : getIsModalPresentation(options.cardStyleInterpolator)
-              ? i !==
-                findLastIndex(scenes, (scene) => {
-                  const { cardStyleInterpolator } = scene.descriptor.options;
-
-                  return (
-                    cardStyleInterpolator === forModalPresentationIOS ||
-                    cardStyleInterpolator?.name === 'forModalPresentationIOS'
-                  );
-                })
-              : true,
-        } = options;
-
-        if (detachPreviousScreen === false) {
-          activeScreensLimit++;
-        } else {
-          // Check at least last 2 screens before stopping
-          // This will make sure that screen isn't detached when another screen is animating on top of the transparent one
-          // e.g. opaque -> transparent -> opaque
-          if (i <= props.routes.length - 2) {
-            break;
-          }
-        }
-      }
-
-      activeStates = props.routes.map((_, index, self) => {
-        // The activity state represents state of the screen:
-        // 0 - inactive, the screen is detached
-        // 1 - transitioning or below the top screen, the screen is mounted but interaction is disabled
-        // 2 - on top of the stack, the screen is mounted and interaction is enabled
-        let activityState:
-          | Animated.AnimatedInterpolation<0 | 1 | 2>
-          | 0
-          | 1
-          | 2;
-
-        const lastActiveState = state.activeStates[index];
-        const activeAfterTransition = index >= self.length - activeScreensLimit;
-
-        if (lastActiveState === STATE_INACTIVE && !activeAfterTransition) {
-          // screen was inactive before and it will still be inactive after the transition
-          activityState = STATE_INACTIVE;
-        } else {
-          const sceneForActivity = scenes[self.length - 1];
-          const outputValue =
-            index === self.length - 1
-              ? STATE_ON_TOP // the screen is on top after the transition
-              : activeAfterTransition
-                ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
-                : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
-
-          activityState = sceneForActivity
-            ? sceneForActivity.progress.current.interpolate({
-                inputRange: [0, 1 - EPSILON, 1],
-                outputRange: [1, 1, outputValue],
-                extrapolate: 'clamp',
-              })
-            : STATE_TRANSITIONING_OR_BELOW_TOP;
-        }
-
-        return activityState;
-      });
-    }
-
-    return {
-      routes: props.routes,
-      scenes,
-      gestures,
-      descriptors: props.descriptors,
-      activeStates,
-      headerHeights: getHeaderHeights(
-        scenes,
-        props.insets,
-        props.isParentHeaderShown,
-        props.isParentModal,
-        state.layout,
-        state.headerHeights
-      ),
-    };
-  }
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      routes: [],
-      scenes: [],
-      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
-      // on mount what the header height is so we have just used the most
-      // common cases here.
-      headerHeights: {},
-    };
-  }
-
-  private handleLayout = (e: LayoutChangeEvent) => {
-    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
-        ),
-      };
-    });
-  };
-
-  private handleHeaderLayout = ({
-    route,
-    height,
-  }: {
-    route: Route<string>;
-    height: number;
-  }) => {
-    this.setState(({ headerHeights }) => {
-      const previousHeight = headerHeights[route.key];
-
-      if (previousHeight === height) {
-        return null;
-      }
-
-      return {
-        headerHeights: {
-          ...headerHeights,
-          [route.key]: height,
-        },
-      };
-    });
-  };
-
-  private getFocusedRoute = () => {
-    const { state } = this.props;
-
-    return state.routes[state.index];
-  };
-
-  private getPreviousScene = ({ route }: { route: Route<string> }) => {
-    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' ||
-        // @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];
-    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;
-    });
-
-    return (
-      <View style={styles.container}>
-        {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,
-            ],
-          ],
-        })}
-        <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
-            ) {
-              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 (
-              <MaybeScreen
-                key={route.key}
-                style={[StyleSheet.absoluteFill]}
-                enabled={detachInactiveScreens}
-                active={activityState}
-                freezeOnBlur={freezeOnBlur}
-                shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
-                homeIndicatorHidden={autoHideHomeIndicator}
-                pointerEvents="box-none"
-              >
-                <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}
-                />
-              </MaybeScreen>
-            );
-          })}
-        </MaybeScreenContainer>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    start: 0,
-    end: 0,
-  },
-  floating: {
-    zIndex: 1,
-  },
-});