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
This commit is contained in:
Nivetha Singara Vadivelu 2016-07-10 20:28:20 -07:00 committed by Facebook Github Bot 8
parent 4aedcc7670
commit 0b773c41ac
1 changed files with 16 additions and 3 deletions

View File

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