status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-26 16:10:58 +00:00
Code Issues Projects Releases Wiki Activity

Fix: swiping in navigator too quickly causes the gesture to be lost

Browse Source 
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 isTravelVertical = gesture.direction === 'top-to-bottom' || gesture.direction === 'bottom-to-top';
var isTravelInverted = gesture.direction === 'right-to-left' || 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 currentLoc = isTravelVertical ? gestureState.moveY : gestureState.moveX;
var travelDist = isTravelVertical ? gestureState.dy : gestureState.dx; var travelDist = isTravelVertical ? gestureState.dy : gestureState.dx;
var oppositeAxisTravelDist = var oppositeAxisTravelDist =
isTravelVertical ? gestureState.dx : gestureState.dy; isTravelVertical ? gestureState.dx : gestureState.dy;
var edgeHitWidth = gesture.edgeHitWidth; var edgeHitWidth = gesture.edgeHitWidth;
if (isTravelInverted) { if (isTravelInverted) {
startedLoc = -startedLoc;
currentLoc = -currentLoc; currentLoc = -currentLoc;
travelDist = -travelDist; travelDist = -travelDist;
oppositeAxisTravelDist = -oppositeAxisTravelDist; oppositeAxisTravelDist = -oppositeAxisTravelDist;
@ -797,8 +799,11 @@ var Navigator = React.createClass({
-(SCREEN_HEIGHT - edgeHitWidth) : -(SCREEN_HEIGHT - edgeHitWidth) :
-(SCREEN_WIDTH - edgeHitWidth); -(SCREEN_WIDTH - edgeHitWidth);
} }
if (startedLoc === 0) {
startedLoc = currentLoc;
}
var moveStartedInRegion = gesture.edgeHitWidth == null || var moveStartedInRegion = gesture.edgeHitWidth == null ||
currentLoc < edgeHitWidth; startedLoc < edgeHitWidth;
if (!moveStartedInRegion) { if (!moveStartedInRegion) {
return false; return false;
} }