Merge pull request Cederman#5 from dougkeen/master

Allow setting of minimum clearance from left and/or right edge...
gurs1kh · Jan 22, 2018 · 8badc48 · 8badc48
2 parents ae70528 + 2c748a0
commit 8badc48
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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,
     disable: PropTypes.bool,
 
     // styles
@@ -153,6 +155,8 @@ export default class Swipeable extends PureComponent {
     onRef: noop,
     onPanAnimatedValueRef: noop,
     swipeStartMinDistance: 15,
+    swipeStartMinLeftEdgeClearance: 0,
+    swipeStartMinRightEdgeClearance: 0,
     bounceOnMount: false,
     disable: false,
   };
@@ -257,9 +261,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) => {
     if (this.props.disable) {