@react-navigation/stack 8.0.0-alpha.6 → 8.0.0-alpha.60

package/src/views/Stack/Card.tsx

@@ -9,6 +9,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
+import type { PanGestureConfig } from 'react-native-gesture-handler';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
 
@@ -23,11 +24,7 @@ import { gestureActivationCriteria } from '../../utils/gestureActivationCriteria
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
 import { getShadowStyle } from '../../utils/getShadowStyle';
-import {
-  GestureState,
-  PanGestureHandler,
-  type PanGestureHandlerGestureEvent,
-} from '../GestureHandler';
+import { GestureDetector, usePanGesture } from '../GestureHandler';
 import { CardContent } from './CardContent';
 
 type Props = {
@@ -35,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;
@@ -55,10 +60,10 @@ type Props = {
         style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
       }) => React.ReactNode)
     | undefined;
-  overlayEnabled: boolean;
+  overlayEnabled: boolean | undefined;
   shadowEnabled: boolean | undefined;
   gestureEnabled: boolean;
-  gestureResponseDistance?: number;
+  gestureResponseDistance?: number | undefined;
   gestureVelocityImpact: number | undefined;
   transitionSpec: {
     open: TransitionSpec;
@@ -66,8 +71,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;
@@ -83,7 +88,11 @@ const hasOpacityStyle = (
   if (style) {
     const flattenedStyle = StyleSheet.flatten(style);
 
-    return 'opacity' in flattenedStyle && flattenedStyle.opacity != null;
+    return (
+      flattenedStyle != null &&
+      'opacity' in flattenedStyle &&
+      flattenedStyle.opacity != null
+    );
   }
 
   return false;
@@ -120,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,
@@ -151,16 +160,18 @@ function Card({
   containerStyle: customContainerStyle,
   contentStyle,
 }: Props) {
-  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
-
   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 [isClosing] = React.useState(() => new Animated.Value(FALSE));
+  const pendingOnCloseCallbackRef =
+    React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const [inverted] = React.useState(
     () =>
@@ -184,6 +195,8 @@ function Card({
       closing: boolean;
       velocity?: number;
     }) => {
+      const id = ++animationIdRef.current;
+
       const toValue = getAnimateToValue({
         closing: isClosingParam,
         layout,
@@ -193,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 =
@@ -211,6 +230,9 @@ function Card({
       });
 
       const onFinish = () => {
+        current.closing.setValue(isClosingParam ? TRUE : FALSE);
+        isClosingValueLockedRef.current = false;
+
         if (isClosingParam) {
           onClose();
         } else {
@@ -218,14 +240,14 @@ function Card({
         }
 
         animationHandleRef.current = requestAnimationFrame(() => {
-          if (didInitiallyAnimate.current) {
-            // Make sure to re-open screen if it wasn't removed
-            forceUpdate();
-          }
+          // Make sure to re-open screen if it wasn't removed
+          maybeAnimate();
         });
       };
 
       if (animated) {
+        isAnimatingRef.current = true;
+
         animation(gesture, {
           ...spec.config,
           velocity,
@@ -233,6 +255,12 @@ function Card({
           useNativeDriver,
           isInteraction: false,
         }).start(({ finished }) => {
+          if (id !== animationIdRef.current) {
+            return;
+          }
+
+          isAnimatingRef.current = false;
+
           clearTimeout(pendingGestureCallbackRef.current);
 
           if (finished) {
@@ -240,84 +268,13 @@ function Card({
           }
         });
       } else {
+        isAnimatingRef.current = false;
+        gesture.setValue(toValue);
         onFinish();
       }
     }
   );
 
-  const onGestureStateChange = useLatestCallback(
-    ({ nativeEvent }: PanGestureHandlerGestureEvent) => {
-      switch (nativeEvent.state) {
-        case GestureState.ACTIVE:
-          isSwiping.setValue(TRUE);
-          onGestureBegin?.();
-          break;
-        case GestureState.CANCELLED:
-        case GestureState.FAILED: {
-          isSwiping.setValue(FALSE);
-
-          const velocity =
-            gestureDirection === 'vertical' ||
-            gestureDirection === 'vertical-inverted'
-              ? nativeEvent.velocityY
-              : nativeEvent.velocityX;
-
-          animate({
-            closing,
-            velocity,
-          });
-
-          onGestureCanceled?.();
-          break;
-        }
-        case GestureState.END: {
-          isSwiping.setValue(FALSE);
-
-          let distance;
-          let translation;
-          let velocity;
-
-          if (
-            gestureDirection === 'vertical' ||
-            gestureDirection === 'vertical-inverted'
-          ) {
-            distance = layout.height;
-            translation = nativeEvent.translationY;
-            velocity = nativeEvent.velocityY;
-          } else {
-            distance = layout.width;
-            translation = nativeEvent.translationX;
-            velocity = nativeEvent.velocityX;
-          }
-
-          const shouldClose =
-            (translation + velocity * gestureVelocityImpact) *
-              getInvertedMultiplier(gestureDirection, direction === 'rtl') >
-            distance / 2
-              ? velocity !== 0 || translation !== 0
-              : closing;
-
-          animate({ closing: shouldClose, velocity });
-
-          if (shouldClose) {
-            // We call onClose with a delay to make sure that the animation has already started
-            // This will make sure that the state update caused by this doesn't affect start of animation
-            pendingGestureCallbackRef.current = setTimeout(() => {
-              onClose();
-
-              // Trigger an update after we dispatch the action to remove the screen
-              // This will make sure that we check if the screen didn't get removed so we can cancel the animation
-              forceUpdate();
-            }, 32);
-          }
-
-          onGestureEnd?.();
-          break;
-        }
-      }
-    }
-  );
-
   React.useLayoutEffect(() => {
     layoutAnim.width.setValue(layout.width);
     layoutAnim.height.setValue(layout.height);
@@ -344,23 +301,34 @@ 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();
+
+      // In development, StrictMode re-runs effects without unmounting,
+      // e.g. when the card moves to a new position after rearranging.
+      // The stopped animation didn't reach its value, so reset the state,
+      // to make sure that `maybeAnimate` restarts it when effects re-run.
+      isAnimatingRef.current = false;
+      lastToValueRef.current = undefined;
+
       if (animationHandleRef.current) {
         cancelAnimationFrame(animationHandleRef.current);
       }
 
       clearTimeout(pendingGestureCallbackRef.current);
+      clearTimeout(pendingOnCloseCallbackRef.current);
+      clearTimeout(timeoutRef.current);
     };
+  }, [gesture]);
 
-    // We only want to clean up the animation on unmount
-  }, []);
-
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  React.useEffect(() => {
-    if (preloaded) {
-      return;
-    }
+  const maybeAnimate = useLatestCallback(() => {
+    clearTimeout(pendingGestureCallbackRef.current);
+    clearTimeout(pendingOnCloseCallbackRef.current);
 
     if (!didInitiallyAnimate.current) {
       // Animate the card in on initial mount
@@ -368,9 +336,8 @@ function Card({
       // rending of the screen is done. This is especially important
       // in the new architecture
       // cf., https://github.com/react-navigation/react-navigation/issues/12401
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
+      clearTimeout(timeoutRef.current);
+
       timeoutRef.current = setTimeout(() => {
         didInitiallyAnimate.current = true;
         animate({ closing });
@@ -395,7 +362,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 &&
@@ -410,6 +380,14 @@ function Card({
         animate({ closing });
       }
     }
+  });
+
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
+    }
+
+    maybeAnimate();
 
     previousPropsRef.current = {
       opening,
@@ -428,14 +406,14 @@ function Card({
     layout,
     opening,
     preloaded,
+    maybeAnimate,
   ]);
 
   const interpolationProps = React.useMemo(
     () => ({
       index: interpolationIndex,
-      current: { progress: current },
-      next: next && { progress: next },
-      closing: isClosing,
+      current,
+      next,
       swiping: isSwiping,
       inverted,
       layouts: {
@@ -452,7 +430,6 @@ function Card({
       interpolationIndex,
       current,
       next,
-      isClosing,
       isSwiping,
       inverted,
       layout,
@@ -463,23 +440,102 @@ function Card({
     ]
   );
 
-  const { containerStyle, cardStyle, overlayStyle, shadowStyle } =
+  const { containerStyle, cardStyle, overlayStyle, dimStyle, shadowStyle } =
     React.useMemo(
       () => styleInterpolator(interpolationProps),
       [styleInterpolator, interpolationProps]
     );
 
-  const onGestureEvent = React.useMemo(
+  const onGestureActivate: PanGestureConfig['onActivate'] = useLatestCallback(
+    () => {
+      clearTimeout(pendingGestureCallbackRef.current);
+      clearTimeout(pendingOnCloseCallbackRef.current);
+
+      isSwiping.setValue(TRUE);
+
+      if (!isClosingValueLockedRef.current) {
+        isClosingValueLockedRef.current = true;
+        current.closing.setValue(TRUE);
+      }
+
+      onGestureBegin?.();
+    }
+  );
+
+  const onGestureDeactivate: PanGestureConfig['onDeactivate'] =
+    useLatestCallback((event) => {
+      isSwiping.setValue(FALSE);
+
+      let distance;
+      let translation;
+      let velocity;
+
+      if (
+        gestureDirection === 'vertical' ||
+        gestureDirection === 'vertical-inverted'
+      ) {
+        distance = layout.height;
+        translation = event.translationY;
+        velocity = event.velocityY;
+      } else {
+        distance = layout.width;
+        translation = event.translationX;
+        velocity = event.velocityX;
+      }
+
+      gesture.setValue(translation);
+
+      if (event.canceled) {
+        animate({
+          closing,
+          velocity,
+        });
+
+        onGestureCanceled?.();
+
+        return;
+      }
+
+      const shouldClose =
+        (translation + velocity * gestureVelocityImpact) *
+          getInvertedMultiplier(gestureDirection, direction === 'rtl') >
+        distance / 2
+          ? velocity !== 0 || translation !== 0
+          : closing;
+
+      animate({ closing: shouldClose, velocity });
+
+      if (shouldClose) {
+        // We call onClose with a delay to make sure that the animation has already started
+        // This will make sure that the state update caused by this doesn't affect start of animation
+        pendingGestureCallbackRef.current = setTimeout(() => {
+          onClose();
+
+          // Check if the screen is still closing with a delay
+          // So state update from onClose has a chance to go through
+          // If route wasn't removed after onClose, re-open it
+          pendingOnCloseCallbackRef.current = setTimeout(() => {
+            maybeAnimate();
+          }, 32);
+        }, 16);
+      }
+
+      onGestureEnd?.();
+    });
+
+  const onGestureEvent: PanGestureConfig['onUpdate'] = React.useMemo(
     () =>
       gestureEnabled
         ? Animated.event(
             [
               {
-                nativeEvent:
-                  gestureDirection === 'vertical' ||
-                  gestureDirection === 'vertical-inverted'
-                    ? { translationY: gesture }
-                    : { translationX: gesture },
+                nativeEvent: {
+                  handlerData:
+                    gestureDirection === 'vertical' ||
+                    gestureDirection === 'vertical-inverted'
+                      ? { translationY: gesture }
+                      : { translationX: gesture },
+                },
               },
             ],
             { useNativeDriver }
@@ -488,7 +544,36 @@ function Card({
     [gesture, gestureDirection, gestureEnabled]
   );
 
-  const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
+  const panGestureConfig = React.useMemo(
+    (): PanGestureConfig => ({
+      enabled: layout.width !== 0 && gestureEnabled,
+      onActivate: onGestureActivate,
+      onDeactivate: onGestureDeactivate,
+      onUpdate: onGestureEvent,
+      disableReanimated: true,
+      useAnimated: true,
+      ...gestureActivationCriteria({
+        layout,
+        direction,
+        gestureDirection,
+        gestureResponseDistance,
+      }),
+    }),
+    [
+      direction,
+      gestureDirection,
+      gestureEnabled,
+      gestureResponseDistance,
+      layout,
+      onGestureActivate,
+      onGestureDeactivate,
+      onGestureEvent,
+    ]
+  );
+
+  const panGesture = usePanGesture(panGestureConfig);
+
+  const backgroundColor = StyleSheet.flatten(contentStyle)?.backgroundColor;
 
   const isTransparent =
     typeof backgroundColor === 'string'
@@ -505,13 +590,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>
@@ -519,32 +604,21 @@ function Card({
       <Animated.View
         style={[styles.container, containerStyle, customContainerStyle]}
       >
-        <PanGestureHandler
-          enabled={layout.width !== 0 && gestureEnabled}
-          onGestureEvent={onGestureEvent}
-          onHandlerStateChange={onGestureStateChange}
-          {...gestureActivationCriteria({
-            layout,
-            direction,
-            gestureDirection,
-            gestureResponseDistance,
-          })}
-        >
+        <GestureDetector gesture={panGesture}>
           <Animated.View
             needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
-            style={[styles.container, 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,
                 ]}
@@ -557,8 +631,11 @@ function Card({
             >
               {children}
             </CardContent>
+            {dimStyle != null ? (
+              <Animated.View style={[styles.dim, dimStyle]} />
+            ) : null}
           </Animated.View>
-        </PanGestureHandler>
+        </GestureDetector>
       </Animated.View>
     </CardAnimationContext.Provider>
   );
@@ -571,34 +648,44 @@ const styles = StyleSheet.create({
     flex: 1,
     pointerEvents: 'box-none',
   },
+  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',
+  },
   overlay: {
     flex: 1,
     backgroundColor: '#000',
     pointerEvents: 'none',
   },
+  dim: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: '#000',
+    pointerEvents: 'none',
+  },
   shadow: {
     position: 'absolute',
     pointerEvents: 'none',
   },
   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,