@react-navigation/stack 7.6.2 → 7.6.4

package/src/views/Stack/Card.tsx

@@ -11,19 +11,19 @@ import {
   type ViewStyle,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
+import useLatestCallback from 'use-latest-callback';
 
 import type {
   GestureDirection,
   Layout,
-  StackCardInterpolationProps,
   StackCardStyleInterpolator,
   TransitionSpec,
 } from '../../types';
 import { CardAnimationContext } from '../../utils/CardAnimationContext';
+import { gestureActivationCriteria } from '../../utils/gestureActivationCriteria';
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
 import { getShadowStyle } from '../../utils/getShadowStyle';
-import { memoize } from '../../utils/memoize';
 import {
   GestureState,
   PanGestureHandler,
@@ -36,7 +36,7 @@ type Props = {
   interpolationIndex: number;
   opening: boolean;
   closing: boolean;
-  next?: Animated.AnimatedInterpolation<number>;
+  next: Animated.AnimatedInterpolation<number> | undefined;
   current: Animated.AnimatedInterpolation<number>;
   gesture: Animated.Value;
   layout: Layout;
@@ -51,14 +51,16 @@ type Props = {
   onGestureCanceled: () => void;
   onGestureEnd: () => void;
   children: React.ReactNode;
-  overlay: (props: {
-    style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  }) => React.ReactNode;
+  overlay:
+    | ((props: {
+        style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+      }) => React.ReactNode)
+    | undefined;
   overlayEnabled: boolean;
-  shadowEnabled: boolean;
+  shadowEnabled: boolean | undefined;
   gestureEnabled: boolean;
   gestureResponseDistance?: number;
-  gestureVelocityImpact: number;
+  gestureVelocityImpact: number | undefined;
   transitionSpec: {
     open: TransitionSpec;
     close: TransitionSpec;
@@ -74,528 +76,524 @@ const GESTURE_VELOCITY_IMPACT = 0.3;
 const TRUE = 1;
 const FALSE = 0;
 
-/**
- * The distance of touch start from the edge of the screen where the gesture will be recognized
- */
-const GESTURE_RESPONSE_DISTANCE_HORIZONTAL = 50;
-const GESTURE_RESPONSE_DISTANCE_VERTICAL = 135;
-
 const useNativeDriver = Platform.OS !== 'web';
 
-const hasOpacityStyle = (style: any) => {
+const hasOpacityStyle = (
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>
+) => {
   if (style) {
     const flattenedStyle = StyleSheet.flatten(style);
-    return flattenedStyle.opacity != null;
+
+    return 'opacity' in flattenedStyle && flattenedStyle.opacity != null;
   }
 
   return false;
 };
 
-export class Card extends React.Component<Props> {
-  static defaultProps = {
-    shadowEnabled: false,
-    gestureEnabled: true,
-    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
-    overlay: ({
-      style,
-    }: {
-      style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-    }) =>
-      style ? (
-        <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
-      ) : null,
-  };
-
-  componentDidMount() {
-    if (!this.props.preloaded) {
-      this.animate({
-        closing: this.props.closing,
-      });
-    }
-    this.isCurrentlyMounted = true;
+const getAnimateToValue = ({
+  closing: isClosing,
+  layout: currentLayout,
+  gestureDirection: currentGestureDirection,
+  direction: currentDirection,
+  preloaded: isPreloaded,
+}: {
+  closing?: boolean;
+  layout: Layout;
+  gestureDirection: GestureDirection;
+  direction: LocaleDirection;
+  preloaded: boolean;
+}) => {
+  if (!isClosing && !isPreloaded) {
+    return 0;
   }
 
-  componentDidUpdate(prevProps: Props) {
-    const { gesture, direction, layout, gestureDirection, opening, closing } =
-      this.props;
-    const { width, height } = layout;
-
-    if (width !== prevProps.layout.width) {
-      this.layout.width.setValue(width);
-    }
-
-    if (height !== prevProps.layout.height) {
-      this.layout.height.setValue(height);
-    }
+  return getDistanceForDirection(
+    currentLayout,
+    currentGestureDirection,
+    currentDirection === 'rtl'
+  );
+};
 
-    if (gestureDirection !== prevProps.gestureDirection) {
-      this.inverted.setValue(
+const defaultOverlay = ({
+  style,
+}: {
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+}) =>
+  style ? (
+    <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
+  ) : null;
+
+function Card({
+  shadowEnabled = false,
+  gestureEnabled = true,
+  gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
+  overlay = defaultOverlay,
+  animated,
+  interpolationIndex,
+  opening,
+  closing,
+  next,
+  current,
+  gesture,
+  layout,
+  insets,
+  direction,
+  pageOverflowEnabled,
+  gestureDirection,
+  onOpen,
+  onClose,
+  onTransition,
+  onGestureBegin,
+  onGestureCanceled,
+  onGestureEnd,
+  children,
+  overlayEnabled,
+  gestureResponseDistance,
+  transitionSpec,
+  preloaded,
+  styleInterpolator,
+  containerStyle: customContainerStyle,
+  contentStyle,
+}: Props) {
+  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+
+  const didInitiallyAnimate = React.useRef(false);
+  const lastToValueRef = React.useRef<number | undefined>(undefined);
+
+  const interactionHandleRef = React.useRef<number | undefined>(undefined);
+  const animationHandleRef = React.useRef<number | undefined>(undefined);
+  const pendingGestureCallbackRef =
+    React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const [isClosing] = React.useState(() => new Animated.Value(FALSE));
+
+  const [inverted] = React.useState(
+    () =>
+      new Animated.Value(
         getInvertedMultiplier(gestureDirection, direction === 'rtl')
-      );
-    }
-
-    const toValue = this.getAnimateToValue(this.props);
-
-    if (
-      this.getAnimateToValue(prevProps) !== toValue ||
-      this.lastToValue !== toValue
-    ) {
-      // We need to trigger the animation when route was closed
-      // The route might have been closed by a `POP` action or by a gesture
-      // 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
-      this.animate({ closing });
-    } else if (opening && !prevProps.opening) {
-      // This can happen when screen somewhere below in the stack comes into focus via rearranging
-      // Also reset the animated value to make sure that the animation starts from the beginning
-      gesture.setValue(
-        getDistanceForDirection(layout, gestureDirection, direction === 'rtl')
-      );
-
-      this.animate({ closing });
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.gesture?.stopAnimation();
-    this.isCurrentlyMounted = false;
-    this.handleEndInteraction();
-  }
-
-  private isCurrentlyMounted = false;
-
-  private isClosing = new Animated.Value(FALSE);
-
-  private inverted = new Animated.Value(
-    getInvertedMultiplier(
-      this.props.gestureDirection,
-      this.props.direction === 'rtl'
-    )
+      )
   );
 
-  private layout = {
-    width: new Animated.Value(this.props.layout.width),
-    height: new Animated.Value(this.props.layout.height),
-  };
-
-  private isSwiping = new Animated.Value(FALSE);
+  const [layoutAnim] = React.useState(() => ({
+    width: new Animated.Value(layout.width),
+    height: new Animated.Value(layout.height),
+  }));
 
-  private lastToValue: number | undefined;
+  const [isSwiping] = React.useState(() => new Animated.Value(FALSE));
 
-  private interactionHandle: number | undefined;
-  private pendingGestureCallback: number | undefined;
-  private animationHandle: number | undefined;
+  const onStartInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current === undefined) {
+      interactionHandleRef.current =
+        InteractionManager.createInteractionHandle();
+    }
+  });
 
-  private animate = ({
-    closing,
-    velocity,
-  }: {
-    closing: boolean;
-    velocity?: number;
-  }) => {
-    const { animated, transitionSpec, onOpen, onClose, onTransition, gesture } =
-      this.props;
+  const onEndInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current !== undefined) {
+      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+      interactionHandleRef.current = undefined;
+    }
+  });
 
-    const toValue = this.getAnimateToValue({
-      ...this.props,
-      closing,
-    });
+  const animate = useLatestCallback(
+    ({
+      closing: isClosingParam,
+      velocity,
+    }: {
+      closing: boolean;
+      velocity?: number;
+    }) => {
+      const toValue = getAnimateToValue({
+        closing: isClosingParam,
+        layout,
+        gestureDirection,
+        direction,
+        preloaded,
+      });
 
-    this.lastToValue = toValue;
+      lastToValueRef.current = toValue;
+      isClosing.setValue(isClosingParam ? TRUE : FALSE);
 
-    this.isClosing.setValue(closing ? TRUE : FALSE);
+      const spec = isClosingParam ? transitionSpec.close : transitionSpec.open;
+      const animation =
+        spec.animation === 'spring' ? Animated.spring : Animated.timing;
 
-    const spec = closing ? transitionSpec.close : transitionSpec.open;
+      clearTimeout(pendingGestureCallbackRef.current);
 
-    const animation =
-      spec.animation === 'spring' ? Animated.spring : Animated.timing;
+      if (animationHandleRef.current !== undefined) {
+        cancelAnimationFrame(animationHandleRef.current);
+      }
 
-    clearTimeout(this.pendingGestureCallback);
+      onTransition?.({
+        closing: isClosingParam,
+        gesture: velocity !== undefined,
+      });
 
-    if (this.animationHandle !== undefined) {
-      cancelAnimationFrame(this.animationHandle);
-    }
+      const onFinish = () => {
+        if (isClosingParam) {
+          onClose();
+        } else {
+          onOpen();
+        }
 
-    onTransition?.({ closing, gesture: velocity !== undefined });
+        animationHandleRef.current = requestAnimationFrame(() => {
+          if (didInitiallyAnimate.current) {
+            // Make sure to re-open screen if it wasn't removed
+            forceUpdate();
+          }
+        });
+      };
 
-    const onFinish = () => {
-      if (closing) {
-        onClose();
+      if (animated) {
+        onStartInteraction();
+        animation(gesture, {
+          ...spec.config,
+          velocity,
+          toValue,
+          useNativeDriver,
+          isInteraction: false,
+        }).start(({ finished }) => {
+          onEndInteraction();
+          clearTimeout(pendingGestureCallbackRef.current);
+
+          if (finished) {
+            onFinish();
+          }
+        });
       } else {
-        onOpen();
+        onFinish();
       }
+    }
+  );
 
-      this.animationHandle = requestAnimationFrame(() => {
-        if (this.isCurrentlyMounted) {
-          // Make sure to re-open screen if it wasn't removed
-          this.forceUpdate();
-        }
-      });
-    };
+  const onGestureStateChange = useLatestCallback(
+    ({ nativeEvent }: PanGestureHandlerGestureEvent) => {
+      switch (nativeEvent.state) {
+        case GestureState.ACTIVE:
+          isSwiping.setValue(TRUE);
+          onStartInteraction();
+          onGestureBegin?.();
+          break;
+        case GestureState.CANCELLED:
+        case GestureState.FAILED: {
+          isSwiping.setValue(FALSE);
+          onEndInteraction();
+
+          const velocity =
+            gestureDirection === 'vertical' ||
+            gestureDirection === 'vertical-inverted'
+              ? nativeEvent.velocityY
+              : nativeEvent.velocityX;
 
-    if (animated) {
-      this.handleStartInteraction();
+          animate({
+            closing,
+            velocity,
+          });
 
-      animation(gesture, {
-        ...spec.config,
-        velocity,
-        toValue,
-        useNativeDriver,
-        isInteraction: false,
-      }).start(({ finished }) => {
-        this.handleEndInteraction();
+          onGestureCanceled?.();
+          break;
+        }
+        case GestureState.END: {
+          isSwiping.setValue(FALSE);
 
-        clearTimeout(this.pendingGestureCallback);
+          let distance;
+          let translation;
+          let velocity;
 
-        if (finished) {
-          onFinish();
+          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;
         }
-      });
-    } else {
-      onFinish();
+      }
     }
-  };
+  );
 
-  private getAnimateToValue = ({
-    closing,
-    layout,
+  React.useLayoutEffect(() => {
+    layoutAnim.width.setValue(layout.width);
+    layoutAnim.height.setValue(layout.height);
+    inverted.setValue(
+      getInvertedMultiplier(gestureDirection, direction === 'rtl')
+    );
+  }, [
     gestureDirection,
     direction,
-    preloaded,
-  }: {
-    closing?: boolean;
+    inverted,
+    layoutAnim.width,
+    layoutAnim.height,
+    layout.width,
+    layout.height,
+  ]);
+
+  const previousPropsRef = React.useRef<{
+    opening: boolean;
+    closing: boolean;
     layout: Layout;
-    gestureDirection: GestureDirection;
     direction: LocaleDirection;
+    gestureDirection: GestureDirection;
     preloaded: boolean;
-  }) => {
-    if (!closing && !preloaded) {
-      return 0;
-    }
+  } | null>(null);
 
-    return getDistanceForDirection(
-      layout,
-      gestureDirection,
-      direction === 'rtl'
-    );
-  };
+  React.useEffect(() => {
+    return () => {
+      onEndInteraction();
 
-  private handleStartInteraction = () => {
-    if (this.interactionHandle === undefined) {
-      this.interactionHandle = InteractionManager.createInteractionHandle();
-    }
-  };
+      if (animationHandleRef.current) {
+        cancelAnimationFrame(animationHandleRef.current);
+      }
 
-  private handleEndInteraction = () => {
-    if (this.interactionHandle !== undefined) {
-      InteractionManager.clearInteractionHandle(this.interactionHandle);
-      this.interactionHandle = undefined;
-    }
-  };
+      clearTimeout(pendingGestureCallbackRef.current);
+    };
 
-  private handleGestureStateChange = ({
-    nativeEvent,
-  }: PanGestureHandlerGestureEvent) => {
-    const {
-      direction,
-      layout,
-      onClose,
-      onGestureBegin,
-      onGestureCanceled,
-      onGestureEnd,
-      gestureDirection,
-      gestureVelocityImpact,
-    } = this.props;
-
-    switch (nativeEvent.state) {
-      case GestureState.ACTIVE:
-        this.isSwiping.setValue(TRUE);
-        this.handleStartInteraction();
-        onGestureBegin?.();
-        break;
-      case GestureState.CANCELLED:
-      case GestureState.FAILED: {
-        this.isSwiping.setValue(FALSE);
-        this.handleEndInteraction();
-
-        const velocity =
-          gestureDirection === 'vertical' ||
-          gestureDirection === 'vertical-inverted'
-            ? nativeEvent.velocityY
-            : nativeEvent.velocityX;
-
-        this.animate({
-          closing: this.props.closing,
-          velocity,
-        });
+    // We only want to clean up the animation on unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-        onGestureCanceled?.();
-        break;
-      }
-      case GestureState.END: {
-        this.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 timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-        const closing =
-          (translation + velocity * gestureVelocityImpact) *
-            getInvertedMultiplier(gestureDirection, direction === 'rtl') >
-          distance / 2
-            ? velocity !== 0 || translation !== 0
-            : this.props.closing;
-
-        this.animate({ closing, velocity });
-
-        if (closing) {
-          // 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
-          this.pendingGestureCallback = 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
-            this.forceUpdate();
-          }, 32) as any as number;
-        }
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
+    }
 
-        onGestureEnd?.();
-        break;
+    if (!didInitiallyAnimate.current) {
+      // Animate the card in on initial mount
+      // Wrap in setTimeout to ensure animation starts after
+      // 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);
+      }
+      timeoutRef.current = setTimeout(() => {
+        didInitiallyAnimate.current = true;
+        animate({ closing });
+      }, 0);
+    } else {
+      const previousOpening = previousPropsRef.current?.opening;
+      const previousToValue = previousPropsRef.current
+        ? getAnimateToValue(previousPropsRef.current)
+        : null;
+
+      const toValue = getAnimateToValue({
+        closing,
+        layout,
+        gestureDirection,
+        direction,
+        preloaded,
+      });
+
+      if (previousToValue !== toValue || lastToValueRef.current !== toValue) {
+        // We need to trigger the animation when route was closed
+        // The route might have been closed by a `POP` action or by a gesture
+        // 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 });
+      } else if (
+        typeof previousOpening === 'boolean' &&
+        opening &&
+        !previousOpening
+      ) {
+        // This can happen when screen somewhere below in the stack comes into focus via rearranging
+        // Also reset the animated value to make sure that the animation starts from the beginning
+        gesture.setValue(
+          getDistanceForDirection(layout, gestureDirection, direction === 'rtl')
+        );
+
+        animate({ closing });
       }
     }
-  };
 
-  // Memoize this to avoid extra work on re-render
-  private getInterpolatedStyle = memoize(
-    (
-      styleInterpolator: StackCardStyleInterpolator,
-      animation: StackCardInterpolationProps
-    ) => styleInterpolator(animation)
-  );
+    previousPropsRef.current = {
+      opening,
+      closing,
+      layout,
+      gestureDirection,
+      direction,
+      preloaded,
+    };
+  }, [
+    animate,
+    closing,
+    direction,
+    gesture,
+    gestureDirection,
+    layout,
+    opening,
+    preloaded,
+  ]);
 
-  // Keep track of the animation context when deps changes.
-  private getCardAnimation = memoize(
-    (
-      interpolationIndex: number,
-      current: Animated.AnimatedInterpolation<number>,
-      next: Animated.AnimatedInterpolation<number> | undefined,
-      layout: Layout,
-      insetTop: number,
-      insetRight: number,
-      insetBottom: number,
-      insetLeft: number
-    ) => ({
+  const interpolationProps = React.useMemo(
+    () => ({
       index: interpolationIndex,
       current: { progress: current },
       next: next && { progress: next },
-      closing: this.isClosing,
-      swiping: this.isSwiping,
-      inverted: this.inverted,
+      closing: isClosing,
+      swiping: isSwiping,
+      inverted,
       layouts: {
         screen: layout,
       },
       insets: {
-        top: insetTop,
-        right: insetRight,
-        bottom: insetBottom,
-        left: insetLeft,
+        top: insets.top,
+        right: insets.right,
+        bottom: insets.bottom,
+        left: insets.left,
       },
-    })
-  );
-
-  private gestureActivationCriteria() {
-    const { direction, layout, gestureDirection, gestureResponseDistance } =
-      this.props;
-    const enableTrackpadTwoFingerGesture = true;
-
-    const distance =
-      gestureResponseDistance !== undefined
-        ? gestureResponseDistance
-        : gestureDirection === 'vertical' ||
-            gestureDirection === 'vertical-inverted'
-          ? GESTURE_RESPONSE_DISTANCE_VERTICAL
-          : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-
-    if (gestureDirection === 'vertical') {
-      return {
-        maxDeltaX: 15,
-        minOffsetY: 5,
-        hitSlop: { bottom: -layout.height + distance },
-        enableTrackpadTwoFingerGesture,
-      };
-    } else if (gestureDirection === 'vertical-inverted') {
-      return {
-        maxDeltaX: 15,
-        minOffsetY: -5,
-        hitSlop: { top: -layout.height + distance },
-        enableTrackpadTwoFingerGesture,
-      };
-    } else {
-      const hitSlop = -layout.width + distance;
-      const invertedMultiplier = getInvertedMultiplier(
-        gestureDirection,
-        direction === 'rtl'
-      );
-
-      if (invertedMultiplier === 1) {
-        return {
-          minOffsetX: 5,
-          maxDeltaY: 20,
-          hitSlop: { right: hitSlop },
-          enableTrackpadTwoFingerGesture,
-        };
-      } else {
-        return {
-          minOffsetX: -5,
-          maxDeltaY: 20,
-          hitSlop: { left: hitSlop },
-          enableTrackpadTwoFingerGesture,
-        };
-      }
-    }
-  }
-
-  render() {
-    const {
-      styleInterpolator,
-      interpolationIndex,
-      current,
-      gesture,
-      next,
-      layout,
-      insets,
-      overlay,
-      overlayEnabled,
-      shadowEnabled,
-      gestureEnabled,
-      gestureDirection,
-      pageOverflowEnabled,
-      children,
-      containerStyle: customContainerStyle,
-      contentStyle,
-    } = this.props;
-
-    const interpolationProps = this.getCardAnimation(
+    }),
+    [
       interpolationIndex,
       current,
       next,
+      isClosing,
+      isSwiping,
+      inverted,
       layout,
       insets.top,
       insets.right,
       insets.bottom,
-      insets.left
-    );
+      insets.left,
+    ]
+  );
 
-    const interpolatedStyle = this.getInterpolatedStyle(
-      styleInterpolator,
-      interpolationProps
+  const { containerStyle, cardStyle, overlayStyle, shadowStyle } =
+    React.useMemo(
+      () => styleInterpolator(interpolationProps),
+      [styleInterpolator, interpolationProps]
     );
 
-    const { containerStyle, cardStyle, overlayStyle, shadowStyle } =
-      interpolatedStyle;
-
-    const handleGestureEvent = gestureEnabled
-      ? Animated.event(
-          [
-            {
-              nativeEvent:
-                gestureDirection === 'vertical' ||
-                gestureDirection === 'vertical-inverted'
-                  ? { translationY: gesture }
-                  : { translationX: gesture },
-            },
-          ],
-          { useNativeDriver }
-        )
-      : undefined;
-
-    const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
-    const isTransparent =
-      typeof backgroundColor === 'string'
-        ? Color(backgroundColor).alpha() === 0
-        : false;
-
-    return (
-      <CardAnimationContext.Provider value={interpolationProps}>
-        {Platform.OS !== 'web' ? (
-          <Animated.View
-            style={{
-              // This is a dummy style that doesn't actually change anything visually.
-              // 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,
-            }}
-            // 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 ? (
-          <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
-            {overlay({ style: overlayStyle })}
-          </View>
-        ) : null}
+  const onGestureEvent = React.useMemo(
+    () =>
+      gestureEnabled
+        ? Animated.event(
+            [
+              {
+                nativeEvent:
+                  gestureDirection === 'vertical' ||
+                  gestureDirection === 'vertical-inverted'
+                    ? { translationY: gesture }
+                    : { translationX: gesture },
+              },
+            ],
+            { useNativeDriver }
+          )
+        : undefined,
+    [gesture, gestureDirection, gestureEnabled]
+  );
+
+  const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
+
+  const isTransparent =
+    typeof backgroundColor === 'string'
+      ? Color(backgroundColor).alpha() === 0
+      : false;
+
+  return (
+    <CardAnimationContext.Provider value={interpolationProps}>
+      {Platform.OS !== 'web' ? (
         <Animated.View
-          style={[styles.container, containerStyle, customContainerStyle]}
-          pointerEvents="box-none"
+          style={{
+            // This is a dummy style that doesn't actually change anything visually.
+            // 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,
+          }}
+          // 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 ? (
+        <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+          {overlay({ style: overlayStyle })}
+        </View>
+      ) : null}
+      <Animated.View
+        pointerEvents="box-none"
+        style={[styles.container, containerStyle, customContainerStyle]}
+      >
+        <PanGestureHandler
+          enabled={layout.width !== 0 && gestureEnabled}
+          onGestureEvent={onGestureEvent}
+          onHandlerStateChange={onGestureStateChange}
+          {...gestureActivationCriteria({
+            layout,
+            direction,
+            gestureDirection,
+            gestureResponseDistance,
+          })}
         >
-          <PanGestureHandler
-            enabled={layout.width !== 0 && gestureEnabled}
-            onGestureEvent={handleGestureEvent}
-            onHandlerStateChange={this.handleGestureStateChange}
-            {...this.gestureActivationCriteria()}
+          <Animated.View
+            pointerEvents="box-none"
+            needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
+            style={[styles.container, cardStyle]}
           >
-            <Animated.View
-              needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
-              style={[styles.container, cardStyle]}
+            {shadowEnabled && shadowStyle && !isTransparent ? (
+              <Animated.View
+                pointerEvents="none"
+                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],
+                  { backgroundColor },
+                  shadowStyle,
+                ]}
+              />
+            ) : null}
+            <CardContent
+              enabled={pageOverflowEnabled}
+              layout={layout}
+              style={contentStyle}
             >
-              {shadowEnabled && shadowStyle && !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],
-                    { backgroundColor },
-                    shadowStyle,
-                  ]}
-                  pointerEvents="none"
-                />
-              ) : null}
-              <CardContent
-                enabled={pageOverflowEnabled}
-                layout={layout}
-                style={contentStyle}
-              >
-                {children}
-              </CardContent>
-            </Animated.View>
-          </PanGestureHandler>
-        </Animated.View>
-      </CardAnimationContext.Provider>
-    );
-  }
+              {children}
+            </CardContent>
+          </Animated.View>
+        </PanGestureHandler>
+      </Animated.View>
+    </CardAnimationContext.Provider>
+  );
 }
 
+export { Card };
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,