diff --git a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js index d4a84392..8873e8f1 100644 --- a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js @@ -12,7 +12,7 @@ describe('apis/I18nManager', () => { describe('isRTL', () => { test('is false', () => { - expect(I18nManager.isRTL).toBe(false); + expect(I18nManager.getConstants().isRTL).toBe(false); expect(getDocumentDir()).toEqual('ltr'); }); }); @@ -24,12 +24,12 @@ describe('apis/I18nManager', () => { test('when set to false, "isRTL" is false', () => { I18nManager.forceRTL(false); - expect(I18nManager.isRTL).toBe(false); + expect(I18nManager.getConstants().isRTL).toBe(false); expect(getDocumentDir()).toEqual('ltr'); }); test('when set to true, "isRTL" is true', () => { I18nManager.forceRTL(true); - expect(I18nManager.isRTL).toBe(true); + expect(I18nManager.getConstants().isRTL).toBe(true); expect(getDocumentDir()).toEqual('rtl'); }); }); @@ -41,11 +41,11 @@ describe('apis/I18nManager', () => { test('when set to false, "doLeftAndRightSwapInRTL" is false', () => { I18nManager.swapLeftAndRightInRTL(false); - expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false); + expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(false); }); test('when set to true, "doLeftAndRightSwapInRTL" is true', () => { I18nManager.swapLeftAndRightInRTL(true); - expect(I18nManager.doLeftAndRightSwapInRTL).toBe(true); + expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(true); }); }); }); @@ -61,7 +61,7 @@ describe('apis/I18nManager', () => { describe('isRTL', () => { test('is true', () => { - expect(I18nManager.isRTL).toBe(true); + expect(I18nManager.getConstants().isRTL).toBe(true); expect(getDocumentDir()).toEqual('rtl'); }); }); @@ -73,12 +73,12 @@ describe('apis/I18nManager', () => { test('when set to false, "isRTL" is false', () => { I18nManager.allowRTL(false); - expect(I18nManager.isRTL).toBe(false); + expect(I18nManager.getConstants().isRTL).toBe(false); expect(getDocumentDir()).toEqual('ltr'); }); test('when set to true, "isRTL" is true', () => { I18nManager.allowRTL(true); - expect(I18nManager.isRTL).toBe(true); + expect(I18nManager.getConstants().isRTL).toBe(true); expect(getDocumentDir()).toEqual('rtl'); }); }); @@ -90,12 +90,12 @@ describe('apis/I18nManager', () => { test('when set to false, "isRTL" is true', () => { I18nManager.forceRTL(false); - expect(I18nManager.isRTL).toBe(true); + expect(I18nManager.getConstants().isRTL).toBe(true); expect(getDocumentDir()).toEqual('rtl'); }); test('when set to true, "isRTL" is true', () => { I18nManager.forceRTL(true); - expect(I18nManager.isRTL).toBe(true); + expect(I18nManager.getConstants().isRTL).toBe(true); expect(getDocumentDir()).toEqual('rtl'); }); }); @@ -107,11 +107,11 @@ describe('apis/I18nManager', () => { test('when set to false, "doLeftAndRightSwapInRTL" is false', () => { I18nManager.swapLeftAndRightInRTL(false); - expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false); + expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(false); }); test('when set to true, "doLeftAndRightSwapInRTL" is true', () => { I18nManager.swapLeftAndRightInRTL(true); - expect(I18nManager.doLeftAndRightSwapInRTL).toBe(true); + expect(I18nManager.getConstants().doLeftAndRightSwapInRTL).toBe(true); }); }); }); diff --git a/packages/react-native-web/src/exports/I18nManager/index.js b/packages/react-native-web/src/exports/I18nManager/index.js index 419f4173..e8b53a75 100644 --- a/packages/react-native-web/src/exports/I18nManager/index.js +++ b/packages/react-native-web/src/exports/I18nManager/index.js @@ -12,13 +12,17 @@ import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; type I18nManagerStatus = { allowRTL: (allowRTL: boolean) => void, - doLeftAndRightSwapInRTL: boolean, forceRTL: (forceRTL: boolean) => void, - isRTL: boolean, + getConstants: () => Constants, setPreferredLanguageRTL: (setRTL: boolean) => void, swapLeftAndRightInRTL: (flipStyles: boolean) => void }; +type Constants = { + doLeftAndRightSwapInRTL: boolean, + isRTL: boolean +}; + let doLeftAndRightSwapInRTL = true; let isPreferredLanguageRTL = false; let isRTLAllowed = true; @@ -48,18 +52,15 @@ const I18nManager: I18nManagerStatus = { isRTLForced = bool; onDirectionChange(); }, + getConstants(): Constants { + return { doLeftAndRightSwapInRTL, isRTL: isRTL() }; + }, setPreferredLanguageRTL(bool) { isPreferredLanguageRTL = bool; onDirectionChange(); }, swapLeftAndRightInRTL(bool) { doLeftAndRightSwapInRTL = bool; - }, - get doLeftAndRightSwapInRTL() { - return doLeftAndRightSwapInRTL; - }, - get isRTL() { - return isRTL(); } }; diff --git a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js index 060d90ae..5d2f6986 100644 --- a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js +++ b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js @@ -54,7 +54,7 @@ export default function createStyleResolver() { } function _injectRegisteredStyle(id) { - const { doLeftAndRightSwapInRTL, isRTL } = I18nManager; + const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants(); const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr'; if (!inserted[dir][id]) { const style = createCompileableStyle(i18nStyle(flattenStyle(id))); @@ -145,7 +145,7 @@ export default function createStyleResolver() { * Resolves a React Native style object */ function _resolveStyle(style, key) { - const { doLeftAndRightSwapInRTL, isRTL } = I18nManager; + const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants(); const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr'; // faster: memoized diff --git a/packages/react-native-web/src/exports/StyleSheet/i18nStyle.js b/packages/react-native-web/src/exports/StyleSheet/i18nStyle.js index 1c0ae377..9c9c2da5 100644 --- a/packages/react-native-web/src/exports/StyleSheet/i18nStyle.js +++ b/packages/react-native-web/src/exports/StyleSheet/i18nStyle.js @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @noflow + * @flow */ import I18nManager from '../I18nManager'; @@ -78,8 +78,8 @@ const PROPERTIES_VALUE = { // Invert the sign of a numeric-like value const additiveInverse = (value: String | Number) => multiplyStyleLengthValue(value, -1); -const i18nStyle = originalStyle => { - const { doLeftAndRightSwapInRTL, isRTL } = I18nManager; +const i18nStyle = (originalStyle: Object) => { + const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants(); const style = originalStyle || emptyObject; const frozenProps = {}; const nextStyle = {}; @@ -97,7 +97,7 @@ const i18nStyle = originalStyle => { // convert start/end const convertedProp = PROPERTIES_I18N[originalProp]; prop = isRTL ? PROPERTIES_FLIP[convertedProp] : convertedProp; - } else if (isRTL && doLeftAndRightSwapInRTL && PROPERTIES_FLIP[originalProp]) { + } else if (isRTL && doLeftAndRightSwapInRTL && (PROPERTIES_FLIP[originalProp]: any)) { prop = PROPERTIES_FLIP[originalProp]; } @@ -123,15 +123,19 @@ const i18nStyle = originalStyle => { // convert start/end const convertedValue = PROPERTIES_I18N[originalValue]; value = isRTL ? PROPERTIES_FLIP[convertedValue] : convertedValue; - } else if (isRTL && doLeftAndRightSwapInRTL && PROPERTIES_FLIP[originalValue]) { - value = PROPERTIES_FLIP[originalValue]; + } else if (isRTL && doLeftAndRightSwapInRTL) { + const flippedValue = PROPERTIES_FLIP[(originalValue: any)]; + if (flippedValue != null) { + value = flippedValue; + } } } // Create finalized style if (isRTL && prop === 'textShadowOffset') { + const invertedValue = additiveInverse((value: any).width); + (value: any).width = invertedValue; nextStyle[prop] = value; - nextStyle[prop].width = additiveInverse(value.width); } else if (!frozenProps[prop]) { nextStyle[prop] = value; }