@react-navigation/stack 7.0.13 → 7.0.15

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

@@ -1,18 +1,5 @@
 "use strict";
 
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import Color from 'color';
 import * as React from 'react';
 import { Animated, InteractionManager, Platform, StyleSheet, View } from 'react-native';
@@ -41,432 +28,413 @@ const hasOpacityStyle = style => {
   }
   return false;
 };
-export let Card = /*#__PURE__*/function (_React$Component) {
-  function Card(...args) {
-    var _this;
-    _classCallCheck(this, Card);
-    _this = _callSuper(this, Card, [...args]);
-    _defineProperty(_this, "isCurrentlyMounted", false);
-    _defineProperty(_this, "isClosing", new Animated.Value(FALSE));
-    _defineProperty(_this, "inverted", new Animated.Value(getInvertedMultiplier(_this.props.gestureDirection, _this.props.direction === 'rtl')));
-    _defineProperty(_this, "layout", {
-      width: new Animated.Value(_this.props.layout.width),
-      height: new Animated.Value(_this.props.layout.height)
-    });
-    _defineProperty(_this, "isSwiping", new Animated.Value(FALSE));
-    _defineProperty(_this, "interactionHandle", void 0);
-    _defineProperty(_this, "pendingGestureCallback", void 0);
-    _defineProperty(_this, "lastToValue", void 0);
-    _defineProperty(_this, "animate", ({
-      closing,
-      velocity
-    }) => {
-      const {
-        transitionSpec,
-        onOpen,
-        onClose,
-        onTransition,
-        gesture
-      } = _this.props;
-      const toValue = _this.getAnimateToValue({
-        ..._this.props,
-        closing
+export class Card extends React.Component {
+  static defaultProps = {
+    shadowEnabled: false,
+    gestureEnabled: true,
+    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
+    overlay: ({
+      style
+    }) => style ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [styles.overlay, style]
+    }) : null
+  };
+  componentDidMount() {
+    if (!this.props.preloaded) {
+      this.animate({
+        closing: this.props.closing
       });
-      _this.lastToValue = toValue;
-      _this.isClosing.setValue(closing ? TRUE : FALSE);
-      const spec = closing ? transitionSpec.close : transitionSpec.open;
-      const animation = spec.animation === 'spring' ? Animated.spring : Animated.timing;
-      _this.setPointerEventsEnabled(!closing);
-      _this.handleStartInteraction();
-      clearTimeout(_this.pendingGestureCallback);
-      onTransition?.({
-        closing,
-        gesture: velocity !== undefined
+    }
+    this.isCurrentlyMounted = true;
+  }
+  componentDidUpdate(prevProps) {
+    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);
+    }
+    if (gestureDirection !== prevProps.gestureDirection) {
+      this.inverted.setValue(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
       });
-      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) {
-            // Make sure to re-open screen if it wasn't removed
-            _this.forceUpdate();
-          }
-        }
+    } 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();
+  }
+  isCurrentlyMounted = false;
+  isClosing = new Animated.Value(FALSE);
+  inverted = new Animated.Value(getInvertedMultiplier(this.props.gestureDirection, this.props.direction === 'rtl'));
+  layout = {
+    width: new Animated.Value(this.props.layout.width),
+    height: new Animated.Value(this.props.layout.height)
+  };
+  isSwiping = new Animated.Value(FALSE);
+  animate = ({
+    closing,
+    velocity
+  }) => {
+    const {
+      transitionSpec,
+      onOpen,
+      onClose,
+      onTransition,
+      gesture
+    } = this.props;
+    const toValue = this.getAnimateToValue({
+      ...this.props,
+      closing
     });
-    _defineProperty(_this, "getAnimateToValue", ({
+    this.lastToValue = toValue;
+    this.isClosing.setValue(closing ? TRUE : FALSE);
+    const spec = closing ? transitionSpec.close : transitionSpec.open;
+    const animation = spec.animation === 'spring' ? Animated.spring : Animated.timing;
+    this.setPointerEventsEnabled(!closing);
+    this.handleStartInteraction();
+    clearTimeout(this.pendingGestureCallback);
+    onTransition?.({
       closing,
-      layout,
-      gestureDirection,
-      direction,
-      preloaded
-    }) => {
-      if (!closing && !preloaded) {
-        return 0;
-      }
-      return getDistanceForDirection(layout, gestureDirection, direction === 'rtl');
+      gesture: velocity !== undefined
     });
-    _defineProperty(_this, "setPointerEventsEnabled", enabled => {
-      const pointerEvents = enabled ? 'box-none' : 'none';
-      _this.ref.current?.setPointerEvents(pointerEvents);
-    });
-    _defineProperty(_this, "handleStartInteraction", () => {
-      if (_this.interactionHandle === undefined) {
-        _this.interactionHandle = InteractionManager.createInteractionHandle();
-      }
-    });
-    _defineProperty(_this, "handleEndInteraction", () => {
-      if (_this.interactionHandle !== undefined) {
-        InteractionManager.clearInteractionHandle(_this.interactionHandle);
-        _this.interactionHandle = 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) {
+          // Make sure to re-open screen if it wasn't removed
+          this.forceUpdate();
+        }
       }
     });
-    _defineProperty(_this, "handleGestureStateChange", ({
-      nativeEvent
-    }) => {
-      const {
-        direction,
-        layout,
-        onClose,
-        onGestureBegin,
-        onGestureCanceled,
-        onGestureEnd,
-        gestureDirection,
-        gestureVelocityImpact
-      } = _this.props;
-      switch (nativeEvent.state) {
-        case GestureState.ACTIVE:
-          _this.isSwiping.setValue(TRUE);
-          _this.handleStartInteraction();
-          onGestureBegin?.();
+  };
+  getAnimateToValue = ({
+    closing,
+    layout,
+    gestureDirection,
+    direction,
+    preloaded
+  }) => {
+    if (!closing && !preloaded) {
+      return 0;
+    }
+    return getDistanceForDirection(layout, gestureDirection, direction === 'rtl');
+  };
+  setPointerEventsEnabled = enabled => {
+    const pointerEvents = enabled ? 'box-none' : 'none';
+    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;
+    }
+  };
+  handleGestureStateChange = ({
+    nativeEvent
+  }) => {
+    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
+          });
+          onGestureCanceled?.();
           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
-            });
-            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;
           }
-        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, 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();
+          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);
-            }
-            onGestureEnd?.();
-            break;
+              // 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);
           }
