From ca2fb70fa9affc6ad9acae6bf116c084cdaa0da3 Mon Sep 17 00:00:00 2001
From: Luke Dubert <luke@bluebridgedigital.com>
Date: Tue, 12 Apr 2016 11:07:38 -0700
Subject: [PATCH] Fix: swiping in navigator too quickly causes the gesture to
 be lost

Summary:**Issue:**

In the Navigator if a user attempts to navigate backwards (or forwards) through the route stack by swiping and they perform the gesture too quickly, the gesture is lost and nothing happens.

**Cause:**

In the `_matchGestureAction` function, the variable `moveStartedInRegion` is created and evaluates the gesture to determine if it was initiated in a valid region, (a.k.a. within the `edgeHitWidth`). The issue arises because `moveStartedInRegion` uses `currentLoc` (which is created from `gestureState.moveX`/`Y`) and when the gesture is performed using a flick of the finger, the first value of the `currentLoc` is outside of the `edgeHitWidth`.

**Solution:**

The solution is to track the coordinates of the initial grant (`gestureState.x0`/`y0`), and use that value instead of the `currentLoc` when evaluating `moveStartedInRegion`. The `currentLoc` is still needed however, for when the gestureState does not have a an initial x and y value, because the pan responder has not been granted.
Closes https://github.com/facebook/react-native/pull/6249

Differential Revision: D3168726

Pulled By: ericvicenti

fb-gh-sync-id: f2ac462e59bdc38536b99cac6a4877c99fa4e869
fbshipit-source-id: f2ac462e59bdc38536b99cac6a4877c99fa4e869
---
 Libraries/CustomComponents/Navigator/Navigator.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/Libraries/CustomComponents/Navigator/Navigator.js b/Libraries/CustomComponents/Navigator/Navigator.js
index 45658d998cc..3aba43cf69d 100644
--- a/Libraries/CustomComponents/Navigator/Navigator.js
+++ b/Libraries/CustomComponents/Navigator/Navigator.js
@@ -784,12 +784,14 @@ var Navigator = React.createClass({
       }
       var isTravelVertical = gesture.direction === 'top-to-bottom' || gesture.direction === 'bottom-to-top';
       var isTravelInverted = gesture.direction === 'right-to-left' || gesture.direction === 'bottom-to-top';
+      var startedLoc = isTravelVertical ? gestureState.y0 : gestureState.x0;
       var currentLoc = isTravelVertical ? gestureState.moveY : gestureState.moveX;
       var travelDist = isTravelVertical ? gestureState.dy : gestureState.dx;
       var oppositeAxisTravelDist =
         isTravelVertical ? gestureState.dx : gestureState.dy;
       var edgeHitWidth = gesture.edgeHitWidth;
       if (isTravelInverted) {
+        startedLoc = -startedLoc;
         currentLoc = -currentLoc;
         travelDist = -travelDist;
         oppositeAxisTravelDist = -oppositeAxisTravelDist;
@@ -797,8 +799,11 @@ var Navigator = React.createClass({
           -(SCREEN_HEIGHT - edgeHitWidth) :
           -(SCREEN_WIDTH - edgeHitWidth);
       }
+      if (startedLoc === 0) {
+        startedLoc = currentLoc;
+      }
       var moveStartedInRegion = gesture.edgeHitWidth == null ||
-        currentLoc < edgeHitWidth;
+        startedLoc < edgeHitWidth;
       if (!moveStartedInRegion) {
         return false;
       }