Search code examples
reactjsreact-nativeexporeact-native-paper

Use RTL Direction when Localization is LTR In React Native

I have used i18n to use multiple languages in my React Native application.

The problem is when Localization setting is based on LTR I can't change the TextInput direction to RTL. I have tried writingDirection but it only work's in IOS. I have tried textAlign as well but got nothing :(.

Here is my i18n Setting and TextInput sample code :

i18n.js

import { I18nManager } from 'react-native';
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
import fa from '../locales/fa';
import en from '../locales/en';

I18nManager.forceRTL(false);
Localization.locale = 'en';

i18n.fallbacks = true;
i18n.translations = { fa, en };
i18n.locale = Localization.locale;

export default i18n;

TextInput sample code

<TextInput
 style={{textAlign: 'right'}}   // here is the style that does'nt work.        
 label={i18n.t('signUp.surName')}
 value={formData.surName.value}
 onChangeText={(value) => changeHandler('surName', value)} 
/>

enter image description here

Solution

  • I wrote snack example and didn't find the problem: https://snack.expo.io/@djalik/text-input-align-right May be you are using older version of expo/react-native.