-      }
-    });
-    // Memoize this to avoid extra work on re-render
-    _defineProperty(_this, "getInterpolatedStyle", memoize((styleInterpolator, animation) => styleInterpolator(animation)));
-    // Keep track of the animation context when deps changes.
-    _defineProperty(_this, "getCardAnimation", memoize((interpolationIndex, current, next, layout, insetTop, insetRight, insetBottom, insetLeft) => ({
-      index: interpolationIndex,
-      current: {
-        progress: current
-      },
-      next: next && {
-        progress: next
-      },
-      closing: _this.isClosing,
-      swiping: _this.isSwiping,
-      inverted: _this.inverted,
-      layouts: {
-        screen: layout
-      },
-      insets: {
-        top: insetTop,
-        right: insetRight,
-        bottom: insetBottom,
-        left: insetLeft
-      }
-    })));
-    _defineProperty(_this, "ref", /*#__PURE__*/React.createRef());
-    return _this;
-  }
-  _inherits(Card, _React$Component);
-  return _createClass(Card, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!this.props.preloaded) {
-        this.animate({
-          closing: this.props.closing
-        });
-      }
-      this.isCurrentlyMounted = true;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      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);
-      }
-      if (gestureDirection !== prevProps.gestureDirection) {
-        this.inverted.setValue(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
-        });
-      }
+          onGestureEnd?.();
+          break;
+        }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.props.gesture?.stopAnimation();
-      this.isCurrentlyMounted = false;
-      this.handleEndInteraction();
+  };
+
+  // Memoize this to avoid extra work on re-render
+  getInterpolatedStyle = memoize((styleInterpolator, animation) => styleInterpolator(animation));
+
+  // Keep track of the animation context when deps changes.
+  getCardAnimation = memoize((interpolationIndex, current, next, layout, insetTop, insetRight, insetBottom, insetLeft) => ({
+    index: interpolationIndex,
+    current: {
+      progress: current
+    },
+    next: next && {
+      progress: next
+    },
+    closing: this.isClosing,
+    swiping: this.isSwiping,
+    inverted: this.inverted,
+    layouts: {
+      screen: layout
+    },
+    insets: {
+      top: insetTop,
+      right: insetRight,
+      bottom: insetBottom,
+      left: insetLeft
     }
-  }, {
-    key: "gestureActivationCriteria",
-    value: function 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') {
+  }));
+  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 {
-          maxDeltaX: 15,
-          minOffsetY: 5,
+          minOffsetX: 5,
+          maxDeltaY: 20,
           hitSlop: {
-            bottom: -layout.height + distance
+            right: hitSlop
           },
           enableTrackpadTwoFingerGesture
         };
