Navigator - making changes so that a simple flick can be detected

Summary:
Decreased the distance threshold so that the user doesn't need to swipe a large distance to
set the pan responder.

Also, set a threshold for the velocity so that a simple flick can be detected.

Reviewed By: hedgerwang

Differential Revision: D3540354

fbshipit-source-id: 251a4f14dc014bc32b3a83fa8de419f86ca40b84

Libraries/CustomComponents/NavigationExperimental/NavigationPagerPanResponder.js

@@ -37,12 +37,22 @@ type Props = NavigationSceneRendererProps & {
  */
 const {
   ANIMATION_DURATION,
-  DISTANCE_THRESHOLD,
   POSITION_THRESHOLD,
   RESPOND_THRESHOLD,
   Directions,
 } = NavigationCardStackPanResponder;
 
+/**
+ * The threshold (in pixels) to finish the gesture action.
+ */
+const DISTANCE_THRESHOLD = 50;
+
+/**
+ * The threshold to trigger the gesture action. This determines the rate of the
+ * flick when the action will be triggered
+ */
+const VELOCITY_THRESHOLD = 1.5;
+
 /**
  * Pan responder that handles gesture for a card in the cards list.
  *
@@ -159,6 +169,7 @@ class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
 
     const isVertical = this._isVertical;
     const axis = isVertical ? 'dy' : 'dx';
+    const velocityAxis = isVertical ? 'vy' : 'vx';
     const index = navigationState.index;
     const distance = gesture[axis];
 
@@ -166,7 +177,8 @@ class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
       this._reset();
       if (
         distance > DISTANCE_THRESHOLD  ||
-        value <= index - POSITION_THRESHOLD
+        value <= index - POSITION_THRESHOLD ||
+        gesture[velocityAxis] > VELOCITY_THRESHOLD
       ) {
         onNavigateBack && onNavigateBack();
         return;
@@ -174,7 +186,8 @@ class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
 
       if (
         distance < -DISTANCE_THRESHOLD ||
-        value >= index  + POSITION_THRESHOLD
+        value >= index  + POSITION_THRESHOLD ||
+        gesture[velocityAxis] < -VELOCITY_THRESHOLD
       ) {
         onNavigateForward && onNavigateForward();
       }