Permalink
Browse files

Fix navigation card stack pan responder

Summary:
Hi folks !
๐Ÿ”ง Fix the navigation card stack pan responder when the `vertical` direction is enabled.

**Issue:**
When using a `ScrollView` with the `vertical` direction enabled, the pan handler catch the gesture before the `ScrollView`.

I don't know why there was no default value here for `RESPOND_POSITION_MAX_VERTICAL` 5162eb3
ericvicenti could you tell me what you think about setting a default value for `RESPOND_POSITION_MAX_VERTICAL` ? ๐Ÿ˜ƒ

Thanks !!

**EDIT June 15, 2016**
I'll update this PR this week end to provide a way to give custom values as there is no magic value for `RESPOND_POSITION_MAX_VERTICAL`

**EDIT June 24, 2016**
I've added a props `gestureResponseDistance` to control both the `RESPOND_POSITION_MAX_VERTICAL` and `RESPOND_POSITION_MAX_HORIZONTAL`
Closes #8076

Differential Revision: D3605973

Pulled By: ericvicenti

fbshipit-source-id: 158d88cf8ebbab742bf0b38c217ae502e9dd1963
  • Loading branch information...
1 parent 1234d27 commit c658cc545f0e8c508ab44389deed39801f4e472c @ahanriat ahanriat committed with Facebook Github Bot 3 Jul 25, 2016
@@ -64,6 +64,7 @@ type Props = {
renderScene: NavigationSceneRenderer,
cardStyle?: any,
style: any,
+ gestureResponseDistance?: ?number,
};
type DefaultProps = {
@@ -95,6 +96,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
renderOverlay: PropTypes.func,
renderScene: PropTypes.func.isRequired,
cardStyle: View.propTypes.style,
+ gestureResponseDistance: PropTypes.number,
};
static defaultProps: DefaultProps = {
@@ -164,6 +166,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
const panHandlersProps = {
...props,
onNavigateBack: this.props.onNavigateBack,
+ gestureResponseDistance: this.props.gestureResponseDistance,
};
const panHandlers = isVertical ?
NavigationCardStackPanResponder.forVertical(panHandlersProps) :
@@ -40,14 +40,6 @@ const POSITION_THRESHOLD = 1 / 3;
const RESPOND_THRESHOLD = 15;
/**
- * The distance from the edge of the navigator which gesture response can start for.
- * For horizontal scroll views, a distance of 30 from the left of the screen is the
- * standard maximum position to start touch responsiveness.
- */
-const RESPOND_POSITION_MAX_HORIZONTAL = 30;
-const RESPOND_POSITION_MAX_VERTICAL = null;
-
-/**
* The threshold (in pixels) to finish the gesture action.
*/
const DISTANCE_THRESHOLD = 100;
@@ -64,6 +56,10 @@ export type NavigationGestureDirection = 'horizontal' | 'vertical';
type Props = NavigationSceneRendererProps & {
onNavigateBack: ?Function,
+ /**
+ * The distance from the edge of the navigator which gesture response can start for.
+ **/
+ gestureResponseDistance: ?number,
};
/**
@@ -115,8 +111,12 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {
layout.width.__getValue();
const positionMax = isVertical ?
- RESPOND_POSITION_MAX_VERTICAL :
- RESPOND_POSITION_MAX_HORIZONTAL;
+ props.gestureResponseDistance :
+ /**
+ * For horizontal scroll views, a distance of 30 from the left of the screen is the
+ * standard maximum position to start touch responsiveness.
+ */
+ props.gestureResponseDistance || 30;
if (positionMax != null && currentDragPosition > positionMax) {
return false;
@@ -70,6 +70,9 @@ export type NavigationTransitionProps = {
// The active scene, corresponding to the route at
// `navigationState.routes[navigationState.index]`.
scene: NavigationScene,
+
+ // The gesture distance for `horizontal` and `vertical` transitions
+ gestureResponseDistance?: ?number,
};
// Similar to `NavigationTransitionProps`, except that the prop `scene`

0 comments on commit c658cc5

Please sign in to comment.