Permalink
Browse files

Change NavigatorSceneConfig for RTL

Summary:
For RTL experiment, we need to swap all the Left and Right gesture and animation.
 Provide RTL support for Navigator in RN.

Reviewed By: hedgerwang

Differential Revision: D3519811

fbshipit-source-id: b53d9bf901ec056614658b627823d2225bdc82b1
  • Loading branch information...
1 parent ca66383 commit cadc753e4c2c364d78dd2fa69499832ab52c65cd @MengjueW MengjueW committed with Facebook Github Bot 7 Jul 8, 2016
Showing with 92 additions and 20 deletions.
  1. +92 −20 Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
@@ -1,5 +1,10 @@
/**
- * Copyright (c) 2015, Facebook, Inc. All rights reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
*
* Facebook, Inc. ("Facebook") owns all right, title and interest, including
* all intellectual property and other proprietary rights, in and to the React
@@ -31,6 +36,9 @@ var PixelRatio = require('PixelRatio');
var buildStyleInterpolator = require('buildStyleInterpolator');
+var I18nManager = require('NativeModules').I18nManager || {};
+var IS_RTL = I18nManager.isRTL;
+
var SCREEN_WIDTH = Dimensions.get('window').width;
var SCREEN_HEIGHT = Dimensions.get('window').height;
@@ -50,6 +58,14 @@ var ToTheLeftIOS = {
},
};
+var ToTheRightIOS = {
+ ...ToTheLeftIOS,
+ transformTranslate: {
+ from: {x: 0, y: 0, z: 0},
+ to: {x: SCREEN_WIDTH * 0.3, y: 0, z: 0},
+ },
+};
+
var FadeToTheLeft = {
// Rotate *requires* you to break out each individual component of
// rotation (x, y, z, w)
@@ -126,7 +142,7 @@ var FadeToTheRight = {
translateX: {
from: 0,
to: Math.round(SCREEN_WIDTH * 0.3),
- }
+ },
};
var FadeIn = {
@@ -179,6 +195,32 @@ var ToTheLeft = {
},
};
+var ToTheRight = {
+ transformTranslate: {
+ from: {x: 0, y: 0, z: 0},
+ to: {x: Dimensions.get('window').width, y: 0, z: 0},
+ min: 0,
+ max: 1,
+ type: 'linear',
+ extrapolate: true,
+ round: PixelRatio.get(),
+ },
+ opacity: {
+ value: 1.0,
+ type: 'constant',
+ },
+
+ translateX: {
+ from: 0,
+ to: Dimensions.get('window').width,
+ min: 0,
+ max: 1,
+ type: 'linear',
+ extrapolate: true,
+ round: PixelRatio.get(),
+ },
+};
+
var ToTheUp = {
transformTranslate: {
from: {x: 0, y: 0, z: 0},
@@ -500,10 +542,40 @@ var BaseUpDownGesture = {
direction: 'up-to-down',
};
+// For RTL experiment, we need to swap all the Left and Right gesture and animation.
+// So we create a direction mapping for both LTR and RTL, and change left/right to start/end.
+let directionMapping = {
+ ToTheStartIOS: ToTheLeftIOS,
+ ToTheEndIOS: ToTheRightIOS,
+ FadeToTheStart: FadeToTheLeft,
+ FadeToTheEnd: FadeToTheRight,
+ ToTheStart: ToTheLeft,
+ ToTheEnd: ToTheRight,
+ FromTheStart: FromTheLeft,
+ FromTheEnd: FromTheRight,
+ BaseStartToEndGesture: BaseLeftToRightGesture,
+ BaseEndToStartGesture: BaseRightToLeftGesture,
+};
+
+if (IS_RTL) {
+ directionMapping = {
+ ToTheStartIOS: ToTheRightIOS,
+ ToTheEndIOS: ToTheLeftIOS,
+ FadeToTheStart: FadeToTheRight,
+ FadeToTheEnd: FadeToTheLeft,
+ ToTheStart: ToTheRight,
+ ToTheEnd: ToTheLeft,
+ FromTheStart: FromTheRight,
+ FromTheEnd: FromTheLeft,
+ BaseStartToEndGesture: BaseRightToLeftGesture,
+ BaseEndToStartGesture: BaseLeftToRightGesture,
+ };
+}
+
var BaseConfig = {
// A list of all gestures that are enabled on this scene
gestures: {
- pop: BaseLeftToRightGesture,
+ pop: directionMapping.BaseStartToEndGesture,
},
// Rebound spring parameters when transitioning FROM this scene
@@ -515,17 +587,17 @@ var BaseConfig = {
// Animation interpolators for horizontal transitioning:
animationInterpolators: {
- into: buildStyleInterpolator(FromTheRight),
- out: buildStyleInterpolator(FadeToTheLeft),
+ into: buildStyleInterpolator(directionMapping.FromTheEnd),
+ out: buildStyleInterpolator(directionMapping.FadeToTheStart),
},
};
var NavigatorSceneConfigs = {
PushFromRight: {
...BaseConfig,
animationInterpolators: {
- into: buildStyleInterpolator(FromTheRight),
- out: buildStyleInterpolator(ToTheLeftIOS),
+ into: buildStyleInterpolator(directionMapping.FromTheEnd),
+ out: buildStyleInterpolator(directionMapping.ToTheStartIOS),
},
},
FloatFromRight: {
@@ -535,18 +607,18 @@ var NavigatorSceneConfigs = {
FloatFromLeft: {
...BaseConfig,
gestures: {
- pop: BaseRightToLeftGesture,
+ pop: directionMapping.BaseEndToStartGesture,
},
animationInterpolators: {
- into: buildStyleInterpolator(FromTheLeft),
- out: buildStyleInterpolator(FadeToTheRight),
+ into: buildStyleInterpolator(directionMapping.FromTheStart),
+ out: buildStyleInterpolator(directionMapping.FadeToTheEnd),
},
},
FloatFromBottom: {
...BaseConfig,
gestures: {
pop: {
- ...BaseLeftToRightGesture,
+ ...directionMapping.BaseStartToEndGesture,
edgeHitWidth: 150,
direction: 'top-to-bottom',
fullDistance: SCREEN_HEIGHT,
@@ -579,43 +651,43 @@ var NavigatorSceneConfigs = {
...BaseConfig,
gestures: {
jumpBack: {
- ...BaseLeftToRightGesture,
+ ...directionMapping.BaseStartToEndGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
- ...BaseRightToLeftGesture,
+ ...directionMapping.BaseEndToStartGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
},
animationInterpolators: {
- into: buildStyleInterpolator(FromTheRight),
- out: buildStyleInterpolator(ToTheLeft),
+ into: buildStyleInterpolator(directionMapping.FromTheEnd),
+ out: buildStyleInterpolator(directionMapping.ToTheStart),
},
},
HorizontalSwipeJumpFromRight: {
...BaseConfig,
gestures: {
jumpBack: {
- ...BaseRightToLeftGesture,
+ ...directionMapping.BaseEndToStartGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
- ...BaseLeftToRightGesture,
+ ...directionMapping.BaseStartToEndGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
- pop: BaseRightToLeftGesture,
+ pop: directionMapping.BaseEndToStartGesture,
},
animationInterpolators: {
- into: buildStyleInterpolator(FromTheLeft),
- out: buildStyleInterpolator(FadeToTheRight),
+ into: buildStyleInterpolator(directionMapping.FromTheStart),
+ out: buildStyleInterpolator(directionMapping.FadeToTheEnd),
},
},
VerticalUpSwipeJump: {

0 comments on commit cadc753

Please sign in to comment.