diff --git a/example/App.js b/example/App.js index 67112b1..a1f87d5 100644 --- a/example/App.js +++ b/example/App.js @@ -1,6 +1,6 @@ import React from 'react'; import Expo from 'expo'; -import { FlatList } from 'react-native'; +import { FlatList, I18nManager } from 'react-native'; import { createSwitchNavigator } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { ListSection, Divider } from 'react-native-paper'; @@ -10,8 +10,12 @@ import TransparentStack from './src/TransparentStack'; import ModalStack from './src/ModalStack'; import GestureInteraction from './src/GestureInteraction'; +// Uncomment the following line to force RTL. Requires closing and re-opening +// your app after you first load it with this option enabled. +// I18nManager.forceRTL(false); + // Comment the following two lines to stop using react-native-screens -import { useScreens } from 'react-native-screens'; +// import { useScreens } from 'react-native-screens'; // useScreens(); const data = [ diff --git a/package.json b/package.json index 5418ab5..361f8a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-navigation-stack", - "version": "1.0.0-alpha.5", + "version": "1.0.0-alpha.8", "description": "Stack navigator component for React Navigation", "main": "dist/index.js", "files": [ diff --git a/src/views/StackView/StackViewLayout.js b/src/views/StackView/StackViewLayout.js index 09bccd1..3d35e86 100644 --- a/src/views/StackView/StackViewLayout.js +++ b/src/views/StackView/StackViewLayout.js @@ -415,22 +415,38 @@ class StackViewLayout extends React.Component { _handleActivateGestureHorizontal = nativeEvent => { let { index } = this.props.transitionProps.navigation.state; - this.setState({ - gesturePosition: Animated.add( - index, - Animated.multiply( - -1, + if (this._isMotionInverted()) { + this.setState({ + gesturePosition: Animated.add( + index, Animated.divide( this.gestureX, this.props.transitionProps.layout.width ) - ) - ).interpolate({ - inputRange: [index - 1, index], - outputRange: [index - 1, index], - extrapolate: 'clamp', - }), - }); + ).interpolate({ + inputRange: [index - 1, index], + outputRange: [index - 1, index], + extrapolate: 'clamp', + }), + }); + } else { + this.setState({ + gesturePosition: Animated.add( + index, + Animated.multiply( + -1, + Animated.divide( + this.gestureX, + this.props.transitionProps.layout.width + ) + ) + ).interpolate({ + inputRange: [index - 1, index], + outputRange: [index - 1, index], + extrapolate: 'clamp', + }), + }); + } }; _handleActivateGestureVertical = nativeEvent => { @@ -518,8 +534,8 @@ class StackViewLayout extends React.Component { // Calculate animate duration according to gesture speed and moved distance const distance = layout.height.__getValue(); - const movedDistance = nativeEvent.translationX; - const gestureVelocity = nativeEvent.velocityX; + const movedDistance = nativeEvent.translationY; + const gestureVelocity = nativeEvent.velocityY; const defaultVelocity = distance / ANIMATION_DURATION; const velocity = Math.max(Math.abs(gestureVelocity), defaultVelocity); const resetDuration = movedDistance / velocity;