Skip to content

Fix navigation card stack pan responder #8076

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ahanriat wants to merge 3 commits into from
Closed

Fix navigation card stack pan responder #8076

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
73d7c94
[Navigation Card Stack] Add params to control verticalGestureHeightDe…
ahanriat Jun 20, 2016
5f2bb12
Use only one props gestureResponseDistance instead of verticalGesture…
ahanriat Jun 22, 2016
97659c5
Fix Flow type
ahanriat Jul 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ type Props = {
renderScene: NavigationSceneRenderer,
cardStyle?: any,
style: any,
gestureResponseDistance?: ?number,
};

type DefaultProps = {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -164,6 +166,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
const panHandlersProps = {
...props,
onNavigateBack: this.props.onNavigateBack,
gestureResponseDistance: this.props.gestureResponseDistance,
};
Copy link

@hedgerwang hedgerwang Jun 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please also update static propTypes = {

const panHandlers = isVertical ?
NavigationCardStackPanResponder.forVertical(panHandlersProps) :
Expand Down
20 changes: 10 additions & 10 deletions Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,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.
*/
Expand All @@ -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,
};

/**
Expand Down Expand Up @@ -115,8 +111,12 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {
layout.width.__getValue();

const positionMax = isVertical ?
RESPOND_POSITION_MAX_VERTICAL :
RESPOND_POSITION_MAX_HORIZONTAL;
props.gestureResponseDistance :
Copy link
Contributor Author

@ahanriat ahanriat Jun 22, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should or not add a default value for gestureResponseDistance with vertical direction

/**
* 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;
Expand Down
3 changes: 3 additions & 0 deletions Libraries/NavigationExperimental/NavigationTypeDefinition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down