RTL support with native driver

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 = [

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": [

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;