From eb0bd221acd58b1939eb01f1c1448aa37c73c251 Mon Sep 17 00:00:00 2001 From: Jonathan Werner Date: Thu, 29 Sep 2016 11:45:56 +0200 Subject: [PATCH] add support for gestureResponseDistance prop This is a property that NavigationCardStackPanResponder takes to customize the touch area for back swipes --- modules/ReducerUtils.js | 2 ++ modules/Route.js | 2 ++ modules/StackRoute.js | 2 ++ modules/StackRouteView.js | 10 +++++++++- modules/TabsRoute.js | 2 ++ modules/TabsRouteView.js | 10 +++++++++- modules/TypeDefinition.js | 2 ++ 7 files changed, 28 insertions(+), 2 deletions(-) diff --git a/modules/ReducerUtils.js b/modules/ReducerUtils.js index f85a450..f94909a 100644 --- a/modules/ReducerUtils.js +++ b/modules/ReducerUtils.js @@ -304,6 +304,7 @@ export function createPartialState( const transition = currentRoute.transition; const onSwipeBack = currentRoute.onSwipeBack; const onSwipeForward = currentRoute.onSwipeForward; + const gestureResponseDistance = currentRoute.gestureResponseDistance; const reducer = currentRoute.reducer; const indexRoute = getIndexRoute(currentRoute); @@ -357,6 +358,7 @@ export function createPartialState( reducer, onSwipeBack, onSwipeForward, + gestureResponseDistance, }; if (prevState) { diff --git a/modules/Route.js b/modules/Route.js index c502c1b..5e92942 100644 --- a/modules/Route.js +++ b/modules/Route.js @@ -21,6 +21,7 @@ type Props = { transition: ?string, onSwipeBack: Function, onSwipeForward: Function, + gestureResponseDistance?: ?number, }; const { ROUTE } = RouteTypes; @@ -42,6 +43,7 @@ class Route extends Component { transition: PropTypes.string, onSwipeBack: PropTypes.func, onSwipeForward: PropTypes.func, + gestureResponseDistance: PropTypes.number, }; static defaultProps = { diff --git a/modules/StackRoute.js b/modules/StackRoute.js index e61c5cf..9fdcfe8 100644 --- a/modules/StackRoute.js +++ b/modules/StackRoute.js @@ -20,6 +20,7 @@ type Props = { reducer: Function, routeType: string, transition: string, + gestureResponseDistance?: ?number, }; const { STACK_ROUTE } = RouteTypes; @@ -39,6 +40,7 @@ class StackRoute extends Component { reducer: PropTypes.func.isRequired, routeType: PropTypes.string.isRequired, transition: PropTypes.string.isRequired, + gestureResponseDistance: PropTypes.number, }; static defaultProps = { diff --git a/modules/StackRouteView.js b/modules/StackRouteView.js index b7a5ad1..fd168d3 100644 --- a/modules/StackRouteView.js +++ b/modules/StackRouteView.js @@ -91,9 +91,14 @@ class StackRouteView extends Component { return null; } - const { transition: parentTransition } = props.navigationState; + const { + transition: parentTransition, + gestureResponseDistance: parentGestureResponseDistance, + } = props.navigationState; + const { transition: sceneTransition, + gestureResponseDistance, onSwipeBack, onSwipeForward, } = scene.route; @@ -112,6 +117,9 @@ class StackRouteView extends Component { const viewStyle = styleInterpolator(props); const panHandlers = panResponder({ ...props, + // NavigationCardStackPanResponder defaults to 30; this is not enough to conform to the + // touch area provided by the native IOS back swipe behaviour => double the default to 60 + gestureResponseDistance: gestureResponseDistance || parentGestureResponseDistance || 60, onNavigateBack: () => onSwipeBack && onSwipeBack(router), onNavigateForward: () => onSwipeForward && onSwipeForward(router), }); diff --git a/modules/TabsRoute.js b/modules/TabsRoute.js index d1391c9..1c957f7 100644 --- a/modules/TabsRoute.js +++ b/modules/TabsRoute.js @@ -20,6 +20,7 @@ type Props = { reducer: Function, routeType: string, transition: string, + gestureResponseDistance?: ?number, }; const { TABS_ROUTE } = RouteTypes; @@ -39,6 +40,7 @@ class TabsRoute extends Component { reducer: PropTypes.func.isRequired, routeType: PropTypes.string.isRequired, transition: PropTypes.string.isRequired, + gestureResponseDistance: PropTypes.number, }; static defaultProps = { diff --git a/modules/TabsRouteView.js b/modules/TabsRouteView.js index 091a095..5cdafb9 100644 --- a/modules/TabsRouteView.js +++ b/modules/TabsRouteView.js @@ -90,9 +90,14 @@ class TabsRouteView extends Component { return null; } - const { transition: parentTransition } = props.navigationState; + const { + transition: parentTransition, + gestureResponseDistance: parentGestureResponseDistance, + } = props.navigationState; + const { transition: sceneTransition, + gestureResponseDistance, onSwipeBack, onSwipeForward, } = scene.route; @@ -111,6 +116,9 @@ class TabsRouteView extends Component { const viewStyle = styleInterpolator(props); const panHandlers = panResponder({ ...props, + // NavigationCardStackPanResponder defaults to 30; this is not enough to conform to the + // touch area provided by the native IOS back swipe behaviour => double the default to 60 + gestureResponseDistance: gestureResponseDistance || parentGestureResponseDistance || 60, onNavigateBack: () => onSwipeBack && onSwipeBack(router), onNavigateForward: () => onSwipeForward && onSwipeForward(router), }); diff --git a/modules/TypeDefinition.js b/modules/TypeDefinition.js index 4dc4555..93e63a2 100644 --- a/modules/TypeDefinition.js +++ b/modules/TypeDefinition.js @@ -33,6 +33,7 @@ export type EnhancedNavigationRoute = { reducer: Function, onSwipeBack: ?Function, onSwipeForward: ?Function, + gestureResponseDistance: ?number, }; export type IndexRouteDef = { @@ -51,6 +52,7 @@ export type RouteDef = { reducer: Function, onSwipeBack: ?Function, onSwipeForward: ?Function, + gestureResponseDistance?: number, }; export type NoPathRouteDef = {