@react-navigation/stack 7.0.0-alpha.7 → 7.0.0-alpha.9

package/src/views/Stack/CardStack.tsx

@@ -52,6 +52,8 @@ type Props = {
   insets: EdgeInsets;
   state: StackNavigationState<ParamListBase>;
   descriptors: StackDescriptorMap;
+  // eslint-disable-next-line react/no-unused-prop-types
+  preloadedDescriptors: StackDescriptorMap;
   routes: Route<string>[];
   // eslint-disable-next-line react/no-unused-prop-types
   openingRouteKeys: string[];
@@ -62,7 +64,6 @@ type Props = {
     route: Route<string>;
   }) => Route<string> | undefined;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  renderScene: (props: { route: Route<string> }) => React.ReactNode;
   isParentHeaderShown: boolean;
   isParentModal: boolean;
   onTransitionStart: (
@@ -174,7 +175,7 @@ const getHeaderHeights = (
 
 const getDistanceFromOptions = (
   layout: Layout,
-  descriptor: StackDescriptor,
+  descriptor: StackDescriptor | undefined,
   isRTL: boolean
 ) => {
   const {
@@ -190,7 +191,7 @@ const getDistanceFromOptions = (
 const getProgressFromGesture = (
   gesture: Animated.Value,
   layout: Layout,
-  descriptor: StackDescriptor,
+  descriptor: StackDescriptor | undefined,
   isRTL: boolean
 ) => {
   const distance = getDistanceFromOptions(
@@ -229,15 +230,20 @@ export class CardStack extends React.Component<Props, State> {
       return null;
     }
 
-    const gestures = props.routes.reduce<GestureValues>((acc, curr) => {
-      const descriptor = props.descriptors[curr.key];
+    const gestures = [
+      ...props.routes,
+      ...props.state.preloadedRoutes,
+    ].reduce<GestureValues>((acc, curr) => {
+      const descriptor =
+        props.descriptors[curr.key] || props.preloadedDescriptors[curr.key];
       const { animationEnabled } = descriptor?.options || {};
 
       acc[curr.key] =
         state.gestures[curr.key] ||
         new Animated.Value(
-          props.openingRouteKeys.includes(curr.key) &&
-          animationEnabled !== false
+          (props.openingRouteKeys.includes(curr.key) &&
+            animationEnabled !== false) ||
+          props.state.preloadedRoutes.includes(curr)
             ? getDistanceFromOptions(
                 state.layout,
                 descriptor,
@@ -249,147 +255,156 @@ export class CardStack extends React.Component<Props, State> {
       return acc;
     }, {});
 
-    const scenes = props.routes.map((route, index, self) => {
-      const previousRoute = self[index - 1];
-      const nextRoute = self[index + 1];
-
-      const oldScene = state.scenes[index];
-
-      const currentGesture = gestures[route.key];
-      const previousGesture = previousRoute
-        ? gestures[previousRoute.key]
-        : undefined;
-      const nextGesture = nextRoute ? gestures[nextRoute.key] : undefined;
-
-      const descriptor =
-        props.descriptors[route.key] ||
-        state.descriptors[route.key] ||
-        (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
-
-      const nextDescriptor =
-        props.descriptors[nextRoute?.key] || state.descriptors[nextRoute?.key];
-
-      const previousDescriptor =
-        props.descriptors[previousRoute?.key] ||
-        state.descriptors[previousRoute?.key];
-
-      // When a screen is not the last, it should use next screen's transition config
-      // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
-      // For example combining a slide and a modal transition would look wrong otherwise
-      // With this approach, combining different transition styles in the same navigator mostly looks right
-      // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
-      // but majority of the transitions look alright
-      const optionsForTransitionConfig =
-        index !== self.length - 1 &&
-        nextDescriptor &&
-        nextDescriptor.options.presentation !== 'transparentModal'
-          ? nextDescriptor.options
-          : descriptor.options;
-
-      const defaultTransitionPreset =
-        optionsForTransitionConfig.presentation === 'modal'
-          ? ModalTransition
-          : optionsForTransitionConfig.presentation === 'transparentModal'
-          ? ModalFadeTransition
-          : DefaultTransition;
-
-      const {
-        animationEnabled = Platform.OS !== 'web' &&
-          Platform.OS !== 'windows' &&
-          Platform.OS !== 'macos',
-        gestureEnabled = Platform.OS === 'ios' && animationEnabled,
-        gestureDirection = defaultTransitionPreset.gestureDirection,
-        transitionSpec = defaultTransitionPreset.transitionSpec,
-        cardStyleInterpolator = animationEnabled === false
-          ? forNoAnimationCard
-          : defaultTransitionPreset.cardStyleInterpolator,
-        headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-        cardOverlayEnabled = (Platform.OS !== 'ios' &&
-          optionsForTransitionConfig.presentation !== 'transparentModal') ||
-          getIsModalPresentation(cardStyleInterpolator),
-      } = optionsForTransitionConfig;
-
-      const headerMode: StackHeaderMode =
-        descriptor.options.headerMode ??
-        (!(
-          optionsForTransitionConfig.presentation === 'modal' ||
-          optionsForTransitionConfig.presentation === 'transparentModal' ||
-          nextDescriptor?.options.presentation === 'modal' ||
-          nextDescriptor?.options.presentation === 'transparentModal' ||
-          getIsModalPresentation(cardStyleInterpolator)
-        ) &&
-        Platform.OS === 'ios' &&
-        descriptor.options.header === undefined
-          ? 'float'
-          : 'screen');
-
-      const isRTL = props.direction === 'rtl';
-
-      const scene = {
-        route,
-        descriptor: {
-          ...descriptor,
-          options: {
-            ...descriptor.options,
-            animationEnabled,
-            cardOverlayEnabled,
-            cardStyleInterpolator,
-            gestureDirection,
-            gestureEnabled,
-            headerStyleInterpolator,
-            transitionSpec,
-            headerMode,
+    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 defaultTransitionPreset =
+          optionsForTransitionConfig.presentation === 'modal'
+            ? ModalTransition
+            : optionsForTransitionConfig.presentation === 'transparentModal'
+              ? ModalFadeTransition
+              : DefaultTransition;
+
+        const {
+          animationEnabled = Platform.OS !== 'web' &&
+            Platform.OS !== 'windows' &&
+            Platform.OS !== 'macos',
+          gestureEnabled = Platform.OS === 'ios' && animationEnabled,
+          gestureDirection = defaultTransitionPreset.gestureDirection,
+          transitionSpec = defaultTransitionPreset.transitionSpec,
+          cardStyleInterpolator = animationEnabled === false
+            ? forNoAnimationCard
+            : defaultTransitionPreset.cardStyleInterpolator,
+          headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+          cardOverlayEnabled = (Platform.OS !== 'ios' &&
+            optionsForTransitionConfig.presentation !== 'transparentModal') ||
+            getIsModalPresentation(cardStyleInterpolator),
+        } = optionsForTransitionConfig;
+
+        const headerMode: StackHeaderMode =
+          descriptor.options.headerMode ??
+          (!(
+            optionsForTransitionConfig.presentation === 'modal' ||
+            optionsForTransitionConfig.presentation === 'transparentModal' ||
+            nextDescriptor?.options.presentation === 'modal' ||
+            nextDescriptor?.options.presentation === 'transparentModal' ||
+            getIsModalPresentation(cardStyleInterpolator)
+          ) &&
+          Platform.OS === 'ios' &&
+          descriptor.options.header === undefined
+            ? 'float'
+            : 'screen');
+
+        const isRTL = props.direction === 'rtl';
+
+        const scene = {
+          route,
+          descriptor: {
+            ...descriptor,
+            options: {
+              ...descriptor.options,
+              animationEnabled,
+              cardOverlayEnabled,
+              cardStyleInterpolator,
+              gestureDirection,
+              gestureEnabled,
+              headerStyleInterpolator,
+              transitionSpec,
+              headerMode,
+            },
           },
-        },
-        progress: {
-          current: getProgressFromGesture(
-            currentGesture,
-            state.layout,
-            descriptor,
-            isRTL
-          ),
-          next:
-            nextGesture &&
-            nextDescriptor?.options.presentation !== 'transparentModal'
+          progress: {
+            current: getProgressFromGesture(
+              currentGesture,
+              state.layout,
+              descriptor,
+              isRTL
+            ),
+            next:
+              nextGesture &&
+              nextDescriptor?.options.presentation !== 'transparentModal'
+                ? getProgressFromGesture(
+                    nextGesture,
+                    state.layout,
+                    nextDescriptor,
+                    isRTL
+                  )
+                : undefined,
+            previous: previousGesture
               ? getProgressFromGesture(
-                  nextGesture,
+                  previousGesture,
                   state.layout,
-                  nextDescriptor,
+                  previousDescriptor,
                   isRTL
                 )
               : undefined,
-          previous: previousGesture
-            ? getProgressFromGesture(
-                previousGesture,
-                state.layout,
-                previousDescriptor,
-                isRTL
-              )
-            : undefined,
-        },
-        __memo: [
-          state.layout,
-          descriptor,
-          nextDescriptor,
-          previousDescriptor,
-          currentGesture,
-          nextGesture,
-          previousGesture,
-        ],
-      };
+          },
+          __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;
+        }
 
-      if (
-        oldScene &&
-        scene.__memo.every((it, i) => {
-          // @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
-          return oldScene.__memo[i] === it;
-        })
-      ) {
-        return oldScene;
+        return scene;
       }
-
-      return scene;
-    });
+    );
 
     return {
       routes: props.routes,
@@ -504,7 +519,6 @@ export class CardStack extends React.Component<Props, State> {
       onOpenRoute,
       onCloseRoute,
       renderHeader,
-      renderScene,
       isParentHeaderShown,
       isParentModal,
       onTransitionStart,
@@ -546,16 +560,16 @@ export class CardStack extends React.Component<Props, State> {
         detachPreviousScreen = options.presentation === 'transparentModal'
           ? false
           : getIsModalPresentation(options.cardStyleInterpolator)
-          ? i !==
-            findLastIndex(scenes, (scene) => {
-              const { cardStyleInterpolator } = scene.descriptor.options;
-
-              return (
-                cardStyleInterpolator === forModalPresentationIOS ||
-                cardStyleInterpolator?.name === 'forModalPresentationIOS'
-              );
-            })
-          : true,
+            ? i !==
+              findLastIndex(scenes, (scene) => {
+                const { cardStyleInterpolator } = scene.descriptor.options;
+
+                return (
+                  cardStyleInterpolator === forModalPresentationIOS ||
+                  cardStyleInterpolator?.name === 'forModalPresentationIOS'
+                );
+              })
+            : true,
       } = options;
 
       if (detachPreviousScreen === false) {
@@ -599,10 +613,23 @@ export class CardStack extends React.Component<Props, State> {
           style={styles.container}
           onLayout={this.handleLayout}
         >
-          {routes.map((route, index, self) => {
+          {[...routes, ...state.preloadedRoutes].map((route, index) => {
             const focused = focusedRoute.key === route.key;
             const gesture = gestures[route.key];
             const scene = scenes[index];
+            // 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
@@ -614,17 +641,17 @@ export class CardStack extends React.Component<Props, State> {
               | 1
               | 2 = 1;
 
-            if (index < self.length - activeScreensLimit - 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[self.length - 1];
+              const sceneForActivity = scenes[routes.length - 1];
               const outputValue =
-                index === self.length - 1
+                index === routes.length - 1
                   ? STATE_ON_TOP // the screen is on top after the transition
-                  : index >= self.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
+                  : 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],
@@ -638,6 +665,7 @@ export class CardStack extends React.Component<Props, State> {
               headerShown = true,
               headerTransparent,
               freezeOnBlur,
+              autoHideHomeIndicator,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -667,17 +695,18 @@ export class CardStack extends React.Component<Props, State> {
             return (
               <MaybeScreen
                 key={route.key}
-                style={StyleSheet.absoluteFill}
+                style={[StyleSheet.absoluteFill]}
                 enabled={detachInactiveScreens}
                 active={isScreenActive}
                 freezeOnBlur={freezeOnBlur}
+                homeIndicatorHidden={autoHideHomeIndicator}
                 pointerEvents="box-none"
               >
                 <CardContainer
                   index={index}
                   interpolationIndex={interpolationIndex}
                   modal={isModal}
-                  active={index === self.length - 1}
+                  active={index === routes.length - 1}
                   focused={focused}
                   closing={closingRouteKeys.includes(route.key)}
                   layout={layout}
@@ -699,13 +728,13 @@ export class CardStack extends React.Component<Props, State> {
                     isFloatHeaderAbsolute && !headerTransparent
                   }
                   renderHeader={renderHeader}
-                  renderScene={renderScene}
                   onOpenRoute={onOpenRoute}
                   onCloseRoute={onCloseRoute}
                   onTransitionStart={onTransitionStart}
                   onTransitionEnd={onTransitionEnd}
                   isNextScreenTransparent={isNextScreenTransparent}
                   detachCurrentScreen={detachCurrentScreen}
+                  preloaded={isPreloaded}
                 />
               </MaybeScreen>
             );

package/src/views/Stack/StackView.tsx

@@ -7,6 +7,7 @@ import {
   type LocaleDirection,
   type ParamListBase,
   type Route,
+  type RouteProp,
   StackActions,
   type StackNavigationState,
 } from '@react-navigation/native';
@@ -15,6 +16,7 @@ import { StyleSheet, View } from 'react-native';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type {
+  StackDescriptor,
   StackDescriptorMap,
   StackNavigationConfig,
   StackNavigationHelpers,
@@ -32,6 +34,10 @@ type Props = StackNavigationConfig & {
   state: StackNavigationState<ParamListBase>;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
+  describe: (
+    route: RouteProp<ParamListBase>,
+    placeholder: boolean
+  ) => StackDescriptor;
 };
 
 type State = {
@@ -299,17 +305,6 @@ export class StackView extends React.Component<Props, State> {
     return routes[index - 1];
   };
 
-  private renderScene = ({ route }: { route: Route<string> }) => {
-    const descriptor =
-      this.state.descriptors[route.key] || this.props.descriptors[route.key];
-
-    if (!descriptor) {
-      return null;
-    }
-
-    return descriptor.render();
-  };
-
   private renderHeader = (props: HeaderContainerProps) => {
     return <HeaderContainer {...props} />;
   };
@@ -434,6 +429,12 @@ export class StackView extends React.Component<Props, State> {
     const { routes, descriptors, openingRouteKeys, closingRouteKeys } =
       this.state;
 
+    const preloadedDescriptors =
+      state.preloadedRoutes.reduce<StackDescriptorMap>((acc, route) => {
+        acc[route.key] = acc[route.key] || this.props.describe(route, true);
+        return acc;
+      }, {});
+
     return (
       <GestureHandlerWrapper style={styles.container}>
         <SafeAreaProviderCompat>
@@ -456,12 +457,12 @@ export class StackView extends React.Component<Props, State> {
                         onTransitionStart={this.handleTransitionStart}
                         onTransitionEnd={this.handleTransitionEnd}
                         renderHeader={this.renderHeader}
-                        renderScene={this.renderScene}
                         state={state}
                         descriptors={descriptors}
                         onGestureStart={this.handleGestureStart}
                         onGestureEnd={this.handleGestureEnd}
                         onGestureCancel={this.handleGestureCancel}
+                        preloadedDescriptors={preloadedDescriptors}
                         {...rest}
                       />
                     )}