@amazon-devices/react-navigation__stack 7.0.1759135970 → 8.0.9000000000

package/src/views/Stack/Card.tsx

@@ -1,46 +1,47 @@
+import type { LocaleDirection } from '@amazon-devices/react-navigation__native';
 import Color from 'color';
 import * as React from 'react';
 import {
   Animated,
   InteractionManager,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewProps,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 import type { EdgeInsets } from '@amazon-devices/react-native-safe-area-context';
+import useLatestCallback from 'use-latest-callback';
 
-import { forModalPresentationIOS } from '../../TransitionConfigs/CardStyleInterpolators';
 import type {
   GestureDirection,
   Layout,
-  StackCardInterpolationProps,
   StackCardStyleInterpolator,
   TransitionSpec,
 } from '../../types';
-import CardAnimationContext from '../../utils/CardAnimationContext';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
-import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
-import memoize from '../../utils/memoize';
+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 {
   GestureState,
   PanGestureHandler,
-  PanGestureHandlerGestureEvent,
+  type PanGestureHandlerGestureEvent,
 } from '../GestureHandler';
-import ModalStatusBarManager from '../ModalStatusBarManager';
-import CardSheet, { CardSheetRef } from './CardSheet';
+import { CardContent } from './CardContent';
 
-type Props = ViewProps & {
+type Props = {
+  animated: boolean;
   interpolationIndex: number;
+  opening: boolean;
   closing: boolean;
-  next?: Animated.AnimatedInterpolation<number>;
+  next: Animated.AnimatedInterpolation<number> | undefined;
   current: Animated.AnimatedInterpolation<number>;
   gesture: Animated.Value;
   layout: Layout;
   insets: EdgeInsets;
-  headerDarkContent: boolean | undefined;
+  direction: LocaleDirection;
   pageOverflowEnabled: boolean;
   gestureDirection: GestureDirection;
   onOpen: () => void;
@@ -50,18 +51,21 @@ type Props = ViewProps & {
   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;
   };
+  preloaded: boolean;
   styleInterpolator: StackCardStyleInterpolator;
   containerStyle?: StyleProp<ViewStyle>;
   contentStyle?: StyleProp<ViewStyle>;
@@ -72,440 +76,454 @@ 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 default 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() {
-    this.animate({ closing: this.props.closing });
-    this.isCurrentlyMounted = true;
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const { layout, gestureDirection, 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);
-    }
-
-    if (gestureDirection !== prevProps.gestureDirection) {
-      this.inverted.setValue(getInvertedMultiplier(gestureDirection));
-    }
-
-    const toValue = this.getAnimateToValue(this.props);
-
-    if (
-      this.getAnimateToValue(prevProps) !== toValue ||
-      this.lastToValue !== toValue
-    ) {
-      // We need to trigger the animation when route was closed
-      // Thr 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 });
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.gesture.stopAnimation();
-    this.isCurrentlyMounted = false;
-    this.handleEndInteraction();
+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;
   }
 
-  private isCurrentlyMounted = false;
-
-  private isClosing = new Animated.Value(FALSE);
-
-  private inverted = new Animated.Value(
-    getInvertedMultiplier(this.props.gestureDirection)
+  return getDistanceForDirection(
+    currentLayout,
+    currentGestureDirection,
+    currentDirection === '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);
-
-  private interactionHandle: number | undefined;
-
-  private pendingGestureCallback: number | undefined;
-
-  private lastToValue: number | undefined;
-
-  private animate = ({
-    closing,
-    velocity,
-  }: {
-    closing: boolean;
-    velocity?: number;
-  }) => {
-    const { gesture, transitionSpec, onOpen, onClose, onTransition } =
-      this.props;
-
-    const toValue = this.getAnimateToValue({
-      ...this.props,
-      closing,
-    });
-
-    this.lastToValue = toValue;
-
-    this.isClosing.setValue(closing ? TRUE : FALSE);
+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 spec = closing ? transitionSpec.close : transitionSpec.open;
+  const [layoutAnim] = React.useState(() => ({
+    width: new Animated.Value(layout.width),
+    height: new Animated.Value(layout.height),
+  }));
 
-    const animation =
-      spec.animation === 'spring' ? Animated.spring : Animated.timing;
+  const [isSwiping] = React.useState(() => new Animated.Value(FALSE));
 
-    this.setPointerEventsEnabled(!closing);
-    this.handleStartInteraction();
+  const onStartInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current === undefined) {
+      interactionHandleRef.current =
+        InteractionManager.createInteractionHandle();
+    }
+  });
 
-    clearTimeout(this.pendingGestureCallback);
+  const onEndInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current !== undefined) {
+      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+      interactionHandleRef.current = undefined;
+    }
+  });
 
