react-native-gesture-handler 2.25.0 → 2.26.0

package/lib/commonjs/components/Swipeable.js

@@ -4,330 +4,285 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _reactNative = require("react-native");
-
 var _PanGestureHandler = require("../handlers/PanGestureHandler");
-
 var _TapGestureHandler = require("../handlers/TapGestureHandler");
-
 var _State = require("../State");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Similarily to the DrawerLayout component this deserves to be put in a
+// separate repo. Although, keeping it here for the time being will allow us to
+// move faster and fix possible issues quicker
 
 const DRAG_TOSS = 0.05;
 
+// Animated.AnimatedInterpolation has been converted to a generic type
+// in @types/react-native 0.70. This way we can maintain compatibility
+// with all versions of @types/react-native
+
 /**
  * @deprecated use Reanimated version of Swipeable instead
  *
  * This component allows for implementing swipeable rows or similar interaction.
  */
-class Swipeable extends React.Component {
-  constructor(_props) {
-    super(_props);
-
-    _defineProperty(this, "onGestureEvent", void 0);
-
-    _defineProperty(this, "transX", void 0);
-
-    _defineProperty(this, "showLeftAction", void 0);
-
-    _defineProperty(this, "leftActionTranslate", void 0);
-
-    _defineProperty(this, "showRightAction", void 0);
-
-    _defineProperty(this, "rightActionTranslate", void 0);
-
-    _defineProperty(this, "updateAnimatedEvent", (props, state) => {
-      const {
-        friction,
-        overshootFriction
-      } = props;
-      const {
-        dragX,
-        rowTranslation,
-        leftWidth = 0,
-        rowWidth = 0
-      } = state;
-      const {
-        rightOffset = rowWidth
-      } = state;
-      const rightWidth = Math.max(0, rowWidth - rightOffset);
-      const {
-        overshootLeft = leftWidth > 0,
-        overshootRight = rightWidth > 0
-      } = props;
-
-      const transX = _reactNative.Animated.add(rowTranslation, dragX.interpolate({
-        inputRange: [0, friction],
-        outputRange: [0, 1]
-      })).interpolate({
-        inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
-        outputRange: [-rightWidth - (overshootRight ? 1 / overshootFriction : 0), -rightWidth, leftWidth, leftWidth + (overshootLeft ? 1 / overshootFriction : 0)]
-      });
 
-      this.transX = transX;
-      this.showLeftAction = leftWidth > 0 ? transX.interpolate({
-        inputRange: [-1, 0, leftWidth],
-        outputRange: [0, 0, 1]
-      }) : new _reactNative.Animated.Value(0);
-      this.leftActionTranslate = this.showLeftAction.interpolate({
-        inputRange: [0, Number.MIN_VALUE],
-        outputRange: [-10000, 0],
-        extrapolate: 'clamp'
-      });
-      this.showRightAction = rightWidth > 0 ? transX.interpolate({
-        inputRange: [-rightWidth, 0, 1],
-        outputRange: [1, 0, 0]
-      }) : new _reactNative.Animated.Value(0);
-      this.rightActionTranslate = this.showRightAction.interpolate({
-        inputRange: [0, Number.MIN_VALUE],
-        outputRange: [-10000, 0],
-        extrapolate: 'clamp'
-      });
-    });
-
-    _defineProperty(this, "onTapHandlerStateChange", ({
-      nativeEvent
-    }) => {
-      if (nativeEvent.oldState === _State.State.ACTIVE) {
-        this.close();
+class Swipeable extends _react.Component {
+  static defaultProps = {
+    friction: 1,
+    overshootFriction: 1,
+    useNativeAnimations: true
+  };
+  constructor(props) {
+    super(props);
+    const dragX = new _reactNative.Animated.Value(0);
+    this.state = {
+      dragX,
+      rowTranslation: new _reactNative.Animated.Value(0),
+      rowState: 0,
+      leftWidth: undefined,
+      rightOffset: undefined,
+      rowWidth: undefined
+    };
+    this.updateAnimatedEvent(props, this.state);
+    this.onGestureEvent = _reactNative.Animated.event([{
+      nativeEvent: {
+        translationX: dragX
       }
+    }], {
+      useNativeDriver: props.useNativeAnimations
     });
-
-    _defineProperty(this, "onHandlerStateChange", ev => {
-      if (ev.nativeEvent.oldState === _State.State.ACTIVE) {
-        this.handleRelease(ev);
-      }
-
-      if (ev.nativeEvent.state === _State.State.ACTIVE) {
-        const {
-          velocityX,
-          translationX: dragX
-        } = ev.nativeEvent;
-        const {
-          rowState
-        } = this.state;
-        const {
-          friction
-        } = this.props;
-        const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
-        const direction = rowState === -1 ? 'right' : rowState === 1 ? 'left' : translationX > 0 ? 'left' : 'right';
-
-        if (rowState === 0) {
-          var _this$props$onSwipeab, _this$props;
-
-          (_this$props$onSwipeab = (_this$props = this.props).onSwipeableOpenStartDrag) === null || _this$props$onSwipeab === void 0 ? void 0 : _this$props$onSwipeab.call(_this$props, direction);
-        } else {
-          var _this$props$onSwipeab2, _this$props2;
-
-          (_this$props$onSwipeab2 = (_this$props2 = this.props).onSwipeableCloseStartDrag) === null || _this$props$onSwipeab2 === void 0 ? void 0 : _this$props$onSwipeab2.call(_this$props2, direction);
-        }
-      }
+  }
+  shouldComponentUpdate(props, state) {
+    if (this.props.friction !== props.friction || this.props.overshootLeft !== props.overshootLeft || this.props.overshootRight !== props.overshootRight || this.props.overshootFriction !== props.overshootFriction || this.state.leftWidth !== state.leftWidth || this.state.rightOffset !== state.rightOffset || this.state.rowWidth !== state.rowWidth) {
+      this.updateAnimatedEvent(props, state);
+    }
+    return true;
+  }
+  updateAnimatedEvent = (props, state) => {
+    const {
+      friction,
+      overshootFriction
+    } = props;
+    const {
+      dragX,
+      rowTranslation,
+      leftWidth = 0,
+      rowWidth = 0
+    } = state;
+    const {
+      rightOffset = rowWidth
+    } = state;
+    const rightWidth = Math.max(0, rowWidth - rightOffset);
+    const {
+      overshootLeft = leftWidth > 0,
+      overshootRight = rightWidth > 0
+    } = props;
+    const transX = _reactNative.Animated.add(rowTranslation, dragX.interpolate({
+      inputRange: [0, friction],
+      outputRange: [0, 1]
+    })).interpolate({
+      inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
+      outputRange: [-rightWidth - (overshootRight ? 1 / overshootFriction : 0), -rightWidth, leftWidth, leftWidth + (overshootLeft ? 1 / overshootFriction : 0)]
     });
-
-    _defineProperty(this, "handleRelease", ev => {
+    this.transX = transX;
+    this.showLeftAction = leftWidth > 0 ? transX.interpolate({
+      inputRange: [-1, 0, leftWidth],
+      outputRange: [0, 0, 1]
+    }) : new _reactNative.Animated.Value(0);
+    this.leftActionTranslate = this.showLeftAction.interpolate({
+      inputRange: [0, Number.MIN_VALUE],
+      outputRange: [-10000, 0],
+      extrapolate: 'clamp'
+    });
+    this.showRightAction = rightWidth > 0 ? transX.interpolate({
+      inputRange: [-rightWidth, 0, 1],
+      outputRange: [1, 0, 0]
+    }) : new _reactNative.Animated.Value(0);
+    this.rightActionTranslate = this.showRightAction.interpolate({
+      inputRange: [0, Number.MIN_VALUE],
+      outputRange: [-10000, 0],
+      extrapolate: 'clamp'
+    });
+  };
+  onTapHandlerStateChange = ({
+    nativeEvent
+  }) => {
+    if (nativeEvent.oldState === _State.State.ACTIVE) {
+      this.close();
+    }
+  };
+  onHandlerStateChange = ev => {
+    if (ev.nativeEvent.oldState === _State.State.ACTIVE) {
+      this.handleRelease(ev);
+    }
+    if (ev.nativeEvent.state === _State.State.ACTIVE) {
       const {
         velocityX,
         translationX: dragX
       } = ev.nativeEvent;
       const {
-        leftWidth = 0,
-        rowWidth = 0,
         rowState
       } = this.state;
       const {
-        rightOffset = rowWidth
-      } = this.state;
-      const rightWidth = rowWidth - rightOffset;
-      const {
-        friction,
-        leftThreshold = leftWidth / 2,
-        rightThreshold = rightWidth / 2
+        friction
       } = this.props;
-      const startOffsetX = this.currentOffset() + dragX / friction;
       const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
-      let toValue = 0;
-
+      const direction = rowState === -1 ? 'right' : rowState === 1 ? 'left' : translationX > 0 ? 'left' : 'right';
       if (rowState === 0) {
-        if (translationX > leftThreshold) {
-          toValue = leftWidth;
-        } else if (translationX < -rightThreshold) {
-          toValue = -rightWidth;
-        }
-      } else if (rowState === 1) {
-        // Swiped to left
-        if (translationX > -leftThreshold) {
-          toValue = leftWidth;
-        }
+        this.props.onSwipeableOpenStartDrag?.(direction);
       } else {
-        // Swiped to right
-        if (translationX < rightThreshold) {
-          toValue = -rightWidth;
-        }
+        this.props.onSwipeableCloseStartDrag?.(direction);
       }
-
-      this.animateRow(startOffsetX, toValue, velocityX / friction);
-    });
-
-    _defineProperty(this, "animateRow", (fromValue, toValue, velocityX) => {
-      const {
-        dragX,
-        rowTranslation
-      } = this.state;
-      dragX.setValue(0);
-      rowTranslation.setValue(fromValue);
-      this.setState({
-        rowState: Math.sign(toValue)
-      });
-
-      _reactNative.Animated.spring(rowTranslation, {
-        restSpeedThreshold: 1.7,
-        restDisplacementThreshold: 0.4,
-        velocity: velocityX,
-        bounciness: 0,
-        toValue,
-        useNativeDriver: this.props.useNativeAnimations,
-        ...this.props.animationOptions
-      }).start(({
-        finished
-      }) => {
-        if (finished) {
-          if (toValue > 0) {
-            var _this$props$onSwipeab3, _this$props3, _this$props$onSwipeab4, _this$props4;
-
-            (_this$props$onSwipeab3 = (_this$props3 = this.props).onSwipeableLeftOpen) === null || _this$props$onSwipeab3 === void 0 ? void 0 : _this$props$onSwipeab3.call(_this$props3);
-            (_this$props$onSwipeab4 = (_this$props4 = this.props).onSwipeableOpen) === null || _this$props$onSwipeab4 === void 0 ? void 0 : _this$props$onSwipeab4.call(_this$props4, 'left', this);
-          } else if (toValue < 0) {
-            var _this$props$onSwipeab5, _this$props5, _this$props$onSwipeab6, _this$props6;
-
-            (_this$props$onSwipeab5 = (_this$props5 = this.props).onSwipeableRightOpen) === null || _this$props$onSwipeab5 === void 0 ? void 0 : _this$props$onSwipeab5.call(_this$props5);
-            (_this$props$onSwipeab6 = (_this$props6 = this.props).onSwipeableOpen) === null || _this$props$onSwipeab6 === void 0 ? void 0 : _this$props$onSwipeab6.call(_this$props6, 'right', this);
-          } else {
-            var _this$props$onSwipeab7, _this$props7;
-
-            const closingDirection = fromValue > 0 ? 'left' : 'right';
-            (_this$props$onSwipeab7 = (_this$props7 = this.props).onSwipeableClose) === null || _this$props$onSwipeab7 === void 0 ? void 0 : _this$props$onSwipeab7.call(_this$props7, closingDirection, this);
-          }
-        }
-      });
-
-      if (toValue > 0) {
-        var _this$props$onSwipeab8, _this$props8, _this$props$onSwipeab9, _this$props9;
-
-        (_this$props$onSwipeab8 = (_this$props8 = this.props).onSwipeableLeftWillOpen) === null || _this$props$onSwipeab8 === void 0 ? void 0 : _this$props$onSwipeab8.call(_this$props8);
-        (_this$props$onSwipeab9 = (_this$props9 = this.props).onSwipeableWillOpen) === null || _this$props$onSwipeab9 === void 0 ? void 0 : _this$props$onSwipeab9.call(_this$props9, 'left');
-      } else if (toValue < 0) {
-        var _this$props$onSwipeab10, _this$props10, _this$props$onSwipeab11, _this$props11;
-
-        (_this$props$onSwipeab10 = (_this$props10 = this.props).onSwipeableRightWillOpen) === null || _this$props$onSwipeab10 === void 0 ? void 0 : _this$props$onSwipeab10.call(_this$props10);
-        (_this$props$onSwipeab11 = (_this$props11 = this.props).onSwipeableWillOpen) === null || _this$props$onSwipeab11 === void 0 ? void 0 : _this$props$onSwipeab11.call(_this$props11, 'right');
-      } else {
-        var _this$props$onSwipeab12, _this$props12;
-
-        const closingDirection = fromValue > 0 ? 'left' : 'right';
-        (_this$props$onSwipeab12 = (_this$props12 = this.props).onSwipeableWillClose) === null || _this$props$onSwipeab12 === void 0 ? void 0 : _this$props$onSwipeab12.call(_this$props12, closingDirection);
+    }
+  };
+  handleRelease = ev => {
+    const {
+      velocityX,
+      translationX: dragX
+    } = ev.nativeEvent;
+    const {
+      leftWidth = 0,
+      rowWidth = 0,
+      rowState
+    } = this.state;
+    const {
+      rightOffset = rowWidth
+    } = this.state;
+    const rightWidth = rowWidth - rightOffset;
+    const {
+      friction,
+      leftThreshold = leftWidth / 2,
+      rightThreshold = rightWidth / 2
+    } = this.props;
+    const startOffsetX = this.currentOffset() + dragX / friction;
+    const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
+    let toValue = 0;
+    if (rowState === 0) {
+      if (translationX > leftThreshold) {
+        toValue = leftWidth;
+      } else if (translationX < -rightThreshold) {
+        toValue = -rightWidth;
+      }
+    } else if (rowState === 1) {
+      // Swiped to left
+      if (translationX > -leftThreshold) {
+        toValue = leftWidth;
+      }
+    } else {
+      // Swiped to right
+      if (translationX < rightThreshold) {
+        toValue = -rightWidth;
       }
+    }
+    this.animateRow(startOffsetX, toValue, velocityX / friction);
+  };
+  animateRow = (fromValue, toValue, velocityX) => {
+    const {
+      dragX,
+      rowTranslation
+    } = this.state;
+    dragX.setValue(0);
+    rowTranslation.setValue(fromValue);
+    this.setState({
+      rowState: Math.sign(toValue)
     });
-
-    _defineProperty(this, "onRowLayout", ({
-      nativeEvent
+    _reactNative.Animated.spring(rowTranslation, {
+      restSpeedThreshold: 1.7,
+      restDisplacementThreshold: 0.4,
+      velocity: velocityX,
+      bounciness: 0,
+      toValue,
+      useNativeDriver: this.props.useNativeAnimations,
+      ...this.props.animationOptions
+    }).start(({
+      finished
     }) => {
-      this.setState({
-        rowWidth: nativeEvent.layout.width
-      });
-    });
-
-    _defineProperty(this, "currentOffset", () => {
-      const {
-        leftWidth = 0,
-        rowWidth = 0,
-        rowState
-      } = this.state;
-      const {
-        rightOffset = rowWidth
-      } = this.state;
-      const rightWidth = rowWidth - rightOffset;
-
-      if (rowState === 1) {
-        return leftWidth;
-      } else if (rowState === -1) {
-        return -rightWidth;
+      if (finished) {
+        if (toValue > 0) {
+          this.props.onSwipeableLeftOpen?.();
+          this.props.onSwipeableOpen?.('left', this);
+        } else if (toValue < 0) {
+          this.props.onSwipeableRightOpen?.();
+          this.props.onSwipeableOpen?.('right', this);
+        } else {
+          const closingDirection = fromValue > 0 ? 'left' : 'right';
+          this.props.onSwipeableClose?.(closingDirection, this);
+        }
       }
-
-      return 0;
-    });
-
-    _defineProperty(this, "close", () => {
-      this.animateRow(this.currentOffset(), 0);
-    });
-
-    _defineProperty(this, "openLeft", () => {
-      const {
-        leftWidth = 0
-      } = this.state;
-      this.animateRow(this.currentOffset(), leftWidth);
-    });
-
-    _defineProperty(this, "openRight", () => {
-      const {
-        rowWidth = 0
-      } = this.state;
-      const {
-        rightOffset = rowWidth
-      } = this.state;
-      const rightWidth = rowWidth - rightOffset;
-      this.animateRow(this.currentOffset(), -rightWidth);
     });
-
-    _defineProperty(this, "reset", () => {
-      const {
-        dragX,
-        rowTranslation
-      } = this.state;
-      dragX.setValue(0);
-      rowTranslation.setValue(0);
-      this.setState({
-        rowState: 0
-      });
-    });
-
-    const _dragX = new _reactNative.Animated.Value(0);
-
-    this.state = {
-      dragX: _dragX,
-      rowTranslation: new _reactNative.Animated.Value(0),
-      rowState: 0,
-      leftWidth: undefined,
-      rightOffset: undefined,
-      rowWidth: undefined
-    };
-    this.updateAnimatedEvent(_props, this.state);
-    this.onGestureEvent = _reactNative.Animated.event([{
-      nativeEvent: {
-        translationX: _dragX
-      }
-    }], {
-      useNativeDriver: _props.useNativeAnimations
+    if (toValue > 0) {
+      this.props.onSwipeableLeftWillOpen?.();
+      this.props.onSwipeableWillOpen?.('left');
+    } else if (toValue < 0) {
+      this.props.onSwipeableRightWillOpen?.();
+      this.props.onSwipeableWillOpen?.('right');
+    } else {
+      const closingDirection = fromValue > 0 ? 'left' : 'right';
+      this.props.onSwipeableWillClose?.(closingDirection);
+    }
+  };
+  onRowLayout = ({
+    nativeEvent
+  }) => {
+    this.setState({
+      rowWidth: nativeEvent.layout.width
     });
-  }
-
-  shouldComponentUpdate(props, state) {
-    if (this.props.friction !== props.friction || this.props.overshootLeft !== props.overshootLeft || this.props.overshootRight !== props.overshootRight || this.props.overshootFriction !== props.overshootFriction || this.state.leftWidth !== state.leftWidth || this.state.rightOffset !== state.rightOffset || this.state.rowWidth !== state.rowWidth) {
-      this.updateAnimatedEvent(props, state);
+  };
+  currentOffset = () => {
+    const {
+      leftWidth = 0,
+      rowWidth = 0,
+      rowState
+    } = this.state;
+    const {
+      rightOffset = rowWidth
+    } = this.state;
+    const rightWidth = rowWidth - rightOffset;
+    if (rowState === 1) {
+      return leftWidth;
+    } else if (rowState === -1) {
+      return -rightWidth;
     }
+    return 0;
+  };
+  close = () => {
+    this.animateRow(this.currentOffset(), 0);
+  };
+
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+  openLeft = () => {
+    const {
+      leftWidth = 0
+    } = this.state;
+    this.animateRow(this.currentOffset(), leftWidth);
+  };
 
-    return true;
-  }
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+  openRight = () => {
+    const {
+      rowWidth = 0
+    } = this.state;
+    const {
+      rightOffset = rowWidth
+    } = this.state;
+    const rightWidth = rowWidth - rightOffset;
+    this.animateRow(this.currentOffset(), -rightWidth);
+  };
 
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+  reset = () => {
+    const {
+      dragX,
+      rowTranslation
+    } = this.state;
+    dragX.setValue(0);
+    rowTranslation.setValue(0);
+    this.setState({
+      rowState: 0
+    });
+  };
   render() {
     const {
       rowState
@@ -339,76 +294,76 @@ class Swipeable extends React.Component {
       dragOffsetFromLeftEdge = 10,
       dragOffsetFromRightEdge = 10
     } = this.props;
-    const left = renderLeftActions && /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-      style: [styles.leftActions, // All those and below parameters can have ! since they are all
+    const left = renderLeftActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      style: [styles.leftActions,
+      // All those and below parameters can have ! since they are all
       // asigned in constructor in `updateAnimatedEvent` but TS cannot spot
       // it for some reason
       {
         transform: [{
           translateX: this.leftActionTranslate
         }]
-      }]
-    }, renderLeftActions(this.showLeftAction, this.transX, this), /*#__PURE__*/React.createElement(_reactNative.View, {
-      onLayout: ({
-        nativeEvent
-      }) => this.setState({
-        leftWidth: nativeEvent.layout.x
-      })
-    }));
-    const right = renderRightActions && /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+      }],
+      children: [renderLeftActions(this.showLeftAction, this.transX, this), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: ({
+          nativeEvent
+        }) => this.setState({
+          leftWidth: nativeEvent.layout.x
+        })
+      })]
+    });
+    const right = renderRightActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
       style: [styles.rightActions, {
         transform: [{
           translateX: this.rightActionTranslate
         }]
-      }]
-    }, renderRightActions(this.showRightAction, this.transX, this), /*#__PURE__*/React.createElement(_reactNative.View, {
-      onLayout: ({
-        nativeEvent
-      }) => this.setState({
-        rightOffset: nativeEvent.layout.x
-      })
-    }));
-    return /*#__PURE__*/React.createElement(_PanGestureHandler.PanGestureHandler, _extends({
+      }],
+      children: [renderRightActions(this.showRightAction, this.transX, this), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: ({
+          nativeEvent
+        }) => this.setState({
+          rightOffset: nativeEvent.layout.x
+        })
+      })]
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PanGestureHandler.PanGestureHandler, {
       activeOffsetX: [-dragOffsetFromRightEdge, dragOffsetFromLeftEdge],
-      touchAction: "pan-y"
-    }, this.props, {
-      onGestureEvent: this.onGestureEvent,
-      onHandlerStateChange: this.onHandlerStateChange
-    }), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-      onLayout: this.onRowLayout,
-      style: [styles.container, this.props.containerStyle]
-    }, left, right, /*#__PURE__*/React.createElement(_TapGestureHandler.TapGestureHandler, {
-      enabled: rowState !== 0,
       touchAction: "pan-y",
-      onHandlerStateChange: this.onTapHandlerStateChange
-    }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-      pointerEvents: rowState === 0 ? 'auto' : 'box-only',
-      style: [{
-        transform: [{
-          translateX: this.transX
-        }]
-      }, this.props.childrenContainerStyle]
-    }, children))));
+      ...this.props,
+      onGestureEvent: this.onGestureEvent,
+      onHandlerStateChange: this.onHandlerStateChange,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+        onLayout: this.onRowLayout,
+        style: [styles.container, this.props.containerStyle],
+        children: [left, right, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TapGestureHandler.TapGestureHandler, {
+          enabled: rowState !== 0,
+          touchAction: "pan-y",
+          onHandlerStateChange: this.onTapHandlerStateChange,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+            pointerEvents: rowState === 0 ? 'auto' : 'box-only',
+            style: [{
+              transform: [{
+                translateX: this.transX
+              }]
+            }, this.props.childrenContainerStyle],
+            children: children
+          })
+        })]
+      })
+    });
   }
-
 }
-
 exports.default = Swipeable;
-
-_defineProperty(Swipeable, "defaultProps", {
-  friction: 1,
-  overshootFriction: 1,
-  useNativeAnimations: true
-});
-
 const styles = _reactNative.StyleSheet.create({
   container: {
     overflow: 'hidden'
   },
-  leftActions: { ..._reactNative.StyleSheet.absoluteFillObject,
+  leftActions: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
     flexDirection: _reactNative.I18nManager.isRTL ? 'row-reverse' : 'row'
   },
-  rightActions: { ..._reactNative.StyleSheet.absoluteFillObject,
+  rightActions: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
     flexDirection: _reactNative.I18nManager.isRTL ? 'row' : 'row-reverse'
   }
 });