status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 01:40:08 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Summary: Provide RTL support in NavigationPager

Reviewed By: fkgozali

Differential Revision: D3536850

fbshipit-source-id: 29890a125dc5e001b4c10208cd53bfeca0d9b5c3
This commit is contained in:
Mengjue Wang 2016-07-11 20:43:57 -07:00 committed by Facebook Github Bot 3
parent 471ee87445
commit 38a6eec0db
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Libraries/CustomComponents/NavigationExperimental/NavigationPagerPanResponder.js
View File

@ -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();
}

9
Libraries/CustomComponents/NavigationExperimental/NavigationPagerStyleInterpolator.js
View File

@ -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 {