@react-navigation/stack 8.0.0-alpha.12 → 8.0.0-alpha.13

package/src/types.tsx

@@ -138,12 +138,12 @@ export type SceneProgress = {
    * Progress value for the screen after this one in the stack.
    * This can be `undefined` in case the screen animating is the last one.
    */
-  next?: Animated.AnimatedInterpolation<number>;
+  next?: Animated.AnimatedInterpolation<number> | undefined;
   /**
    * Progress value for the screen before this one in the stack.
    * This can be `undefined` in case the screen animating is the first one.
    */
-  previous?: Animated.AnimatedInterpolation<number>;
+  previous?: Animated.AnimatedInterpolation<number> | undefined;
 };
 
 export type StackHeaderMode = 'float' | 'screen';
@@ -187,14 +187,14 @@ export type StackHeaderOptions = Omit<
    * Defaults to the previous screen's title, or "Back" if there's not enough space.
    * Use `headerBackButtonDisplayMode` to customize the behavior.
    */
-  headerBackTitle?: string;
+  headerBackTitle?: string | undefined;
   /**
    * Title string used by the back button when `headerBackTitle` doesn't fit on the screen.
    * Use `headerBackButtonDisplayMode` to customize the behavior.
    *
    * Defaults to "Back".
    */
-  headerBackTruncatedTitle?: string;
+  headerBackTruncatedTitle?: string | undefined;
   /**
    * How the back button displays icon and title.
    *
@@ -240,16 +240,18 @@ export type StackHeaderProps = {
   /**
    * Options for the back button.
    */
-  back?: {
-    /**
-     * Title of the previous screen.
-     */
-    title: string | undefined;
-    /**
-     * The `href` to use for the anchor tag on web
-     */
-    href: string | undefined;
-  };
+  back?:
+    | {
+        /**
+         * Title of the previous screen.
+         */
+        title: string | undefined;
+        /**
+         * The `href` to use for the anchor tag on web
+         */
+        href: string | undefined;
+      }
+    | undefined;
   /**
    * Animated nodes representing the progress of the animation.
    */
@@ -276,26 +278,26 @@ export type StackHeaderRightProps = {
   /**
    * Tint color for the header button.
    */
-  tintColor?: ColorValue;
+  tintColor?: ColorValue | undefined;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
-  pressColor?: ColorValue;
+  pressColor?: ColorValue | undefined;
   /**
    * Opacity when the button is pressed, used when ripple is not supported.
    */
-  pressOpacity?: number;
+  pressOpacity?: number | undefined;
   /**
    * Whether it's possible to navigate back in stack.
    */
-  canGoBack?: boolean;
+  canGoBack?: boolean | undefined;
 };
 
 export type StackHeaderLeftProps = HeaderBackButtonProps & {
   /**
    * Whether it's possible to navigate back in stack.
    */
-  canGoBack?: boolean;
+  canGoBack?: boolean | undefined;
 };
 
 export type StackDescriptor = Descriptor<
@@ -348,9 +350,6 @@ export type StackNavigationOptions = StackHeaderOptions &
      * You can also specify `{ backgroundColor: 'transparent' }` to make the previous screen visible underneath.
      * This is useful to implement things like modal dialogs.
      *
-     * You should also specify `detachPreviousScreen: false` in options when using a transparent background
-     * so that the previous screen isn't detached and stays below the current screen.
-     *
      * You might also need to change the animation of the screen using `cardStyleInterpolator`
      * so that the previous screen isn't transformed or invisible.
      */
@@ -366,7 +365,6 @@ export type StackNavigationOptions = StackHeaderOptions &
      * - `transparentModal`: Similar to `modal`. This changes following things:
      *   - Sets `headerMode` to `screen` for the screen unless specified otherwise.
      *   - Sets background color of the screen to transparent, so previous screen is visible
-     *   - Adjusts the `detachPreviousScreen` option so that the previous screen stays rendered.
      *   - Prevents the previous screen from animating from its last position.
      *   - Changes the screen animation to a vertical slide animation.
      *
