@react-navigation/stack 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/views/Stack/CardContainer.tsx

@@ -57,7 +57,7 @@ type Props = {
   }) => void;
   isParentHeaderShown: boolean;
   isNextScreenTransparent: boolean;
-  detachCurrentScreen: boolean;
+  children: React.ReactNode;
 };
 
 const EPSILON = 0.1;
@@ -78,7 +78,6 @@ function CardContainerInner({
   onHeaderHeightChange,
   isParentHeaderShown,
   isNextScreenTransparent,
-  detachCurrentScreen,
   layout,
   onCloseRoute,
   onOpenRoute,
@@ -94,23 +93,19 @@ function CardContainerInner({
   safeAreaInsetRight,
   safeAreaInsetTop,
   scene,
+  children,
 }: Props) {
   const wrapperRef = React.useRef<CardA11yWrapperRef>(null);
 
   const { direction } = useLocale();
 
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const parentHeaderHeight = React.use(HeaderHeightContext);
+
+  const { options } = scene.descriptor;
+  const enabled = focused && options.keyboardHandlingEnabled !== false;
 
   const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
-    useKeyboardManager(
-      React.useCallback(() => {
-        const { options, navigation } = scene.descriptor;
-
-        return (
-          navigation.isFocused() && options.keyboardHandlingEnabled !== false
-        );
-      }, [scene.descriptor])
-    );
+    useKeyboardManager({ enabled, focused });
 
   const handleOpen = () => {
     const { route } = scene.descriptor;
@@ -157,13 +152,7 @@ function CardContainerInner({
 
     const { route } = scene.descriptor;
 
-    if (!gesture) {
-      onPageChangeConfirm?.(true);
-    } else if (active && closing) {
-      onPageChangeConfirm?.(false);
-    } else {
-      onPageChangeCancel?.();
-    }
+    onPageChangeConfirm?.({ gesture, active, closing });
 
     onTransitionStart?.({ route }, closing);
   };
@@ -242,7 +231,6 @@ function CardContainerInner({
       active={active}
       animated={animated}
       isNextScreenTransparent={isNextScreenTransparent}
-      detachCurrentScreen={detachCurrentScreen}
     >
       <Card
         animated={animated}
@@ -311,7 +299,7 @@ function CardContainerInner({
                         : (parentHeaderHeight ?? 0)
                     }
                   >
-                    {scene.descriptor.render()}
+                    {children}
                   </HeaderHeightContext.Provider>
                 </HeaderShownContext.Provider>
               </HeaderBackContext.Provider>

package/src/views/Stack/CardStack.tsx

@@ -1,5 +1,8 @@
 import { getDefaultHeaderHeight } from '@react-navigation/elements';
-import { SafeAreaProviderCompat } from '@react-navigation/elements/internal';
+import {
+  ActivityView,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements/internal';
 import type {
   LocaleDirection,
   ParamListBase,
@@ -15,7 +18,6 @@ import {
   View,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
-import { Screen, ScreenContainer } from 'react-native-screens';
 
 import {
   forModalPresentationIOS,
@@ -44,7 +46,6 @@ import type {
   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';
@@ -62,6 +63,7 @@ type Props = {
   routes: Route<string>[];
   openingRouteKeys: string[];
   closingRouteKeys: string[];
+  replacingRouteKeys: string[];
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
   getPreviousRoute: (props: {
@@ -87,7 +89,6 @@ type State = {
   scenes: Scene[];
   gestures: GestureValues;
   layout: Layout;
-  activeStates: (0 | 1 | Animated.AnimatedInterpolation<0 | 1>)[];
   headerHeights: Record<string, number>;
 };
 
@@ -107,12 +108,6 @@ const NAMED_TRANSITIONS_PRESETS = {
   }),
 } 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) => {
@@ -465,88 +460,11 @@ export class CardStack extends React.Component<Props, State> {
       }
     );
 
-    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,
@@ -567,7 +485,6 @@ export class CardStack extends React.Component<Props, State> {
       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
@@ -654,23 +571,20 @@ export class CardStack extends React.Component<Props, State> {
       routes,
       openingRouteKeys,
       closingRouteKeys,
+      replacingRouteKeys,
       onOpenRoute,
       onCloseRoute,
+      onGestureStart,
+      onGestureEnd,
+      onGestureCancel,
       renderHeader,
       isParentHeaderShown,
       isParentModal,
       onTransitionStart,
       onTransitionEnd,
-      onGestureStart,
-      onGestureEnd,
-      onGestureCancel,
-      detachInactiveScreens = Platform.OS === 'web' ||
-        Platform.OS === 'android' ||
-        Platform.OS === 'ios',
     } = this.props;
 
-    const { scenes, layout, gestures, activeStates, headerHeights } =
-      this.state;
+    const { scenes, layout, gestures, headerHeights } = this.state;
 
     const focusedRoute = state.routes[state.index];
 
@@ -712,12 +626,8 @@ export class CardStack extends React.Component<Props, State> {
             ],
           ],
         })}
-        <ScreenContainer
-          enabled={detachInactiveScreens}
-          style={styles.container}
-          onLayout={this.handleLayout}
-        >
-          {[...routes, ...state.preloadedRoutes].map((route, index) => {
+        <View style={styles.container} onLayout={this.handleLayout}>
+          {[...routes, ...state.preloadedRoutes].map((route, index, self) => {
             const focused = focusedRoute.key === route.key;
             const gesture = gestures[route.key];
             const scene = scenes[index];
@@ -736,10 +646,9 @@ export class CardStack extends React.Component<Props, State> {
             }
 
             const {
+              inactiveBehavior = 'pause',
               headerShown = true,
               headerTransparent,
-              freezeOnBlur,
-              autoHideHomeIndicator,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -762,63 +671,101 @@ export class CardStack extends React.Component<Props, State> {
               scenes[index + 1]?.descriptor.options.presentation ===
               'transparentModal';
 
-            const detachCurrentScreen =
-              scenes[index + 1]?.descriptor.options.detachPreviousScreen !==
-              false;
-
-            const activityState = isPreloaded
-              ? STATE_INACTIVE
-              : activeStates[index];
+            const isRemoving =
+              replacingRouteKeys.includes(route.key) ||
+              closingRouteKeys.includes(route.key);
+
+            const isFocusing =
+              openingRouteKeys.includes(route.key) ||
+              [...closingRouteKeys, ...replacingRouteKeys].includes(
+                self[index + 1]?.key
+              );
+
+            const isBeforeLast = index === routes.length - 2;
+
+            // Keep animating, preloaded & last two screens visible for smoother transitions
+            const isVisible =
+              focused ||
+              isFocusing ||
+              isRemoving ||
+              isPreloaded ||
+              isNextScreenTransparent ||
+              index >= routes.length - 2;
+
+            const activityMode = // Render focused and animating screens normally
+              focused || isFocusing
+                ? 'normal'
+                : inactiveBehavior === 'none' ||
+                    // Unpause preloaded screens so updates are visible
+                    // This lets preloaded screens initialize
+                    isPreloaded ||
+                    // Keep the screen before transparent screen active
+                    // This lets the screen under the transparent screen update and animate
+                    isNextScreenTransparent ||
+                    // Keep the screen before last screen active
+                    // Otherwise it breaks animation when going back
+                    isBeforeLast
+                  ? 'inert'
+                  : inactiveBehavior === 'unmount' &&
+                      // Don't unmount screens that needs to stay visible
+                      !isVisible &&
+                      // Don't unmount screens with nested navigators
+                      // So we don't lose their state
+                      !('state' in route && route.state)
+                    ? 'unmounted'
+                    : 'paused';
+
+            if (activityMode === 'unmounted') {
+              return null;
+            }
 
             return (
-              <Screen
+              <CardContainer
                 key={route.key}
-                style={[StyleSheet.absoluteFill, { pointerEvents: 'box-none' }]}
-                enabled={detachInactiveScreens}
-                activityState={activityState}
-                freezeOnBlur={freezeOnBlur}
-                shouldFreeze={activityState === STATE_INACTIVE && !isPreloaded}
-                homeIndicatorHidden={autoHideHomeIndicator}
+                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}
+                preloaded={isPreloaded}
               >
-                <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}
-                />
-              </Screen>
+                <ActivityView
+                  mode={activityMode}
+                  visible={isVisible}
+                  style={StyleSheet.absoluteFill}
+                >
+                  {scene.descriptor.render()}
+                </ActivityView>
+              </CardContainer>
             );
           })}
-        </ScreenContainer>
+        </View>
       </View>
     );
   }

package/src/views/Stack/StackView.tsx

@@ -35,8 +35,8 @@ type Props = StackNavigationConfig & {
 type State = {
   // Local copy of the routes which are actually rendered
   routes: Route<string>[];
-  // Previous routes, to compare whether routes have changed or not
-  previousRoutes: Route<string>[];
+  // Previous navigation state for comparison
+  previousState: StackNavigationState<ParamListBase> | undefined;
   // Previous descriptors, to compare whether descriptors have changed or not
   previousDescriptors: StackDescriptorMap;
   // List of routes being opened, we need to animate pushing of these new routes
@@ -65,22 +65,52 @@ export class StackView extends React.Component<Props, State> {
     state: Readonly<State>
   ) {
     const allRoutes = [...props.state.routes, ...props.state.preloadedRoutes];
+    const previousRoutes = state.previousState
+      ? [...state.previousState.routes, ...state.previousState.preloadedRoutes]
+      : [];
 
     // If there was no change in routes, we don't need to compute anything
     if (
       isArrayEqual(
         allRoutes.map((r) => r.key),
-        state.previousRoutes.map((r) => r.key)
+        previousRoutes.map((r) => r.key)
       ) &&
       state.routes.length
     ) {
-      let routes = props.state.routes;
-      let previousRoutes = state.previousRoutes;
+      // If there were any routes being closed or replaced,
+      // We need to make sure they are preserved in the new state from props.state
+      // So first we get all such routes from the previous state (that included the animating routes)
+      // Then we add them back to the new state if they don't already exist
+
+      const closingRoutes = state.routes.filter(
+        (r) =>
+          state.closingRouteKeys.includes(r.key) &&
+          !props.state.routes.some((pr) => pr.key === r.key)
+      );
+
+      const replacingRoutes = state.routes.filter(
+        (r) =>
+          state.replacingRouteKeys.includes(r.key) &&
+          !props.state.routes.some((pr) => pr.key === r.key)
+      );
+
+      let routes: Route<string>[] = props.state.routes.slice();
+
+      // Replacing routes go before the focused route (they're being covered)
+      if (replacingRoutes.length) {
+        routes.splice(routes.length - 1, 0, ...replacingRoutes);
+      }
+
+      // Closing routes go at the end (they're animating out on top)
+      if (closingRoutes.length) {
+        routes.push(...closingRoutes);
+      }
+
       let descriptors = props.descriptors;
       let previousDescriptors = state.previousDescriptors;
 
       if (props.descriptors !== state.previousDescriptors) {
-        descriptors = state.routes.reduce<StackDescriptorMap>((acc, route) => {
+        descriptors = routes.reduce<StackDescriptorMap>((acc, route) => {
           acc[route.key] =
             props.descriptors[route.key] || state.descriptors[route.key];
 
@@ -90,7 +120,7 @@ export class StackView extends React.Component<Props, State> {
         previousDescriptors = props.descriptors;
       }
 
-      if (!isArrayEqual(allRoutes, state.previousRoutes)) {
+      if (!isArrayEqual(allRoutes, previousRoutes)) {
         // if any route objects have changed, we should update them
         const map = allRoutes.reduce<Record<string, Route<string>>>(
           (acc, route) => {
@@ -100,13 +130,12 @@ export class StackView extends React.Component<Props, State> {
           {}
         );
 
-        routes = props.state.routes.map((route) => map[route.key] || route);
-        previousRoutes = allRoutes;
+        routes = routes.map((route) => map[route.key] || route);
       }
 
       return {
         routes,
-        previousRoutes,
+        previousState: props.state,
         descriptors,
         previousDescriptors,
       };
@@ -122,14 +151,24 @@ export class StackView extends React.Component<Props, State> {
           props.state.routes.slice(0, props.state.index + 1)
         : props.state.routes;
 
-    // Now we need to determine which routes were added and removed
-    const { previousRoutes } = state;
-
     let { openingRouteKeys, closingRouteKeys, replacingRouteKeys } = state;
 
-    const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
-      | Route<string>
-      | undefined;
+    // If a route that was closing or being replaced is now back in the routes,
+    // it was added back before the animation finished, so stop tracking it
+    closingRouteKeys = closingRouteKeys.filter(
+      (key) => !routes.some((r) => r.key === key)
+    );
+
+    replacingRouteKeys = replacingRouteKeys.filter(
+      (key) => !routes.some((r) => r.key === key)
+    );
+
+    // Get previous focused route from previousState (actual focused route, not last in previousRoutes
+    // which can be a preloaded route that was never focused)
+    const previousFocusedRoute = state.previousState
+      ? state.previousState.routes[state.previousState.index]
+      : undefined;
+
     const nextFocusedRoute = routes[routes.length - 1];
 
     const isAnimationEnabled = (key: string) => {
@@ -233,6 +272,18 @@ export class StackView extends React.Component<Props, State> {
               // After the push animation is completed, routes being replaced will be removed completely
               routes = routes.slice();
               routes.splice(routes.length - 1, 0, previousFocusedRoute);
+
+              // Preserve any other routes still being replaced from previous transitions
+              const previousReplacingRoutes = state.routes.filter(
+                (r) =>
+                  replacingRouteKeys.includes(r.key) &&
+                  !routes.some((existing) => existing.key === r.key)
+              );
+
+              if (previousReplacingRoutes.length) {
+                // Insert before the route we just added (previousFocusedRoute)
+                routes.splice(routes.length - 2, 0, ...previousReplacingRoutes);
+              }
             }
           }
         }
@@ -266,7 +317,7 @@ export class StackView extends React.Component<Props, State> {
 
     return {
       routes,
-      previousRoutes: [...props.state.routes, ...props.state.preloadedRoutes],
+      previousState: props.state,
       previousDescriptors: props.descriptors,
       openingRouteKeys,
       closingRouteKeys,
@@ -277,7 +328,7 @@ export class StackView extends React.Component<Props, State> {
 
   state: State = {
     routes: [],
-    previousRoutes: [],
+    previousState: undefined,
     previousDescriptors: {},
     openingRouteKeys: [],
     closingRouteKeys: [],
@@ -328,20 +379,35 @@ export class StackView extends React.Component<Props, State> {
         });
       });
     } else {
-      this.setState((state) => ({
-        routes: state.replacingRouteKeys.length
-          ? state.routes.filter(
-              (r) => !state.replacingRouteKeys.includes(r.key)
-            )
-          : state.routes,
-        openingRouteKeys: state.openingRouteKeys.filter(
-          (key) => key !== route.key
-        ),
-        closingRouteKeys: state.closingRouteKeys.filter(
-          (key) => key !== route.key
-        ),
-        replacingRouteKeys: [],
-      }));
+      this.setState((state) => {
+        const routeIndex = state.routes.findIndex((r) => r.key === route.key);
+
+        // Remove replacing routes that were before the route that just opened
+        // Those were replaced by this or earlier routes and should be cleaned up
+        const replacingRoutesToRemove = new Set(
+          state.routes
+            .slice(0, routeIndex)
+            .filter((r) => state.replacingRouteKeys.includes(r.key))
+            .map((r) => r.key)
+        );
+
+        const newRoutes = state.routes.filter(
+          (r) => !replacingRoutesToRemove.has(r.key)
+        );
+
+        return {
+          routes: newRoutes,
+          openingRouteKeys: state.openingRouteKeys.filter(
+            (key) => key !== route.key
+          ),
+          closingRouteKeys: state.closingRouteKeys.filter(
+            (key) => key !== route.key
+          ),
+          replacingRouteKeys: state.replacingRouteKeys.filter(
+            (key) => !replacingRoutesToRemove.has(key)
+          ),
+        };
+      });
     }
   };
 
@@ -420,8 +486,13 @@ export class StackView extends React.Component<Props, State> {
       ...rest
     } = this.props;
 
-    const { routes, descriptors, openingRouteKeys, closingRouteKeys } =
-      this.state;
+    const {
+      routes,
+      descriptors,
+      openingRouteKeys,
+      closingRouteKeys,
+      replacingRouteKeys,
+    } = this.state;
 
     return (
       <GestureHandlerWrapper style={styles.container}>
@@ -440,6 +511,7 @@ export class StackView extends React.Component<Props, State> {
                         routes={routes}
                         openingRouteKeys={openingRouteKeys}
                         closingRouteKeys={closingRouteKeys}
+                        replacingRouteKeys={replacingRouteKeys}
                         onOpenRoute={this.handleOpenRoute}
                         onCloseRoute={this.handleCloseRoute}
                         onTransitionStart={this.handleTransitionStart}