diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js index 47e538e52..3a938d54a 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackPanResponder.js +++ b/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(); diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js index 77fa010e5..fd9c9836e 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js +++ b/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) : + ([width, 0, -10]: Array); + 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), + outputRange, }); return { diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js index 097e3b95b..e4d772a5b 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js +++ b/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}], } }); diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderStyleInterpolator.js b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderStyleInterpolator.js index fcc37c7a5..38a8689c0 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderStyleInterpolator.js +++ b/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), + outputRange: I18nManager.isRTL ? + ([ -200, 200 ]: Array) : + ([ 200, -200 ]: Array), }), } ],