-      } else if (gestureDirection === 'vertical-inverted') {
+      } else {
         return {
-          maxDeltaX: 15,
-          minOffsetY: -5,
+          minOffsetX: -5,
+          maxDeltaY: 20,
           hitSlop: {
-            top: -layout.height + distance
+            left: hitSlop
           },
           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
-          };
-        }
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        styleInterpolator,
-        interpolationIndex,
-        current,
-        gesture,
-        next,
-        layout,
-        insets,
-        overlay,
-        overlayEnabled,
-        shadowEnabled,
-        gestureEnabled,
-        gestureDirection,
-        pageOverflowEnabled,
-        children,
-        containerStyle: customContainerStyle,
-        contentStyle,
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        closing,
-        direction,
-        gestureResponseDistance,
-        gestureVelocityImpact,
-        onClose,
-        onGestureBegin,
-        onGestureCanceled,
-        onGestureEnd,
-        onOpen,
-        onTransition,
-        transitionSpec,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...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
+  }
+  ref = /*#__PURE__*/React.createRef();
+  render() {
+    const {
+      styleInterpolator,
+      interpolationIndex,
+      current,
+      gesture,
+      next,
+      layout,
+      insets,
+      overlay,
+      overlayEnabled,
+      shadowEnabled,
+      gestureEnabled,
+      gestureDirection,
+      pageOverflowEnabled,
+      children,
+      containerStyle: customContainerStyle,
+      contentStyle,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      closing,
+      direction,
+      gestureResponseDistance,
+      gestureVelocityImpact,
+      onClose,
+      onGestureBegin,
+      onGestureCanceled,
+      onGestureEnd,
+      onOpen,
+      onTransition,
+      transitionSpec,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...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__*/_jsxs(CardAnimationContext.Provider, {
+      value: interpolationProps,
+      children: [/*#__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.
+          // 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
         }
-      }], {
-        useNativeDriver
-      }) : undefined;
-      const {
-        backgroundColor
-      } = StyleSheet.flatten(contentStyle || {});
-      const isTransparent = typeof backgroundColor === 'string' ? Color(backgroundColor).alpha() === 0 : false;
-      return /*#__PURE__*/_jsxs(CardAnimationContext.Provider, {
-        value: interpolationProps,
-        children: [/*#__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.
-            // 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
-        }), /*#__PURE__*/_jsxs(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,
-          children: [overlayEnabled ? /*#__PURE__*/_jsx(View, {
-            pointerEvents: "box-none",
-            style: StyleSheet.absoluteFill,
-            children: overlay({
-              style: overlayStyle
-            })
-          }) : null, /*#__PURE__*/_jsx(Animated.View, {
-            style: [styles.container, containerStyle, customContainerStyle],
-            pointerEvents: "box-none",
-            children: /*#__PURE__*/_jsx(PanGestureHandler, {
-              enabled: layout.width !== 0 && gestureEnabled,
-              onGestureEvent: handleGestureEvent,
-              onHandlerStateChange: this.handleGestureStateChange,
-              ...this.gestureActivationCriteria(),
-              children: /*#__PURE__*/_jsxs(Animated.View, {
-                needsOffscreenAlphaCompositing: hasOpacityStyle(cardStyle),
-                style: [styles.container, cardStyle],
-                children: [shadowEnabled && shadowStyle && !isTransparent ? /*#__PURE__*/_jsx(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, /*#__PURE__*/_jsx(CardSheet, {
-                  ref: this.ref,
-                  enabled: pageOverflowEnabled,
-                  layout: layout,
-                  style: contentStyle,
-                  children: children
-                })]
-              })
+        // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
+        ,
+        collapsable: false
+      }), /*#__PURE__*/_jsxs(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,
+        children: [overlayEnabled ? /*#__PURE__*/_jsx(View, {
+          pointerEvents: "box-none",
+          style: StyleSheet.absoluteFill,
+          children: overlay({
+            style: overlayStyle
+          })
+        }) : null, /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.container, containerStyle, customContainerStyle],
+          pointerEvents: "box-none",
+          children: /*#__PURE__*/_jsx(PanGestureHandler, {
+            enabled: layout.width !== 0 && gestureEnabled,
+            onGestureEvent: handleGestureEvent,
+            onHandlerStateChange: this.handleGestureStateChange,
+            ...this.gestureActivationCriteria(),
+            children: /*#__PURE__*/_jsxs(Animated.View, {
+              needsOffscreenAlphaCompositing: hasOpacityStyle(cardStyle),
+              style: [styles.container, cardStyle],
+              children: [shadowEnabled && shadowStyle && !isTransparent ? /*#__PURE__*/_jsx(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, /*#__PURE__*/_jsx(CardSheet, {
+                ref: this.ref,
+                enabled: pageOverflowEnabled,
+                layout: layout,
+                style: contentStyle,
+                children: children
+              })]
             })
-          })]
+          })
         })]
-      });
-    }
-  }]);
-}(React.Component);
-_defineProperty(Card, "defaultProps", {
-  shadowEnabled: false,
-  gestureEnabled: true,
-  gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
-  overlay: ({
-    style
-  }) => style ? /*#__PURE__*/_jsx(Animated.View, {
-    pointerEvents: "none",
-    style: [styles.overlay, style]
-  }) : null
-});
+      })]
+    });
+  }
+}
 const styles = StyleSheet.create({
   container: {
     flex: 1