Provide RTL support in NavigationCardStack

Summary: Provide RTL support in NavigationCardStack

Reviewed By: fkgozali

Differential Revision: D3740172

fbshipit-source-id: 69466d24e148d0d81cb9f21c55f545abda46ac35

Author: MengjueW

Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js

@@ -13,6 +13,7 @@
 'use strict';
 
 const Animated = require('Animated');
+const I18nManager = require('I18nManager');
 const NavigationAbstractPanResponder = require('NavigationAbstractPanResponder');
 
 const clamp = require('clamp');
@@ -150,10 +151,13 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {
     const distance = isVertical ?
       layout.height.__getValue() :
       layout.width.__getValue();
+    const currentValue = I18nManager.isRTL && axis === 'dx' ?
+      this._startValue + (gesture[axis] / distance) :
+      this._startValue - (gesture[axis] / distance);
 
     const value = clamp(
       index - 1,
-      this._startValue - (gesture[axis] / distance),
+      currentValue,
       index
     );
 
@@ -171,7 +175,9 @@ class NavigationCardStackPanResponder extends NavigationAbstractPanResponder {
     const isVertical = this._isVertical;
     const axis = isVertical ? 'dy' : 'dx';
     const index = props.navigationState.index;
-    const distance = gesture[axis];
+    const distance = I18nManager.isRTL && axis === 'dx' ?
+      -gesture[axis] :
+      gesture[axis];
 
     props.position.stopAnimation((value: number) => {
       this._reset();

Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js

@@ -32,6 +32,8 @@
  */
 'use strict';
 
+const I18nManager = require('I18nManager');
+
 import type  {
   NavigationSceneRendererProps,
 } from 'NavigationTypeDefinition';
@@ -87,6 +89,10 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
   const index = scene.index;
   const inputRange = [index - 1, index, index + 1];
   const width = layout.initWidth;
+  const outputRange = I18nManager.isRTL ?
+    ([-width, 0, 10]: Array<number>) :
+    ([width, 0, -10]: Array<number>);
+
 
   const opacity = position.interpolate({
     inputRange,
@@ -101,7 +107,7 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
   const translateY = 0;
   const translateX = position.interpolate({
     inputRange,
-    outputRange: ([width, 0, -10]: Array<number>),
+    outputRange,
   });
 
   return {

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js

@@ -27,6 +27,7 @@ const React = require('react');
 const ReactNative = require('react-native');
 
 const {
+  I18nManager,
   Image,
   Platform,
   StyleSheet,
@@ -58,7 +59,8 @@ const styles = StyleSheet.create({
     height: 24,
     width: 24,
     margin: Platform.OS === 'ios' ? 10 : 16,
-    resizeMode: 'contain'
+    resizeMode: 'contain',
+    transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
   }
 });
 

Libraries/CustomComponents/NavigationExperimental/NavigationHeaderStyleInterpolator.js

@@ -32,6 +32,7 @@
  */
 'use strict';
 
+const I18nManager = require('I18nManager');
 
 import type  {
   NavigationSceneRendererProps,
@@ -71,7 +72,9 @@ function forCenter(props: NavigationSceneRendererProps): Object {
       {
         translateX: position.interpolate({
           inputRange: [ index - 1, index + 1 ],
-          outputRange: ([ 200, -200 ]: Array<number>),
+          outputRange: I18nManager.isRTL ?
+            ([ -200, 200 ]: Array<number>) :
+            ([ 200, -200 ]: Array<number>),
         }),
       }
     ],