From ecad309497d1ce30b7b8cc5f4e3441a5615237c6 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Wed, 17 Oct 2018 12:41:42 -0700 Subject: [PATCH] Support gestureResponseDistance --- packages/stack/example/src/SimpleStack.js | 5 +++- .../src/views/StackView/StackViewLayout.js | 28 +++++++++++++++---- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/stack/example/src/SimpleStack.js b/packages/stack/example/src/SimpleStack.js index 68e0da5b..cb4e3603 100644 --- a/packages/stack/example/src/SimpleStack.js +++ b/packages/stack/example/src/SimpleStack.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, View, Text } from 'react-native'; +import { Dimensions, Button, View, Text } from 'react-native'; import { withNavigation } from '@react-navigation/core'; import { createStackNavigator } from 'react-navigation-stack'; @@ -47,6 +47,9 @@ class ListScreen extends React.Component { class DetailsScreen extends React.Component { static navigationOptions = { title: 'Details', + gestureResponseDistance: { + horizontal: Dimensions.get('window').width, + } }; render() { diff --git a/packages/stack/src/views/StackView/StackViewLayout.js b/packages/stack/src/views/StackView/StackViewLayout.js index ee16bca8..a91e39be 100644 --- a/packages/stack/src/views/StackView/StackViewLayout.js +++ b/packages/stack/src/views/StackView/StackViewLayout.js @@ -303,8 +303,24 @@ class StackViewLayout extends React.Component { ); } + _getGestureResponseDistance = () => { + const { scene } = this.props.transitionProps; + const { options } = scene.descriptor; + const { + gestureResponseDistance: userGestureResponseDistance = {}, + } = options; + + // Doesn't make sense for a response distance of 0, so this works fine + return this._isModal() + ? userGestureResponseDistance.vertical || + GESTURE_RESPONSE_DISTANCE_VERTICAL + : userGestureResponseDistance.horizontal || + GESTURE_RESPONSE_DISTANCE_HORIZONTAL; + }; + _gestureActivationCriteria = () => { let { layout } = this.props.transitionProps; + let gestureResponseDistance = this._getGestureResponseDistance(); if (this._isMotionVertical()) { let height = layout.height.__getValue(); @@ -312,11 +328,11 @@ class StackViewLayout extends React.Component { return { maxDeltaX: 15, minOffsetY: 5, - hitSlop: { bottom: -height + GESTURE_RESPONSE_DISTANCE_VERTICAL }, + hitSlop: { bottom: -height + gestureResponseDistance }, }; } else { let width = layout.width.__getValue(); - let hitSlop = -width + GESTURE_RESPONSE_DISTANCE_HORIZONTAL; + let hitSlop = -width + gestureResponseDistance; return { minOffsetX: this._isMotionInverted() ? -5 : 5, @@ -339,6 +355,10 @@ class StackViewLayout extends React.Component { }; _isMotionVertical = () => { + return this._isModal(); + }; + + _isModal = () => { return this.props.mode === 'modal'; }; @@ -676,8 +696,6 @@ class StackViewLayout extends React.Component { } _getTransitionConfig = () => { - const isModal = this.props.mode === 'modal'; - return TransitionConfigs.getTransitionConfig( this.props.transitionConfig, { @@ -685,7 +703,7 @@ class StackViewLayout extends React.Component { position: this._getPosition(), }, this.props.lastTransitionProps, - isModal + this._isModal() ); };