-    onTransition?.({ closing, gesture: velocity !== undefined });
-    animation(gesture, {
-      ...spec.config,
+  const animate = useLatestCallback(
+    ({
+      closing: isClosingParam,
       velocity,
-      toValue,
-      useNativeDriver,
-      isInteraction: false,
-    }).start(({ finished }) => {
-      this.handleEndInteraction();
+    }: {
+      closing: boolean;
+      velocity?: number;
+    }) => {
+      const toValue = getAnimateToValue({
+        closing: isClosingParam,
+        layout,
+        gestureDirection,
+        direction,
+        preloaded,
+      });
+
+      lastToValueRef.current = toValue;
+      isClosing.setValue(isClosingParam ? TRUE : FALSE);
+
+      const spec = isClosingParam ? transitionSpec.close : transitionSpec.open;
+      const animation =
+        spec.animation === 'spring' ? Animated.spring : Animated.timing;
+
+      clearTimeout(pendingGestureCallbackRef.current);
+
+      if (animationHandleRef.current !== undefined) {
+        cancelAnimationFrame(animationHandleRef.current);
+      }
 
-      clearTimeout(this.pendingGestureCallback);
+      onTransition?.({
+        closing: isClosingParam,
+        gesture: velocity !== undefined,
+      });
 
-      if (finished) {
-        if (closing) {
+      const onFinish = () => {
+        if (isClosingParam) {
           onClose();
         } else {
           onOpen();
         }
 
-        if (this.isCurrentlyMounted) {
-          // Make sure to re-open screen if it wasn't removed
-          this.forceUpdate();
+        animationHandleRef.current = requestAnimationFrame(() => {
+          if (didInitiallyAnimate.current) {
+            // Make sure to re-open screen if it wasn't removed
+            forceUpdate();
+          }
+        });
+      };
+
+      if (animated) {
+        onStartInteraction();
+        animation(gesture, {
+          ...spec.config,
+          velocity,
+          toValue,
+          useNativeDriver,
+          isInteraction: false,
+        }).start(({ finished }) => {
+          onEndInteraction();
+          clearTimeout(pendingGestureCallbackRef.current);
+
+          if (finished) {
+            onFinish();
+          }
+        });
+      } else {
+        onFinish();
+      }
+    }
+  );
+
+  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;
+
+          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;
         }
       }
-    });
-  };
+    }
+  );
 
-  private getAnimateToValue = ({
-    closing,
-    layout,
+  React.useLayoutEffect(() => {
+    layoutAnim.width.setValue(layout.width);
+    layoutAnim.height.setValue(layout.height);
+    inverted.setValue(
+      getInvertedMultiplier(gestureDirection, direction === 'rtl')
+    );
+  }, [
     gestureDirection,
-  }: {
-    closing?: boolean;
+    direction,
+    inverted,
+    layoutAnim.width,
+    layoutAnim.height,
+    layout.width,
+    layout.height,
+  ]);
+
+  const previousPropsRef = React.useRef<{
+    opening: boolean;
+    closing: boolean;
     layout: Layout;
+    direction: LocaleDirection;
     gestureDirection: GestureDirection;
-  }) => {
-    if (!closing) {
-      return 0;
-    }
+    preloaded: boolean;
+  } | null>(null);
 
-    return getDistanceForDirection(layout, gestureDirection);
-  };
+  React.useEffect(() => {
+    return () => {
+      onEndInteraction();
 
-  private setPointerEventsEnabled = (enabled: boolean) => {
-    const pointerEvents = enabled ? 'box-none' : 'none';
+      if (animationHandleRef.current) {
+        cancelAnimationFrame(animationHandleRef.current);
+      }
 
-    this.ref.current?.setPointerEvents(pointerEvents);
-  };
+      clearTimeout(pendingGestureCallbackRef.current);
+    };
 
-  private handleStartInteraction = () => {
-    if (this.interactionHandle === undefined) {
-      this.interactionHandle = InteractionManager.createInteractionHandle();
-    }
-  };
+    // We only want to clean up the animation on unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  private handleEndInteraction = () => {
-    if (this.interactionHandle !== undefined) {
-      InteractionManager.clearInteractionHandle(this.interactionHandle);
-      this.interactionHandle = undefined;
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
     }
-  };
 
-  private handleGestureStateChange = ({
-    nativeEvent,
-  }: PanGestureHandlerGestureEvent) => {
-    const {
-      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: {
-        this.isSwiping.setValue(FALSE);
-        this.handleEndInteraction();
-
-        const velocity =
-          gestureDirection === 'vertical' ||
-          gestureDirection === 'vertical-inverted'
-            ? nativeEvent.velocityY
-            : nativeEvent.velocityX;
-
-        this.animate({ closing: this.props.closing, velocity });
-
-        onGestureCanceled?.();
-        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);
       }
-      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 closing =
-          (translation + velocity * gestureVelocityImpact) *
-            getInvertedMultiplier(gestureDirection) >
-          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;
-        }
-
-        onGestureEnd?.();
-        break;
+      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 { 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);
-
-      if (invertedMultiplier === 1) {
-        return {
-          minOffsetX: 5,
-          maxDeltaY: 20,
-          hitSlop: { right: hitSlop },
-          enableTrackpadTwoFingerGesture,
-        };
-      } else {
-        return {
-          minOffsetX: -5,
-          maxDeltaY: 20,
-          hitSlop: { left: hitSlop },
-          enableTrackpadTwoFingerGesture,
-        };
-      }
-    }
-  }
-
-  private ref = React.createRef<CardSheetRef>();
-
-  render() {
-    const {
-      styleInterpolator,
-      interpolationIndex,
-      current,
-      gesture,
-      next,
-      layout,
-      insets,
-      overlay,
-      overlayEnabled,
-      shadowEnabled,
-      gestureEnabled,
-      gestureDirection,
-      pageOverflowEnabled,
-      headerDarkContent,
-      children,
-      containerStyle: customContainerStyle,
-      contentStyle,
-      ...rest
-    } = 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}>
-        {
-          // StatusBar messes with translucent status bar on Android
-          // So we should only enable it on iOS
-          Platform.OS === 'ios' &&
-          overlayEnabled &&
-          next &&
-          getIsModalPresentation(styleInterpolator) ? (
-            <ModalStatusBarManager
-              dark={headerDarkContent}
-              layout={layout}
-              insets={insets}
-              style={cardStyle}
-            />
-          ) : 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={{
             // This is a dummy style that doesn't actually change anything visually.
@@ -517,75 +535,64 @@ export default class Card extends React.Component<Props> {
           // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
           collapsable={false}
         />
-        <View
-          pointerEvents="box-none"
-          // Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
-          // This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
-          collapsable={false}
-          {...rest}
+      ) : 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,
+          })}
         >
