Fix navigation card stack pan responder

Summary:
Hi folks !
🔧 Fix the navigation card stack pan responder when the `vertical` direction is enabled.

**Issue:**
When using a `ScrollView` with the `vertical` direction enabled, the pan handler catch the gesture before the `ScrollView`.

I don't know why there was no default value here for `RESPOND_POSITION_MAX_VERTICAL` 5162eb3254
ericvicenti could you tell me what you think about setting a default value for `RESPOND_POSITION_MAX_VERTICAL` ? 😃

Thanks !!

**EDIT June 15, 2016**
I'll update this PR this week end to provide a way to give custom values as there is no magic value for `RESPOND_POSITION_MAX_VERTICAL`

**EDIT June 24, 2016**
I've added a props `gestureResponseDistance` to control both the `RESPOND_POSITION_MAX_VERTICAL` and `RESPOND_POSITION_MAX_HORIZONTAL`
Closes https://github.com/facebook/react-native/pull/8076

Differential Revision: D3605973

Pulled By: ericvicenti

fbshipit-source-id: 158d88cf8ebbab742bf0b38c217ae502e9dd1963

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -64,6 +64,7 @@ type Props = {
   renderScene: NavigationSceneRenderer,
   cardStyle?: any,
   style: any,
+  gestureResponseDistance?: ?number,
 };
 
 type DefaultProps = {
@@ -95,6 +96,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
     renderOverlay: PropTypes.func,
     renderScene: PropTypes.func.isRequired,
     cardStyle: View.propTypes.style,
+    gestureResponseDistance: PropTypes.number,
   };
 
   static defaultProps: DefaultProps = {
@@ -164,6 +166,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
     const panHandlersProps = {
       ...props,
       onNavigateBack: this.props.onNavigateBack,
+      gestureResponseDistance: this.props.gestureResponseDistance,
     };
     const panHandlers = isVertical ?
       NavigationCardStackPanResponder.forVertical(panHandlersProps) :

Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js

@@ -39,14 +39,6 @@ const POSITION_THRESHOLD = 1 / 3;
  */
 const RESPOND_THRESHOLD = 15;
 
-/**
- * The distance from the edge of the navigator which gesture response can start for.
- * For horizontal scroll views, a distance of 30 from the left of the screen is the
- * standard maximum position to start touch responsiveness.
- */
-const RESPOND_POSITION_MAX_HORIZONTAL = 30;
-const RESPOND_POSITION_MAX_VERTICAL = null;
-
 /**
  * The threshold (in pixels) to finish the gesture action.
  */
@@ -64,6 +56,10 @@ export type NavigationGestureDirection =  'horizontal' | 'vertical';
 
 type Props = NavigationSceneRendererProps & {
   onNavigateBack: ?Function,
+  /**
+  * The distance from the edge of the navigator which gesture response can start for.
+  **/
+  gestureResponseDistance: ?number,
 };
 
 /**
@@ -115,8 +111,12 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {
       layout.width.__getValue();
 
     const positionMax = isVertical ?
-      RESPOND_POSITION_MAX_VERTICAL :
+      props.gestureResponseDistance :
-      RESPOND_POSITION_MAX_HORIZONTAL;
+      /**
+      * For horizontal scroll views, a distance of 30 from the left of the screen is the
+      * standard maximum position to start touch responsiveness.
+      */
+      props.gestureResponseDistance || 30;
 
     if (positionMax != null && currentDragPosition > positionMax) {
       return false;

Libraries/NavigationExperimental/NavigationTypeDefinition.js

@@ -70,6 +70,9 @@ export type NavigationTransitionProps = {
   // The active scene, corresponding to the route at
   // `navigationState.routes[navigationState.index]`.
   scene: NavigationScene,
+
+  // The gesture distance for `horizontal` and `vertical` transitions
+  gestureResponseDistance?: ?number,
 };
 
 // Similar to `NavigationTransitionProps`, except that the prop `scene`