@@ -408,43 +406,26 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Not supported on Web.
      */
     gestureVelocityImpact?: number;
-    /**
-     * Whether to detach the previous screen from the view hierarchy to save memory.
-     * Set it to `false` if you need the previous screen to be seen through the active screen.
-     * Only applicable if `detachInactiveScreens` isn't set to `false`.
-     * Defaults to `false` for the last screen for modals, otherwise `true`.
-     */
-    detachPreviousScreen?: boolean;
     /**
      * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen from this screen.
      * Defaults to `true`.
      */
     keyboardHandlingEnabled?: boolean;
+
     /**
-     * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
-     * Defaults to `true` when `enableFreeze()` is run at the top of the application.
-     * Requires `react-native-screens` version >=3.16.0.
+     * What should happen when screens become inactive.
+     * - `pause`: Effects are cleaned up.
+     * - `none`: Screen renders normally
      *
-     * Only supported on iOS and Android.
-     */
-    freezeOnBlur?: boolean;
-    /**
-     * Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
+     * Defaults to `pause`.
      *
-     * @platform ios
+     * Preloaded screens won't be paused until after navigated to.
+     * This makes sure that effects are run to initialize the screen.
      */
-    autoHideHomeIndicator?: boolean;
+    inactiveBehavior?: 'pause' | 'none';
   };
 
