@amazon-devices/react-navigation__stack 7.0.1759135970 → 8.0.9000000000

package/lib/module/views/Stack/Card.js

@@ -1,203 +1,184 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+"use strict";
+
 import Color from 'color';
 import * as React from 'react';
 import { Animated, InteractionManager, Platform, StyleSheet, View } from 'react-native';
-import { forModalPresentationIOS } from '../../TransitionConfigs/CardStyleInterpolators';
-import CardAnimationContext from '../../utils/CardAnimationContext';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
-import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
-import memoize from '../../utils/memoize';
+import useLatestCallback from 'use-latest-callback';
+import { CardAnimationContext } from "../../utils/CardAnimationContext.js";
+import { gestureActivationCriteria } from "../../utils/gestureActivationCriteria.js";
+import { getDistanceForDirection } from "../../utils/getDistanceForDirection.js";
+import { getInvertedMultiplier } from "../../utils/getInvertedMultiplier.js";
+import { getShadowStyle } from "../../utils/getShadowStyle.js";
 import { GestureState, PanGestureHandler } from '../GestureHandler';
-import ModalStatusBarManager from '../ModalStatusBarManager';
-import CardSheet from './CardSheet';
+import { CardContent } from "./CardContent.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 => {
   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 {
-  static defaultProps = {
-    shadowEnabled: false,
-    gestureEnabled: true,
-    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
-    overlay: ({
-      style
-    }) => style ? /*#__PURE__*/React.createElement(Animated.View, {
-      pointerEvents: "none",
-      style: [styles.overlay, style]
-    }) : null
-  };
-  componentDidMount() {
-    this.animate({
-      closing: this.props.closing
-    });
-    this.isCurrentlyMounted = true;
+const getAnimateToValue = ({
+  closing: isClosing,
+  layout: currentLayout,
+  gestureDirection: currentGestureDirection,
+  direction: currentDirection,
+  preloaded: isPreloaded
+}) => {
+  if (!isClosing && !isPreloaded) {
+    return 0;
   }
-  componentDidUpdate(prevProps) {
-    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));
+  return getDistanceForDirection(currentLayout, currentGestureDirection, currentDirection === 'rtl');
+};
+const defaultOverlay = ({
+  style
+}) => style ? /*#__PURE__*/_jsx(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
+}) {
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  const didInitiallyAnimate = React.useRef(false);
+  const lastToValueRef = React.useRef(undefined);
+  const interactionHandleRef = React.useRef(undefined);
+  const animationHandleRef = React.useRef(undefined);
+  const pendingGestureCallbackRef = React.useRef(undefined);
+  const [isClosing] = React.useState(() => new Animated.Value(FALSE));
+  const [inverted] = React.useState(() => new Animated.Value(getInvertedMultiplier(gestureDirection, direction === 'rtl')));
+  const [layoutAnim] = React.useState(() => ({
+    width: new Animated.Value(layout.width),
+    height: new Animated.Value(layout.height)
+  }));
+  const [isSwiping] = React.useState(() => new Animated.Value(FALSE));
+  const onStartInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current === undefined) {
+      interactionHandleRef.current = InteractionManager.createInteractionHandle();
     }
-    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
-      });
+  });
+  const onEndInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current !== undefined) {
+      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+      interactionHandleRef.current = undefined;
     }