-          {overlayEnabled ? (
-            <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
-              {overlay({ style: overlayStyle })}
-            </View>
-          ) : null}
           <Animated.View
-            style={[styles.container, containerStyle, customContainerStyle]}
             pointerEvents="box-none"
+            needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
+            style={[styles.container, cardStyle]}
           >
-            <PanGestureHandler
-              enabled={layout.width !== 0 && gestureEnabled}
-              onGestureEvent={handleGestureEvent}
-              onHandlerStateChange={this.handleGestureStateChange}
-              {...this.gestureActivationCriteria()}
-            >
+            {shadowEnabled && shadowStyle && !isTransparent ? (
               <Animated.View
-                needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
-                style={[styles.container, cardStyle]}
-              >
-                {shadowEnabled && shadowStyle && !isTransparent ? (
-                  <Animated.View
-                    style={[
-                      styles.shadow,
-                      gestureDirection === 'horizontal'
-                        ? [styles.shadowHorizontal, styles.shadowLeft]
-                        : gestureDirection === 'horizontal-inverted'
-                        ? [styles.shadowHorizontal, styles.shadowRight]
-                        : gestureDirection === 'vertical'
+                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,
-                    ]}
-                    pointerEvents="none"
-                  />
-                ) : null}
-                <CardSheet
-                  ref={this.ref}
-                  enabled={pageOverflowEnabled}
-                  layout={layout}
-                  style={contentStyle}
-                >
-                  {children}
-                </CardSheet>
-              </Animated.View>
-            </PanGestureHandler>
+                  { backgroundColor },
+                  shadowStyle,
+                ]}
+              />
+            ) : null}
+            <CardContent
+              enabled={pageOverflowEnabled}
+              layout={layout}
+              style={contentStyle}
+            >
+              {children}
+            </CardContent>
           </Animated.View>
-        </View>
-      </CardAnimationContext.Provider>
-    );
-  }
+        </PanGestureHandler>
+      </Animated.View>
+    </CardAnimationContext.Provider>
+  );
 }
 
-export const getIsModalPresentation = (
-  cardStyleInterpolator: StackCardStyleInterpolator
-) => {
-  return (
-    cardStyleInterpolator === forModalPresentationIOS ||
-    // Handle custom modal presentation interpolators as well
-    cardStyleInterpolator.name === 'forModalPresentationIOS'
-  );
-};
+export { Card };
 
 const styles = StyleSheet.create({
   container: {
@@ -597,27 +604,38 @@ const styles = StyleSheet.create({
   },
   shadow: {
     position: 'absolute',
-    shadowRadius: 5,
-    shadowColor: '#000',
-    shadowOpacity: 0.3,
   },
   shadowHorizontal: {
     top: 0,
     bottom: 0,
     width: 3,
-    shadowOffset: { width: -1, height: 1 },
+    ...getShadowStyle({
+      offset: {
+        width: -1,
+        height: 1,
+      },
+      radius: 5,
+      opacity: 0.3,
+    }),
   },
-  shadowLeft: {
-    left: 0,
+  shadowStart: {
+    start: 0,
   },
-  shadowRight: {
-    right: 0,
+  shadowEnd: {
+    end: 0,
   },
   shadowVertical: {
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     height: 3,
-    shadowOffset: { width: 1, height: -1 },
+    ...getShadowStyle({
+      offset: {
+        width: 1,
+        height: -1,
+      },
+      radius: 5,
+      opacity: 0.3,
+    }),
   },
   shadowTop: {
     top: 0,