Permalink
Browse files

Provide RTL support in NavigationCardStack

Summary: Provide RTL support in NavigationCardStack

Reviewed By: fkgozali

Differential Revision: D3740172

fbshipit-source-id: 69466d24e148d0d81cb9f21c55f545abda46ac35
  • Loading branch information...
1 parent 959c8b1 commit fc864a22bd00464c4219c6ddb6aa3d923aeb26dc @MengjueW MengjueW committed with Facebook Github Bot 3 Aug 19, 2016
@@ -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();
@@ -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 {
@@ -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}],
}
});
@@ -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>),
}),
}
],

0 comments on commit fc864a2

Please sign in to comment.