-  }
-  componentWillUnmount() {
-    this.props.gesture.stopAnimation();
-    this.isCurrentlyMounted = false;
-    this.handleEndInteraction();
-  }
-  isCurrentlyMounted = false;
-  isClosing = new Animated.Value(FALSE);
-  inverted = new Animated.Value(getInvertedMultiplier(this.props.gestureDirection));
-  layout = {
-    width: new Animated.Value(this.props.layout.width),
-    height: new Animated.Value(this.props.layout.height)
-  };
-  isSwiping = new Animated.Value(FALSE);
-  animate = ({
-    closing,
+  });
+  const animate = useLatestCallback(({
+    closing: isClosingParam,
     velocity
   }) => {
-    const {
-      gesture,
-      transitionSpec,
-      onOpen,
-      onClose,
-      onTransition
-    } = this.props;
-    const toValue = this.getAnimateToValue({
-      ...this.props,
-      closing
+    const toValue = getAnimateToValue({
+      closing: isClosingParam,
+      layout,
+      gestureDirection,
+      direction,
+      preloaded
     });
-    this.lastToValue = toValue;
-    this.isClosing.setValue(closing ? TRUE : FALSE);
-    const spec = closing ? transitionSpec.close : transitionSpec.open;
+    lastToValueRef.current = toValue;
+    isClosing.setValue(isClosingParam ? TRUE : FALSE);
+    const spec = isClosingParam ? transitionSpec.close : transitionSpec.open;
     const animation = spec.animation === 'spring' ? Animated.spring : Animated.timing;
-    this.setPointerEventsEnabled(!closing);
-    this.handleStartInteraction();
-    clearTimeout(this.pendingGestureCallback);
-    onTransition === null || onTransition === void 0 || onTransition({
-      closing,
+    clearTimeout(pendingGestureCallbackRef.current);
+    if (animationHandleRef.current !== undefined) {
+      cancelAnimationFrame(animationHandleRef.current);
+    }
+    onTransition?.({
+      closing: isClosingParam,
       gesture: velocity !== undefined
     });
-    animation(gesture, {
-      ...spec.config,
-      velocity,
-      toValue,
-      useNativeDriver,
-      isInteraction: false
-    }).start(({
-      finished
-    }) => {
-      this.handleEndInteraction();
-      clearTimeout(this.pendingGestureCallback);
-      if (finished) {
-        if (closing) {
-          onClose();
-        } else {
-          onOpen();
-        }
-        if (this.isCurrentlyMounted) {
+    const onFinish = () => {
+      if (isClosingParam) {
+        onClose();
+      } else {
+        onOpen();
+      }
+      animationHandleRef.current = requestAnimationFrame(() => {
+        if (didInitiallyAnimate.current) {
           // Make sure to re-open screen if it wasn't removed
-          this.forceUpdate();
+          forceUpdate();
         }
-      }
-    });
-  };
-  getAnimateToValue = ({
-    closing,
-    layout,
-    gestureDirection
-  }) => {
-    if (!closing) {
-      return 0;
-    }
-    return getDistanceForDirection(layout, gestureDirection);
-  };
-  setPointerEventsEnabled = enabled => {
-    var _this$ref$current;
-    const pointerEvents = enabled ? 'box-none' : 'none';
-    (_this$ref$current = this.ref.current) === null || _this$ref$current === void 0 || _this$ref$current.setPointerEvents(pointerEvents);
-  };
-  handleStartInteraction = () => {
-    if (this.interactionHandle === undefined) {
-      this.interactionHandle = InteractionManager.createInteractionHandle();
-    }
-  };
-  handleEndInteraction = () => {
-    if (this.interactionHandle !== undefined) {
-      InteractionManager.clearInteractionHandle(this.interactionHandle);
-      this.interactionHandle = undefined;
+      });
+    };
+    if (animated) {
+      onStartInteraction();
+      animation(gesture, {
+        ...spec.config,
+        velocity,
+        toValue,
+        useNativeDriver,
+        isInteraction: false
+      }).start(({
+        finished
+      }) => {
+        onEndInteraction();
+        clearTimeout(pendingGestureCallbackRef.current);
+        if (finished) {
+          onFinish();
+        }
+      });
+    } else {
+      onFinish();
     }
-  };
-  handleGestureStateChange = ({
+  });
+  const onGestureStateChange = useLatestCallback(({
     nativeEvent
   }) => {
-    const {
-      layout,
-      onClose,
-      onGestureBegin,
-      onGestureCanceled,
-      onGestureEnd,
-      gestureDirection,
-      gestureVelocityImpact
-    } = this.props;
     switch (nativeEvent.state) {
       case GestureState.ACTIVE:
-        this.isSwiping.setValue(TRUE);
-        this.handleStartInteraction();
-        onGestureBegin === null || onGestureBegin === void 0 || onGestureBegin();
+        isSwiping.setValue(TRUE);
+        onStartInteraction();
+        onGestureBegin?.();
         break;
       case GestureState.CANCELLED:
+      case GestureState.FAILED:
         {
-          this.isSwiping.setValue(FALSE);
-          this.handleEndInteraction();
+          isSwiping.setValue(FALSE);
+          onEndInteraction();
           const velocity = gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? nativeEvent.velocityY : nativeEvent.velocityX;
-          this.animate({
-            closing: this.props.closing,
+          animate({
+            closing,
             velocity
           });
-          onGestureCanceled === null || onGestureCanceled === void 0 || onGestureCanceled();
+          onGestureCanceled?.();
           break;
         }
       case GestureState.END:
         {
-          this.isSwiping.setValue(FALSE);
+          isSwiping.setValue(FALSE);
           let distance;
           let translation;
           let velocity;
@@ -210,33 +191,103 @@ export default class Card extends React.Component {
             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,
+          const shouldClose = (translation + velocity * gestureVelocityImpact) * getInvertedMultiplier(gestureDirection, direction === 'rtl') > distance / 2 ? velocity !== 0 || translation !== 0 : closing;
+          animate({
+            closing: shouldClose,
             velocity
           });
-          if (closing) {
+          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
-            this.pendingGestureCallback = setTimeout(() => {
+            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
-              this.forceUpdate();
+              forceUpdate();
             }, 32);
           }
-          onGestureEnd === null || onGestureEnd === void 0 || onGestureEnd();
+          onGestureEnd?.();
           break;
         }
     }
-  };
-
-  // Memoize this to avoid extra work on re-render
-  getInterpolatedStyle = memoize((styleInterpolator, animation) => styleInterpolator(animation));
+  });
+  React.useLayoutEffect(() => {
+    layoutAnim.width.setValue(layout.width);
+    layoutAnim.height.setValue(layout.height);
+    inverted.setValue(getInvertedMultiplier(gestureDirection, direction === 'rtl'));
+  }, [gestureDirection, direction, inverted, layoutAnim.width, layoutAnim.height, layout.width, layout.height]);
+  const previousPropsRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      onEndInteraction();
+      if (animationHandleRef.current) {
+        cancelAnimationFrame(animationHandleRef.current);
+      }
+      clearTimeout(pendingGestureCallbackRef.current);
+    };
 
-  // Keep track of the animation context when deps changes.
-  getCardAnimation = memoize((interpolationIndex, current, next, layout, insetTop, insetRight, insetBottom, insetLeft) => ({
+    // We only want to clean up the animation on unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const timeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
+    }
+    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
+        });
+      }
+    }
+    previousPropsRef.current = {
+      opening,
+      closing,
+      layout,
+      gestureDirection,
+      direction,
+      preloaded
+    };
+  }, [animate, closing, direction, gesture, gestureDirection, layout, opening, preloaded]);
+  const interpolationProps = React.useMemo(() => ({
     index: interpolationIndex,
     current: {
       progress: current
@@ -244,123 +295,41 @@ export default class Card extends React.Component {
     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
     }
-  }));
-  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
-        };
-      }
+  }), [interpolationIndex, current, next, isClosing, isSwiping, inverted, layout, insets.top, insets.right, insets.bottom, insets.left]);
+  const {
+    containerStyle,
+    cardStyle,
+    overlayStyle,
+    shadowStyle
+  } = React.useMemo(() => styleInterpolator(interpolationProps), [styleInterpolator, interpolationProps]);
+  const onGestureEvent = React.useMemo(() => gestureEnabled ? Animated.event([{
+    nativeEvent: gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? {
+      translationY: gesture
+    } : {
+      translationX: gesture
     }
-  }
-  ref = /*#__PURE__*/React.createRef();
-  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, layout, insets.top, insets.right, insets.bottom, insets.left);
-    const interpolatedStyle = this.getInterpolatedStyle(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 /*#__PURE__*/React.createElement(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) ? /*#__PURE__*/React.createElement(ModalStatusBarManager, {
-      dark: headerDarkContent,
-      layout: layout,
-      insets: insets,
-      style: cardStyle
-    }) : null, /*#__PURE__*/React.createElement(Animated.View, {
+  }], {
+    useNativeDriver
+  }) : undefined, [gesture, gestureDirection, gestureEnabled]);
+  const {
+    backgroundColor
+  } = StyleSheet.flatten(contentStyle || {});
+  const isTransparent = typeof backgroundColor === 'string' ? Color(backgroundColor).alpha() === 0 : false;
+  return /*#__PURE__*/_jsxs(CardAnimationContext.Provider, {
+    value: interpolationProps,
+    children: [Platform.OS !== 'web' ? /*#__PURE__*/_jsx(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.
@@ -371,45 +340,46 @@ export default class Card extends React.Component {
       // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
       ,
       collapsable: false
-    }), /*#__PURE__*/React.createElement(View, _extends({
-      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), overlayEnabled ? /*#__PURE__*/React.createElement(View, {
+    }) : null, overlayEnabled ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: StyleSheet.absoluteFill,
+      children: overlay({
+        style: overlayStyle
+      })
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "box-none",
-      style: StyleSheet.absoluteFill
-    }, overlay({
-      style: overlayStyle
-    })) : null, /*#__PURE__*/React.createElement(Animated.View, {
       style: [styles.container, containerStyle, customContainerStyle],
-      pointerEvents: "box-none"
-    }, /*#__PURE__*/React.createElement(PanGestureHandler, _extends({
-      enabled: layout.width !== 0 && gestureEnabled,
-      onGestureEvent: handleGestureEvent,
-      onHandlerStateChange: this.handleGestureStateChange
-    }, this.gestureActivationCriteria()), /*#__PURE__*/React.createElement(Animated.View, {
-      needsOffscreenAlphaCompositing: hasOpacityStyle(cardStyle),
-      style: [styles.container, cardStyle]
-    }, shadowEnabled && shadowStyle && !isTransparent ? /*#__PURE__*/React.createElement(Animated.View, {
-      style: [styles.shadow, gestureDirection === 'horizontal' ? [styles.shadowHorizontal, styles.shadowLeft] : gestureDirection === 'horizontal-inverted' ? [styles.shadowHorizontal, styles.shadowRight] : gestureDirection === 'vertical' ? [styles.shadowVertical, styles.shadowTop] : [styles.shadowVertical, styles.shadowBottom], {
-        backgroundColor
-      }, shadowStyle],
-      pointerEvents: "none"
-    }) : null, /*#__PURE__*/React.createElement(CardSheet, {
-      ref: this.ref,
-      enabled: pageOverflowEnabled,
-      layout: layout,
-      style: contentStyle
-    }, children))))));
-  }
+      children: /*#__PURE__*/_jsx(PanGestureHandler, {
+        enabled: layout.width !== 0 && gestureEnabled,
+        onGestureEvent: onGestureEvent,
+        onHandlerStateChange: onGestureStateChange,
+        ...gestureActivationCriteria({
+          layout,
+          direction,
+          gestureDirection,
+          gestureResponseDistance
+        }),
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          pointerEvents: "box-none",
+          needsOffscreenAlphaCompositing: hasOpacityStyle(cardStyle),
+          style: [styles.container, cardStyle],
+          children: [shadowEnabled && shadowStyle && !isTransparent ? /*#__PURE__*/_jsx(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, /*#__PURE__*/_jsx(CardContent, {
+            enabled: pageOverflowEnabled,
+            layout: layout,
+            style: contentStyle,
+            children: children
+          })]
+        })
+      })
+    })]
+  });
 }
-export const getIsModalPresentation = cardStyleInterpolator => {
-  return cardStyleInterpolator === forModalPresentationIOS ||
-  // Handle custom modal presentation interpolators as well
-  cardStyleInterpolator.name === 'forModalPresentationIOS';
-};
+export { Card };
 const styles = StyleSheet.create({
   container: {
     flex: 1
@@ -419,34 +389,39 @@ const styles = StyleSheet.create({
     backgroundColor: '#000'
   },
   shadow: {
-    position: 'absolute',
-    shadowRadius: 5,
-    shadowColor: '#000',
-    shadowOpacity: 0.3
+    position: 'absolute'
   },
   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