add support for gestureResponseDistance prop

modules/ReducerUtils.js

@@ -304,6 +304,7 @@ export function createPartialState(
     const transition = currentRoute.transition;
     const onSwipeBack = currentRoute.onSwipeBack;
     const onSwipeForward = currentRoute.onSwipeForward;
+    const gestureResponseDistance = currentRoute.gestureResponseDistance;
     const reducer = currentRoute.reducer;
 
     const indexRoute = getIndexRoute(currentRoute);
@@ -357,6 +358,7 @@ export function createPartialState(
       reducer,
       onSwipeBack,
       onSwipeForward,
+      gestureResponseDistance,
     };
 
     if (prevState) {

modules/Route.js

@@ -21,6 +21,7 @@ type Props = {
   transition: ?string,
   onSwipeBack: Function,
   onSwipeForward: Function,
+  gestureResponseDistance?: ?number,
 };
 
 const { ROUTE } = RouteTypes;
@@ -42,6 +43,7 @@ class Route extends Component<any, Props, any> {
     transition: PropTypes.string,
     onSwipeBack: PropTypes.func,
     onSwipeForward: PropTypes.func,
+    gestureResponseDistance: PropTypes.number,
   };
 
   static defaultProps = {

modules/StackRoute.js

@@ -20,6 +20,7 @@ type Props = {
   reducer: Function,
   routeType: string,
   transition: string,
+  gestureResponseDistance?: ?number,
 };
 
 const { STACK_ROUTE } = RouteTypes;
@@ -39,6 +40,7 @@ class StackRoute extends Component<any, Props, any> {
     reducer: PropTypes.func.isRequired,
     routeType: PropTypes.string.isRequired,
     transition: PropTypes.string.isRequired,
+    gestureResponseDistance: PropTypes.number,
   };
 
   static defaultProps = {

modules/StackRouteView.js

@@ -91,9 +91,14 @@ class StackRouteView extends Component<any, Props, any> {
       return null;
     }
 
-    const { transition: parentTransition } = props.navigationState;
+    const {
+      transition: parentTransition,
+      gestureResponseDistance: parentGestureResponseDistance,
+    } = props.navigationState;
+
     const {
       transition: sceneTransition,
+      gestureResponseDistance,
       onSwipeBack,
       onSwipeForward,
     } = scene.route;
@@ -112,6 +117,9 @@ class StackRouteView extends Component<any, Props, any> {
     const viewStyle = styleInterpolator(props);
     const panHandlers = panResponder({
       ...props,
+      // NavigationCardStackPanResponder defaults to 30; this is not enough to conform to the
+      // touch area provided by the native IOS back swipe behaviour => double the default to 60
+      gestureResponseDistance: gestureResponseDistance || parentGestureResponseDistance || 60,
       onNavigateBack: () => onSwipeBack && onSwipeBack(router),
       onNavigateForward: () => onSwipeForward && onSwipeForward(router),
     });

modules/TabsRoute.js

@@ -20,6 +20,7 @@ type Props = {
   reducer: Function,
   routeType: string,
   transition: string,
+  gestureResponseDistance?: ?number,
 };
 
 const { TABS_ROUTE } = RouteTypes;
@@ -39,6 +40,7 @@ class TabsRoute extends Component<any, Props, any> {
     reducer: PropTypes.func.isRequired,
     routeType: PropTypes.string.isRequired,
     transition: PropTypes.string.isRequired,
+    gestureResponseDistance: PropTypes.number,
   };
 
   static defaultProps = {

modules/TabsRouteView.js

@@ -90,9 +90,14 @@ class TabsRouteView extends Component<any, Props, any> {
       return null;
     }
 
-    const { transition: parentTransition } = props.navigationState;
+    const {
+      transition: parentTransition,
+      gestureResponseDistance: parentGestureResponseDistance,
+    } = props.navigationState;
+
     const {
       transition: sceneTransition,
+      gestureResponseDistance,
       onSwipeBack,
       onSwipeForward,
      } = scene.route;
@@ -111,6 +116,9 @@ class TabsRouteView extends Component<any, Props, any> {
     const viewStyle = styleInterpolator(props);
     const panHandlers = panResponder({
       ...props,
+      // NavigationCardStackPanResponder defaults to 30; this is not enough to conform to the
+      // touch area provided by the native IOS back swipe behaviour => double the default to 60
+      gestureResponseDistance: gestureResponseDistance || parentGestureResponseDistance || 60,
       onNavigateBack: () => onSwipeBack && onSwipeBack(router),
       onNavigateForward: () => onSwipeForward && onSwipeForward(router),
     });

modules/TypeDefinition.js

@@ -33,6 +33,7 @@ export type EnhancedNavigationRoute = {
   reducer: Function,
   onSwipeBack: ?Function,
   onSwipeForward: ?Function,
+  gestureResponseDistance: ?number,
 };
 
 export type IndexRouteDef = {
@@ -51,6 +52,7 @@ export type RouteDef = {
   reducer: Function,
   onSwipeBack: ?Function,
   onSwipeForward: ?Function,
+  gestureResponseDistance?: number,
 };
 
 export type NoPathRouteDef = {