Modify PanHandlers to ensure that a touchable element won't block the swiping event

dist/index.js

@@ -34,6 +34,8 @@ var _reactNative = require('react-native');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 SwipeoutBtn = (0, _createReactClass2.default)({
   displayName: 'SwipeoutBtn',
 
@@ -130,12 +132,15 @@ var Swipeout = (0, _createReactClass2.default)({
   },
 
   getDefaultProps: function getDefaultProps() {
-    return {
+    var _ref;
+
+    return _ref = {
       disabled: false,
       rowID: -1,
-      sectionID: -1,
-      sensitivity: 50
-    };
+      sectionID: -1
+    }, _defineProperty(_ref, 'disabled', false), _defineProperty(_ref, 'onPress', function onPress() {
+      return null;
+    }), _defineProperty(_ref, 'sensitivity', _reactNative.Platform.select({ android: 50, ios: 0 })), _ref;
   },
 
   getInitialState: function getInitialState() {
@@ -148,6 +153,7 @@ var Swipeout = (0, _createReactClass2.default)({
       contentPos: 0,
       contentWidth: 0,
       openedRight: false,
+      openedLeft: false,
       swiping: false,
       tweenDuration: 160,
       timeStart: null
@@ -172,7 +178,7 @@ var Swipeout = (0, _createReactClass2.default)({
       onPanResponderRelease: this._handlePanResponderEnd,
       onPanResponderTerminate: this._handlePanResponderEnd,
       onShouldBlockNativeResponder: function onShouldBlockNativeResponder(event, gestureState) {
-        return false;
+        return true;
       },
       onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
         return false;
@@ -195,7 +201,7 @@ var Swipeout = (0, _createReactClass2.default)({
     } else {
       this._callOnClose();
     }
-    this.refs.swipeoutContent.measure(function (ox, oy, width, height) {
+    this.swipeoutContent.measure(function (ox, oy, width, height) {
       var buttonWidth = _this2.props.buttonWidth || width / 5;
       _this2.setState({
         btnWidth: buttonWidth,
@@ -266,6 +272,10 @@ var Swipeout = (0, _createReactClass2.default)({
       }
     }
 
+    if (this.state.contentPos === 0 && !this.props.disabled) {
+      this.props.onPress();
+    }
+
     //  Allow scroll
     if (this.props.scroll) this.props.scroll(true);
   },
@@ -337,7 +347,7 @@ var Swipeout = (0, _createReactClass2.default)({
   _openRight: function _openRight() {
     var _this3 = this;
 
-    this.refs.swipeoutContent.measure(function (ox, oy, width, height) {
+    this.swipeoutContent.measure(function (ox, oy, width, height) {
       var btnWidth = _this3.props.buttonWidth || width / 5;
 
       _this3.setState({
@@ -359,7 +369,7 @@ var Swipeout = (0, _createReactClass2.default)({
   _openLeft: function _openLeft() {
     var _this4 = this;
 
-    this.refs.swipeoutContent.measure(function (ox, oy, width, height) {
+    this.swipeoutContent.measure(function (ox, oy, width, height) {
       var btnWidth = _this4.props.buttonWidth || width / 5;
 
       _this4.setState({
@@ -379,6 +389,8 @@ var Swipeout = (0, _createReactClass2.default)({
   },
 
   render: function render() {
+    var _this5 = this;
+
     var contentWidth = this.state.contentWidth;
     var posX = this.getTweeningValue('contentPos');
 
@@ -427,7 +439,9 @@ var Swipeout = (0, _createReactClass2.default)({
       _react2.default.createElement(
         _reactNative.View,
         _extends({
-          ref: 'swipeoutContent',
+          ref: function ref(node) {
+            return _this5.swipeoutContent = node;
+          },
           style: styleContent,
           onLayout: this._onLayout
         }, this._panResponder.panHandlers),
@@ -462,7 +476,7 @@ var Swipeout = (0, _createReactClass2.default)({
   },
 
   _renderButton: function _renderButton(btn, i) {
-    var _this5 = this;
+    var _this6 = this;
 
     return _react2.default.createElement(SwipeoutBtn, {
       backgroundColor: btn.backgroundColor,
@@ -472,7 +486,7 @@ var Swipeout = (0, _createReactClass2.default)({
       height: this.state.contentHeight,
       key: i,
       onPress: function onPress() {
-        return _this5._autoClose(btn);
+        return _this6._autoClose(btn);
       },
       text: btn.text,
       type: btn.type,

index.d.ts

@@ -18,6 +18,7 @@ declare module 'react-native-swipeout' {
         close?: boolean;
         disabled?: boolean;
         left?: SwipeoutButtonProperties[];
+        onPress?(): void;
         onOpen?(sectionId: number, rowId: number, direction: string): void;
         onClose?(sectionId: number, rowId: number, direction: string): void;
         right?: SwipeoutButtonProperties[];

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "create-react-class": "^15.6.0",
     "prop-types": "^15.5.10",
+    "react-native-swipeout": "git+https://github.com/TareqElMasri/react-native-swipeout.git",
     "react-tween-state": "^0.1.5"
   },
   "devDependencies": {

src/index.js

@@ -13,6 +13,7 @@ import {
   TouchableHighlight,
   StyleSheet,
   Text,
+  Platform,
   View,
   ViewPropTypes,
 } from 'react-native';
@@ -117,7 +118,9 @@ const Swipeout = createReactClass({
       disabled: false,
       rowID: -1,
       sectionID: -1,
-      sensitivity: 50,
+      disabled: false,
+      onPress: () => null,
+      sensitivity: Platform.select({ android: 50, ios: 0 })
     };
   },
 
@@ -131,6 +134,7 @@ const Swipeout = createReactClass({
       contentPos: 0,
       contentWidth: 0,
       openedRight: false,
+      openedLeft: false,
       swiping: false,
       tweenDuration: 160,
       timeStart: null,
@@ -145,11 +149,11 @@ const Swipeout = createReactClass({
       onMoveShouldSetPanResponderCapture: (event, gestureState) =>
         Math.abs(gestureState.dx) > this.props.sensitivity &&
         Math.abs(gestureState.dy) <= this.props.sensitivity,
-      onPanResponderGrant: this._handlePanResponderGrant,
+    onPanResponderGrant: this._handlePanResponderGrant,
       onPanResponderMove: this._handlePanResponderMove,
       onPanResponderRelease: this._handlePanResponderEnd,
       onPanResponderTerminate: this._handlePanResponderEnd,
-      onShouldBlockNativeResponder: (event, gestureState) => false,
+      onShouldBlockNativeResponder: (event, gestureState) => true,
       onPanResponderTerminationRequest: () => false,
     });
   },
@@ -240,6 +244,10 @@ const Swipeout = createReactClass({
       }
     }
 
+    if (this.state.contentPos === 0 && !this.props.disabled) {
+      this.props.onPress()
+    }
+
     //  Allow scroll
     if (this.props.scroll) this.props.scroll(true);
   },