status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Luke Dubert 2016-04-12 11:07:38 -07:00 committed by Facebook Github Bot 3
parent 8a7eceeb4f
commit ca2fb70fa9
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Libraries/CustomComponents/Navigator/Navigator.js
View File

@ -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;
}