Make GESTURE_RESPONSE_DISTANCE_* configurable. (#2172)

* Make gestureResponseDistance configurable. * Fix format. * Set vertical and horizontal distance individually. * Fix type error. * Move gestureResponseDistance to NavigationStackScreenOptions. * Add documentation.
react-navigation · Sep 25, 2017 · 69397af · 69397af
1 parent b759d31
commit 69397af
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/docs/api/navigators/StackNavigator.md b/docs/api/navigators/StackNavigator.md
@@ -144,6 +144,13 @@ Color for material ripple (Android >= 5.0 only)
 
 Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android.
 
+#### `gestureResponseDistance`
+
+Object to override the distance of touch start from the edge of the screen to recognize gestures. It takes the following properties:
+
+- `horizontal` - *number* - Distance for horizontal direction. Defaults to 25.
+- `vertical` - *number* - Distance for vertical direction. Defaults to 135.
+
 ### Navigator Props
 
 The navigator component created by `StackNavigator(...)` takes the following props:

diff --git a/src/TypeDefinition.js b/src/TypeDefinition.js
@@ -282,6 +282,7 @@ export type NavigationStackScreenOptions = {
   headerRight?: React.Element<*>,
   headerStyle?: ViewStyleProp,
   gesturesEnabled?: boolean,
+  gestureResponseDistance?: { vertical?: number, horizontal?: number },
 };
 
 export type NavigationStackRouterConfig = {

diff --git a/src/views/CardStack/CardStack.js b/src/views/CardStack/CardStack.js
@@ -272,9 +272,14 @@ class CardStack extends Component {
         // Measure the distance from the touch to the edge of the screen
         const screenEdgeDistance = currentDragPosition - currentDragDistance;
         // Compare to the gesture distance relavant to card or modal
+        const {
+          gestureResponseDistance: userGestureResponseDistance = {},
+        } = this._getScreenDetails(scene).options;
         const gestureResponseDistance = isVertical
-          ? GESTURE_RESPONSE_DISTANCE_VERTICAL
-          : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+          ? userGestureResponseDistance.vertical ||
+            GESTURE_RESPONSE_DISTANCE_VERTICAL
+          : userGestureResponseDistance.horizontal ||
+            GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
         // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
         if (screenEdgeDistance > gestureResponseDistance) {
           // Reject touches that started in the middle of the screen