From 4ee4340da5a3890b574181fb9632b8666f67140f Mon Sep 17 00:00:00 2001
From: Doug Keen <doug@swoot.com>
Date: Thu, 28 Sep 2017 14:51:33 -0700
Subject: [PATCH] Allow setting of minimum clearance from left and/or right
 edge required to enable swipe gestures. Addresses issue #45.

---
 example/swipeable-example.js |  5 +++++
 src/index.js                 | 20 +++++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/example/swipeable-example.js b/example/swipeable-example.js
index fbaafaa..406a9e9 100644
--- a/example/swipeable-example.js
+++ b/example/swipeable-example.js
@@ -57,6 +57,8 @@ function Example1({onOpen, onClose}) {
       ]}
       onRightButtonsOpenRelease={onOpen}
       onRightButtonsCloseRelease={onClose}
+      swipeStartMinLeftEdgeClearance={10}
+      swipeStartMinRightEdgeClearance={10}
     >
       <View style={[styles.listItem, {backgroundColor: 'salmon'}]}>
         <Text>Example 1</Text>
@@ -96,6 +98,8 @@ function Example2({onOpen, onClose}) {
       )}
       onLeftButtonsOpenRelease={onOpen}
       onLeftButtonsCloseRelease={onClose}
+      swipeStartMinLeftEdgeClearance={10}
+      swipeStartMinRightEdgeClearance={10}
     >
       <View style={[styles.listItem, {backgroundColor: 'paleturquoise'}]}>
         <Text>Example 2</Text>
@@ -127,6 +131,7 @@ class Example3 extends Component {
         onLeftActionActivate={() => this.setState({leftActionActivated: true})}
         onLeftActionDeactivate={() => this.setState({leftActionActivated: false})}
         onLeftActionComplete={() => this.setState({toggle: !toggle})}
+        swipeStartMinLeftEdgeClearance={10}
       >
         <View style={[styles.listItem, {backgroundColor: toggle ? 'thistle' : 'darkseagreen'}]}>
           <Text>Example 3</Text>
diff --git a/src/index.js b/src/index.js
index d77cf98..72df1c9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-unresolved, import/extensions */
 import React, {PureComponent} from 'react';
-import {Animated, Easing, PanResponder, StyleSheet, View, ViewPropTypes} from 'react-native';
+import {Animated, Dimensions, Easing, PanResponder, StyleSheet, View, ViewPropTypes} from 'react-native';
 import {PropTypes} from 'prop-types';
 /* eslint-enable import/no-unresolved, import/extensions */
 
@@ -74,6 +74,8 @@ export default class Swipeable extends PureComponent {
     onRef: PropTypes.func,
     onPanAnimatedValueRef: PropTypes.func,
     swipeStartMinDistance: PropTypes.number,
+    swipeStartMinLeftEdgeClearance: PropTypes.number,
+    swipeStartMinRightEdgeClearance: PropTypes.number,
 
     // styles
     style: ViewPropTypes.style,
@@ -151,7 +153,9 @@ export default class Swipeable extends PureComponent {
     // misc
     onRef: noop,
     onPanAnimatedValueRef: noop,
-    swipeStartMinDistance: 15
+    swipeStartMinDistance: 15,
+    swipeStartMinLeftEdgeClearance: 0,
+    swipeStartMinRightEdgeClearance: 0,
   };
 
   state = {
@@ -206,9 +210,15 @@ export default class Swipeable extends PureComponent {
     dy: this.state.pan.y
   }]);
 
-  _handleMoveShouldSetPanResponder = (event, gestureState) => (
-    Math.abs(gestureState.dx) > this.props.swipeStartMinDistance
-  );
+  _handleMoveShouldSetPanResponder = (event, gestureState) => {
+    const {swipeStartMinDistance, swipeStartMinLeftEdgeClearance, swipeStartMinRightEdgeClearance} = this.props;
+    const gestureStartX = gestureState.moveX - gestureState.dx;
+    return Math.abs(gestureState.dx) > swipeStartMinDistance
+      && (swipeStartMinLeftEdgeClearance === 0
+        || gestureStartX >= swipeStartMinLeftEdgeClearance)
+      && (swipeStartMinRightEdgeClearance === 0
+        || gestureStartX <= Dimensions.get('window').width - swipeStartMinRightEdgeClearance);
+  };
 
   _handlePanResponderStart = (event, gestureState) => {
     const {lastOffset, pan} = this.state;