@react-navigation/stack 8.0.0-alpha.51 → 8.0.0-alpha.53

package/src/views/Header/HeaderContainer.tsx

@@ -4,6 +4,7 @@ import {
   NavigationProvider,
   type Route,
   useLinkBuilder,
+  useLocale,
 } from '@react-navigation/native';
 import * as React from 'react';
 import {
@@ -17,10 +18,10 @@ import {
 import {
   forNoAnimation,
   forSlideLeft,
-  forSlideRight,
   forSlideUp,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import type { Scene, StackHeaderMode, StackHeaderProps } from '../../types';
+import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
 import { Header } from './Header';
 
 export type HeaderHeight = {
@@ -53,6 +54,7 @@ export function HeaderContainer({
   const focusedRoute = getFocusedRoute();
   const parentHeaderBack = React.use(HeaderBackContext);
   const { buildHref } = useLinkBuilder();
+  const { direction } = useLocale();
 
   return (
     <View style={[styles.container, style]}>
@@ -131,6 +133,12 @@ export function HeaderContainer({
         const props: StackHeaderProps = {
           back: headerBack,
           progress: scene.progress,
+          inverted: getInvertedMultiplier(
+            isHeaderStatic && nextHeaderlessGestureDirection
+              ? nextHeaderlessGestureDirection
+              : scene.descriptor.options.gestureDirection,
+            direction === 'rtl'
+          ),
           options: scene.descriptor.options,
           route: scene.descriptor.route,
           navigation: scene.descriptor.navigation,
@@ -140,9 +148,7 @@ export function HeaderContainer({
                 ? nextHeaderlessGestureDirection === 'vertical' ||
                   nextHeaderlessGestureDirection === 'vertical-inverted'
                   ? forSlideUp
-                  : nextHeaderlessGestureDirection === 'horizontal-inverted'
-                    ? forSlideRight
-                    : forSlideLeft
+                  : forSlideLeft
                 : headerStyleInterpolator
               : forNoAnimation,
         };

package/src/views/Header/HeaderSegment.tsx

@@ -6,7 +6,6 @@ import {
   HeaderTitle,
   useFrameSize,
 } from '@react-navigation/elements';
-import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet, type ViewStyle } from 'react-native';
 
@@ -23,15 +22,16 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   onGoBack?: (() => void) | undefined;
   backHref?: string | undefined;
   progress: SceneProgress;
+  inverted: 1 | -1;
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
 export function HeaderSegment(props: Props) {
-  const { direction } = useLocale();
   const layout = useFrameSize((frame) => frame, true);
 
   const {
     progress,
+    inverted,
     modal,
     onGoBack,
     backHref,
@@ -75,7 +75,7 @@ export function HeaderSegment(props: Props) {
         styleInterpolator({
           current: { progress: progress.current },
           next: progress.next && { progress: progress.next },
-          direction,
+          inverted,
           layouts: {
             header: {
               height: headerHeight,
@@ -84,7 +84,7 @@ export function HeaderSegment(props: Props) {
             screen: layout,
           },
         }),
-      [styleInterpolator, progress, direction, headerHeight, layout]
+      [styleInterpolator, progress, inverted, headerHeight, layout]
     );
 
   const headerLeft: StackHeaderOptions['headerLeft'] = left

package/src/views/Stack/Card.tsx

@@ -32,8 +32,16 @@ type Props = {
   interpolationIndex: number;
   opening: boolean;
   closing: boolean;
-  next: Animated.AnimatedInterpolation<number> | undefined;
-  current: Animated.AnimatedInterpolation<number>;
+  current: {
+    progress: Animated.AnimatedInterpolation<number>;
+    closing: Animated.Value;
+  };
+  next:
+    | {
+        progress: Animated.AnimatedInterpolation<number>;
+        closing: Animated.Value;
+      }
+    | undefined;
   gesture: Animated.Value;
   layout: Layout;
   insets: EdgeInsets;
@@ -52,7 +60,7 @@ type Props = {
         style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
       }) => React.ReactNode)
     | undefined;
-  overlayEnabled: boolean;
+  overlayEnabled: boolean | undefined;
   shadowEnabled: boolean | undefined;
   gestureEnabled: boolean;
   gestureResponseDistance?: number | undefined;
@@ -121,7 +129,7 @@ const defaultOverlay = ({
 }) => (style ? <Animated.View style={[styles.overlay, style]} /> : null);
 
 function Card({
-  shadowEnabled = false,
+  shadowEnabled,
   gestureEnabled = true,
   gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
   overlay = defaultOverlay,
@@ -153,15 +161,17 @@ function Card({
   contentStyle,
 }: Props) {
   const didInitiallyAnimate = React.useRef(false);
+  const isClosingValueLockedRef = React.useRef(false);
   const lastToValueRef = React.useRef<number | undefined>(undefined);
+  const isAnimatingRef = React.useRef(false);
+  const animationIdRef = React.useRef(0);
 
   const animationHandleRef = React.useRef<number | undefined>(undefined);
   const pendingGestureCallbackRef =
     React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const pendingOnCloseCallbackRef =
     React.useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  const [isClosing] = React.useState(() => new Animated.Value(FALSE));
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const [inverted] = React.useState(
     () =>
@@ -185,6 +195,8 @@ function Card({
       closing: boolean;
       velocity?: number;
     }) => {
+      const id = ++animationIdRef.current;
+
       const toValue = getAnimateToValue({
         closing: isClosingParam,
         layout,
@@ -194,7 +206,13 @@ function Card({
       });
 
       lastToValueRef.current = toValue;
-      isClosing.setValue(isClosingParam ? TRUE : FALSE);
+
+      // Switching between open and close mid-gesture and animation can cause a visible jump.
+      // So we lock the closing value until the animation is finished.
+      if (!isClosingValueLockedRef.current) {
+        isClosingValueLockedRef.current = true;
+        current.closing.setValue(isClosingParam ? TRUE : FALSE);
+      }
 
       const spec = isClosingParam ? transitionSpec.close : transitionSpec.open;
       const animation =
@@ -212,6 +230,9 @@ function Card({
       });
 
       const onFinish = () => {
+        current.closing.setValue(isClosingParam ? TRUE : FALSE);
+        isClosingValueLockedRef.current = false;
+
         if (isClosingParam) {
           onClose();
         } else {
@@ -225,6 +246,8 @@ function Card({
       };
 
       if (animated) {
+        isAnimatingRef.current = true;
+
         animation(gesture, {
           ...spec.config,
           velocity,
@@ -232,6 +255,12 @@ function Card({
           useNativeDriver,
           isInteraction: false,
         }).start(({ finished }) => {
+          if (id !== animationIdRef.current) {
+            return;
+          }
+
+          isAnimatingRef.current = false;
+
           clearTimeout(pendingGestureCallbackRef.current);
 
           if (finished) {
@@ -239,6 +268,8 @@ function Card({
           }
         });
       } else {
+        isAnimatingRef.current = false;
+        gesture.setValue(toValue);
         onFinish();
       }
     }
@@ -270,17 +301,23 @@ function Card({
   } | null>(null);
 
   React.useEffect(() => {
+    const animationIdRefForCleanup = animationIdRef;
+
     return () => {
+      // Increment the animation ID when the card unmounts.
+      // This makes pending callbacks return because their IDs no longer match.
+      animationIdRefForCleanup.current++;
+      gesture.stopAnimation();
+
       if (animationHandleRef.current) {
         cancelAnimationFrame(animationHandleRef.current);
       }
 
       clearTimeout(pendingGestureCallbackRef.current);
       clearTimeout(pendingOnCloseCallbackRef.current);
+      clearTimeout(timeoutRef.current);
     };
-  }, []);
-
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  }, [gesture]);
 
   const maybeAnimate = useLatestCallback(() => {
     clearTimeout(pendingGestureCallbackRef.current);
@@ -318,7 +355,10 @@ function Card({
         // When route was closed due to a gesture, the animation would've happened already
         // It's still important to trigger the animation so that `onClose` is called
         // If `onClose` is not called, cleanup step won't be performed for gestures
-        animate({ closing });
+        // We also check if animation was already running so we don't restart it unnecessarily
+        if (!isAnimatingRef.current || lastToValueRef.current !== toValue) {
+          animate({ closing });
+        }
       } else if (
         typeof previousOpening === 'boolean' &&
         opening &&
@@ -365,9 +405,8 @@ function Card({
   const interpolationProps = React.useMemo(
     () => ({
       index: interpolationIndex,
-      current: { progress: current },
-      next: next && { progress: next },
-      closing: isClosing,
+      current,
+      next,
       swiping: isSwiping,
       inverted,
       layouts: {
@@ -384,7 +423,6 @@ function Card({
       interpolationIndex,
       current,
       next,
-      isClosing,
       isSwiping,
       inverted,
       layout,
@@ -405,7 +443,14 @@ function Card({
     () => {
       clearTimeout(pendingGestureCallbackRef.current);
       clearTimeout(pendingOnCloseCallbackRef.current);
+
       isSwiping.setValue(TRUE);
+
+      if (!isClosingValueLockedRef.current) {
+        isClosingValueLockedRef.current = true;
+        current.closing.setValue(TRUE);
+      }
+
       onGestureBegin?.();
     }
   );
@@ -538,13 +583,13 @@ function Card({
             // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
             // If we disable animations and hide header, it could end up making the value unused.
             // So we have this dummy style that will always be used regardless of what else changed.
-            opacity: current,
+            opacity: current.progress,
           }}
           // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
           collapsable={false}
         />
       ) : null}
-      {overlayEnabled ? (
+      {(overlayEnabled ?? overlayStyle != null) ? (
         <View style={[StyleSheet.absoluteFill, { pointerEvents: 'box-none' }]}>
           {overlay({ style: overlayStyle })}
         </View>
@@ -557,17 +602,16 @@ function Card({
             needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
             style={[styles.card, cardStyle]}
           >
-            {shadowEnabled && shadowStyle && !isTransparent ? (
+            {(shadowEnabled ?? shadowStyle != null) && !isTransparent ? (
               <Animated.View
                 style={[
                   styles.shadow,
-                  gestureDirection === 'horizontal'
-                    ? [styles.shadowHorizontal, styles.shadowStart]
-                    : gestureDirection === 'horizontal-inverted'
-                      ? [styles.shadowHorizontal, styles.shadowEnd]
-                      : gestureDirection === 'vertical'
-                        ? [styles.shadowVertical, styles.shadowTop]
-                        : [styles.shadowVertical, styles.shadowBottom],
+                  gestureDirection === 'horizontal' ||
+                  gestureDirection === 'horizontal-inverted'
+                    ? styles.shadowHorizontal
+                    : gestureDirection === 'vertical'
+                      ? [styles.shadowVertical, styles.shadowTop]
+                      : [styles.shadowVertical, styles.shadowBottom],
                   { backgroundColor },
                   shadowStyle,
                 ]}
@@ -580,7 +624,9 @@ function Card({
             >
               {children}
             </CardContent>
-            {dimStyle ? <Animated.View style={[styles.dim, dimStyle]} /> : null}
+            {dimStyle != null ? (
+              <Animated.View style={[styles.dim, dimStyle]} />
+            ) : null}
           </Animated.View>
         </GestureDetector>
       </Animated.View>
@@ -597,6 +643,10 @@ const styles = StyleSheet.create({
   },
   card: {
     flex: 1,
+    // The flip animation adds `backfaceVisibility`
+    // On Android, it crashes when the style property is removed
+    // So we always add the property with the default
+    backfaceVisibility: 'visible',
     // This is necessary for gestures to work
     // Without this, gestures won't work if the child view is flattened
     pointerEvents: 'auto',
@@ -617,23 +667,18 @@ const styles = StyleSheet.create({
   },
   shadowHorizontal: {
     top: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
-    width: 3,
     ...getShadowStyle({
       offset: {
-        width: -1,
-        height: 1,
+        width: 0,
+        height: -3,
       },
-      radius: 5,
-      opacity: 0.3,
+      radius: 12,
+      opacity: 0.04,
     }),
   },
-  shadowStart: {
-    start: 0,
-  },
-  shadowEnd: {
-    end: 0,
-  },
   shadowVertical: {
     start: 0,
     end: 0,

package/src/views/Stack/CardContainer.tsx

@@ -29,6 +29,8 @@ type Props = {
   focused: boolean;
   opening: boolean;
   closing: boolean;
+  closingAnimated: Animated.Value;
+  nextClosingAnimated: Animated.Value | undefined;
   modal: boolean;
   layout: Layout;
   gesture: Animated.Value;
@@ -66,6 +68,8 @@ function CardContainerInner({
   active,
   opening,
   closing,
+  closingAnimated,
+  nextClosingAnimated,
   gesture,
   focused,
   modal,
@@ -207,6 +211,17 @@ function CardContainerInner({
 
   const animated = animation !== 'none';
 
+  const { current, next } = React.useMemo(
+    () => ({
+      current: { progress: scene.progress.current, closing: closingAnimated },
+      next:
+        scene.progress.next && nextClosingAnimated
+          ? { progress: scene.progress.next, closing: nextClosingAnimated }
+          : undefined,
+    }),
+    [closingAnimated, nextClosingAnimated, scene.progress]
+  );
+
   return (
     <Card
       animated={animated}
@@ -216,8 +231,8 @@ function CardContainerInner({
       insets={insets}
       direction={direction}
       gesture={gesture}
-      current={scene.progress.current}
-      next={scene.progress.next}
+      current={current}
+      next={next}
       opening={opening}
       closing={closing}
       onOpen={handleOpen}

package/src/views/Stack/CardStack.tsx

@@ -20,15 +20,24 @@ import {
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
 import {
+  forBottomSheetAndroid,
+  forCrossDissolveIOS,
+  forDialogAndroid,
+  forFadeFromBottomAndroid,
+  forFadeFromRightAndroid,
+  forFlipIOS,
   forModalPresentationIOS,
   forNoAnimation as forNoAnimationCard,
+  forRevealFromBottomAndroid,
+  forScaleFromCenterAndroid,
+  forVerticalIOS,
 } from '../../TransitionConfigs/CardStyleInterpolators';
 import {
-  BottomSheetAndroid,
   DefaultTransition,
   FadeFromBottomAndroid,
   FadeFromRightAndroid,
   ModalFadeTransition,
+  ModalFlipIOS,
   ModalSlideFromBottomIOS,
   ModalTransition,
   RevealFromBottomAndroid,
@@ -102,17 +111,33 @@ const NAMED_TRANSITIONS_PRESETS = {
   fade: ModalFadeTransition,
   fade_from_bottom: FadeFromBottomAndroid,
   fade_from_right: FadeFromRightAndroid,
+  flip: ModalFlipIOS,
+  ios_from_left: SlideFromLeftIOS,
+  ios_from_right: SlideFromRightIOS,
   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,
-  }),
+  slide_from_bottom: ModalSlideFromBottomIOS,
 } as const satisfies Record<StackAnimationName, TransitionPreset>;
 
+const GESTURE_DISABLED_INTERPOLATORS = [
+  forCrossDissolveIOS,
+  forDialogAndroid,
+  forFadeFromBottomAndroid,
+  forFadeFromRightAndroid,
+  forFlipIOS,
+  forRevealFromBottomAndroid,
+  forScaleFromCenterAndroid,
+  forVerticalIOS,
+];
+
+const SCREEN_HEADER_INTERPOLATORS = [
+  ...GESTURE_DISABLED_INTERPOLATORS,
+  forBottomSheetAndroid,
+];
+
 const HIDDEN_HEADER_HEIGHT = { measured: false, value: 0 };
 
 const getInterpolationIndex = (scenes: Scene[], index: number) => {
@@ -146,11 +171,26 @@ const getIsModalPresentation = (
 ) => {
   return (
     cardStyleInterpolator === forModalPresentationIOS ||
-    // Handle custom modal presentation interpolators as well
-    cardStyleInterpolator.name === 'forModalPresentationIOS'
+    cardStyleInterpolator.name === forModalPresentationIOS.name
   );
 };
 
+const getIsGestureEnabledByDefault = (
+  cardStyleInterpolator: StackCardStyleInterpolator
+) =>
+  !GESTURE_DISABLED_INTERPOLATORS.some(
+    (interpolator) =>
+      cardStyleInterpolator === interpolator ||
+      cardStyleInterpolator.name === interpolator.name
+  );
+
+const getIsScreenHeader = (cardStyleInterpolator: StackCardStyleInterpolator) =>
+  SCREEN_HEADER_INTERPOLATORS.some(
+    (interpolator) =>
+      cardStyleInterpolator === interpolator ||
+      cardStyleInterpolator.name === interpolator.name
+  );
+
 const getIsInModalPresentation = (
   scene: Scene,
   interpolationIndex: number,
@@ -323,7 +363,6 @@ export class CardStack extends React.Component<Props, State> {
     }
 
     const allRoutes = getAllRoutes(props.routes, props.state);
-
     const gestures = allRoutes.reduce<GestureValues>((acc, curr) => {
       const descriptor = props.descriptors[curr.key];
       const { animation } = descriptor?.options || {};
@@ -354,6 +393,13 @@ export class CardStack extends React.Component<Props, State> {
       const nextRoute = isInactive ? undefined : self[index + 1];
 
       const oldScene = state.scenes[index];
+      const previousScene =
+        oldScene?.route.key === route.key
+          ? oldScene
+          : state.scenes.find((scene) => scene.route.key === route.key);
+      const closing =
+        previousScene?.closing ??
+        new Animated.Value(props.closingRouteKeys.includes(route.key) ? 1 : 0);
 
       const currentGesture = gestures[route.key];
 
@@ -420,16 +466,17 @@ export class CardStack extends React.Component<Props, State> {
               : DefaultTransition;
 
       const {
-        gestureEnabled = Platform.OS === 'ios' && isAnimationEnabled,
         gestureDirection = transitionPreset.gestureDirection,
         transitionSpec = transitionPreset.transitionSpec,
         cardStyleInterpolator = isAnimationEnabled
           ? transitionPreset.cardStyleInterpolator
           : forNoAnimationCard,
+        gestureEnabled = Platform.OS === 'ios' &&
+          isAnimationEnabled &&
+          getIsGestureEnabledByDefault(cardStyleInterpolator),
         headerStyleInterpolator = transitionPreset.headerStyleInterpolator,
-        cardOverlayEnabled = (Platform.OS !== 'ios' &&
-          optionsForTransitionConfig.presentation !== 'transparentModal') ||
-          getIsModalPresentation(cardStyleInterpolator),
+        cardOverlayEnabled,
+        cardShadowEnabled,
       } = optionsForTransitionConfig;
 
       const headerMode: StackHeaderMode =
@@ -439,7 +486,8 @@ export class CardStack extends React.Component<Props, State> {
           optionsForTransitionConfig.presentation === 'transparentModal' ||
           nextOptions?.presentation === 'modal' ||
           nextOptions?.presentation === 'transparentModal' ||
-          getIsModalPresentation(cardStyleInterpolator)
+          getIsModalPresentation(cardStyleInterpolator) ||
+          getIsScreenHeader(cardStyleInterpolator)
         ) &&
         Platform.OS === 'ios' &&
         descriptor.options.header === undefined
@@ -456,6 +504,7 @@ export class CardStack extends React.Component<Props, State> {
             ...descriptor.options,
             animation,
             cardOverlayEnabled,
+            cardShadowEnabled,
             cardStyleInterpolator,
             gestureDirection,
             gestureEnabled,
@@ -489,6 +538,7 @@ export class CardStack extends React.Component<Props, State> {
               )
             : undefined,
         },
+        closing,
         __memo: [
           state.layout,
           descriptor,
@@ -810,10 +860,13 @@ export class CardStack extends React.Component<Props, State> {
                   // Preloaded screens should stay mounted, but remain hidden until focused
                   (!isPreloaded && index >= routes.length - 2)));
 
-            const activityMode = // Render focused and animating screens normally
+            const activityMode =
+              // Keep focused and focusing screens interactive
               focused || isFocusing
                 ? 'normal'
                 : inactiveBehavior === 'none' ||
+                    // Keep effects running until the closing animation finishes
+                    isRemoving ||
                     // Unpause preloaded or retained screens so updates are visible
                     // Handle retained explicitly as isInactive won't be updated until animation end
                     isInactive ||
@@ -870,6 +923,8 @@ export class CardStack extends React.Component<Props, State> {
                   focused={focused}
                   opening={openingRouteKeys.includes(route.key)}
                   closing={closingRouteKeys.includes(route.key)}
+                  closingAnimated={scene.closing}
+                  nextClosingAnimated={nextScene?.closing}
                   layout={layout}
                   gesture={gesture}
                   scene={scene}