-export type StackNavigationConfig = {
-  /**
-   * Whether inactive screens should be detached from the view hierarchy to save memory.
-   * This will have no effect if you disable `react-native-screens`.
-   *
-   * Defaults to `true`.
-   */
-  detachInactiveScreens?: boolean;
-};
+export type StackNavigationConfig = {};
 
 export type TransitionSpec =
   | {
@@ -476,12 +457,14 @@ export type StackCardInterpolationProps = {
    * Values for the screen after this one in the stack.
    * This can be `undefined` in case the screen animating is the last one.
    */
-  next?: {
-    /**
-     * Animated node representing the progress value of the next screen.
-     */
-    progress: Animated.AnimatedInterpolation<number>;
-  };
+  next?:
+    | {
+        /**
+         * Animated node representing the progress value of the next screen.
+         */
+        progress: Animated.AnimatedInterpolation<number>;
+      }
+    | undefined;
   /**
    * The index of the card with this interpolation in the stack.
    */
@@ -555,12 +538,14 @@ export type StackHeaderInterpolationProps = {
    * Values for the screen after this one in the stack.
    * This can be `undefined` in case the screen animating is the last one.
    */
-  next?: {
-    /**
-     * Animated node representing the progress value of the next screen.
-     */
-    progress: Animated.AnimatedInterpolation<number>;
-  };
+  next?:
+    | {
+        /**
+         * Animated node representing the progress value of the next screen.
+         */
+        progress: Animated.AnimatedInterpolation<number>;
+      }
+    | undefined;
   /**
    * Writing direction of the layout.
    */

package/src/utils/gestureActivationCriteria.tsx

@@ -17,7 +17,7 @@ export const gestureActivationCriteria = ({
 }: {
   direction: LocaleDirection;
   gestureDirection: GestureDirection;
-  gestureResponseDistance?: number;
+  gestureResponseDistance?: number | undefined;
   layout: Layout;
 }) => {
   const enableTrackpadTwoFingerGesture = true;

package/src/views/Header/HeaderSegment.tsx

@@ -20,8 +20,8 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   headerStatusBarHeight: number;
   title: string;
   modal: boolean;
-  onGoBack?: () => void;
-  backHref?: string;
+  onGoBack?: (() => void) | undefined;
+  backHref?: string | undefined;
   progress: SceneProgress;
   styleInterpolator: StackHeaderStyleInterpolator;
 };

package/src/views/Stack/Card.tsx

@@ -58,7 +58,7 @@ type Props = {
   overlayEnabled: boolean;
   shadowEnabled: boolean | undefined;
   gestureEnabled: boolean;
-  gestureResponseDistance?: number;
+  gestureResponseDistance?: number | undefined;
   gestureVelocityImpact: number | undefined;
   transitionSpec: {
     open: TransitionSpec;
@@ -66,8 +66,8 @@ type Props = {
   };
   preloaded: boolean;
   styleInterpolator: StackCardStyleInterpolator;
-  containerStyle?: StyleProp<ViewStyle>;
-  contentStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle> | undefined;
+  contentStyle?: StyleProp<ViewStyle> | undefined;
 };
 
 const GESTURE_VELOCITY_IMPACT = 0.3;

package/src/views/Stack/CardA11yWrapper.tsx

@@ -6,7 +6,6 @@ type Props = {
   active: boolean;
   animated: boolean;
   isNextScreenTransparent: boolean;
-  detachCurrentScreen: boolean;
   children: React.ReactNode;
 };
 
@@ -14,14 +13,7 @@ export type CardA11yWrapperRef = { setInert: (value: boolean) => void };
 
 export const CardA11yWrapper = React.forwardRef(
   (
-    {
-      focused,
-      active,
-      animated,
-      isNextScreenTransparent,
-      detachCurrentScreen,
-      children,
-    }: Props,
+    { focused, active, animated, isNextScreenTransparent, children }: Props,
     ref: React.Ref<CardA11yWrapperRef>
   ) => {
     // Manage this in separate component to avoid re-rendering card during gestures
@@ -30,11 +22,7 @@ export const CardA11yWrapper = React.forwardRef(
 
     React.useImperativeHandle(ref, () => ({ setInert }), []);
 
-    const isHidden =
-      !animated &&
-      isNextScreenTransparent === false &&
-      detachCurrentScreen !== false &&
-      !focused;
+    const isHidden = !animated && isNextScreenTransparent === false && !focused;
 
     return (
       <View

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,6 +93,7 @@ function CardContainerInner({
   safeAreaInsetRight,
   safeAreaInsetTop,
   scene,
+  children,
 }: Props) {
   const wrapperRef = React.useRef<CardA11yWrapperRef>(null);
 
@@ -242,7 +242,6 @@ function CardContainerInner({
       active={active}
       animated={animated}
       isNextScreenTransparent={isNextScreenTransparent}
-      detachCurrentScreen={detachCurrentScreen}
     >
       <Card
         animated={animated}
@@ -311,7 +310,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,83 @@ 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 isRemoving =
+              replacingRouteKeys.includes(route.key) ||
+              closingRouteKeys.includes(route.key);
 
-            const activityState = isPreloaded
-              ? STATE_INACTIVE
-              : activeStates[index];
+            const isFocusing =
+              openingRouteKeys.includes(route.key) ||
+              [...closingRouteKeys, ...replacingRouteKeys].includes(
+                self[index + 1]?.key
+              );
 
             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
+                <ActivityView
+                  mode={
+                    // Render focused and animating screens normally
+                    focused || isFocusing
+                      ? 'normal'
+                      : // Unpause preloaded screens so updates are visible
+                        // This lets preloaded screens initialize
+                        // And avoids things like pressable animation from being frozen
+                        inactiveBehavior === 'none' ||
+                          isPreloaded ||
+                          isRemoving ||
+                          isNextScreenTransparent
+                        ? 'inert'
+                        : 'paused'
+                  }
+                  visible={
+                    // keep animating, preloaded & last two screens visible for smoother transitions
+                    isFocusing ||
+                    isRemoving ||
+                    isPreloaded ||
+                    isNextScreenTransparent ||
+                    index >= routes.length - 2
                   }
-                  renderHeader={renderHeader}
-                  onOpenRoute={onOpenRoute}
-                  onCloseRoute={onCloseRoute}
-                  onTransitionStart={onTransitionStart}
-                  onTransitionEnd={onTransitionEnd}
-                  isNextScreenTransparent={isNextScreenTransparent}
-                  detachCurrentScreen={detachCurrentScreen}
-                  preloaded={isPreloaded}
-                />
-              </Screen>
+                  style={StyleSheet.absoluteFill}
+                >
+                  {scene.descriptor.render()}
+                </ActivityView>
+              </CardContainer>
             );
           })}
-        </ScreenContainer>
+        </View>
       </View>
     );
   }