Permalink
Browse files

Provide RTL support for new Navigator -- Make RTL works in NUX

Summary: Provide RTL support in NavigationPager

Reviewed By: fkgozali

Differential Revision: D3536850

fbshipit-source-id: 29890a125dc5e001b4c10208cd53bfeca0d9b5c3
  • Loading branch information...
1 parent 471ee87 commit 38a6eec0db85a5204e85a9a92b4dee2db9641671 @MengjueW MengjueW committed with Facebook Github Bot 3 Jul 12, 2016
@@ -15,6 +15,7 @@
const Animated = require('Animated');
const NavigationAbstractPanResponder = require('NavigationAbstractPanResponder');
const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
+const I18nManager = require('I18nManager');
const clamp = require('clamp');
@@ -133,6 +134,9 @@ class NavigationPagerPanResponder 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 prevIndex = Math.max(
0,
@@ -146,7 +150,7 @@ class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
const value = clamp(
prevIndex,
- this._startValue - (gesture[axis] / distance),
+ currentValue,
nextIndex,
);
@@ -171,14 +175,19 @@ class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
const axis = isVertical ? 'dy' : 'dx';
const velocityAxis = isVertical ? 'vy' : 'vx';
const index = navigationState.index;
- const distance = gesture[axis];
+ const distance = I18nManager.isRTL && axis === 'dx' ?
+ -gesture[axis] :
+ gesture[axis];
+ const moveSpeed = I18nManager.isRTL && velocityAxis === 'vx' ?
+ -gesture[velocityAxis] :
+ gesture[velocityAxis];
position.stopAnimation((value: number) => {
this._reset();
if (
distance > DISTANCE_THRESHOLD ||
value <= index - POSITION_THRESHOLD ||
- gesture[velocityAxis] > VELOCITY_THRESHOLD
+ moveSpeed > VELOCITY_THRESHOLD
) {
onNavigateBack && onNavigateBack();
return;
@@ -187,7 +196,7 @@ class NavigationPagerPanResponder extends NavigationAbstractPanResponder {
if (
distance < -DISTANCE_THRESHOLD ||
value >= index + POSITION_THRESHOLD ||
- gesture[velocityAxis] < -VELOCITY_THRESHOLD
+ moveSpeed < -VELOCITY_THRESHOLD
) {
onNavigateForward && onNavigateForward();
}
@@ -32,6 +32,8 @@
*/
'use strict';
+const I18nManager = require('I18nManager');
+
import type {
NavigationSceneRendererProps,
} from 'NavigationTypeDefinition';
@@ -87,11 +89,14 @@ 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, width]: Array<number>) :
+ ([width, 0, -width]: Array<number>);
+
const translateX = position.interpolate({
inputRange,
- outputRange: ([width, 0, -width]: Array<number>),
+ outputRange,
});
return {

0 comments on commit 38a6eec

Please sign in to comment.