how to change RTL and LTR in react native

Question

i am using i18n for localization in react native application , but i have a problem with changing app direction from code , when i change it to Arabic it change to RTL but back with english it remain same

import { I18nManager } from 'react-native';
import I18n from 'react-native-i18n';
import Store from '../store/Store';
import en from './en';
import ar from './ar';
I18n.fallbacks = true`

I18n.translations = {
    en,
    ar
};

I18nManager.allowRTL(I18n.locale in I18n.translations);

I18n.getTranslation = (key) => {

    return I18n.t(key, { locale: Store.langugae });
}

export default I18n;
I18nManager.allowRTL(I18n.locale in I18n.translations);

I18n.getTranslation = (key) => {

    return I18n.t(key, { locale: Store.langugae });
}

export default I18n;

 handler_language = async (lang) => {

    try {
      Store.langugae = lang;
      if (lang === 'ar') {
        I18nManager.forceRTL(true)
      } if (lang === 'en') {
        I18nManager.forceRTL(false);
      }
      this.props.navigation.navigate('login')
    } catch (e) {
      console.log(e)
    }
  }

https://stackoverflow.com/a/55468257/7398574 this might help — Neetin Solanki, Apr 20 '20 at 07:42
i used the way without redux but i does not working, first time when i click in arabic button it change but when i back and click in english button it doesn't change , and remain the same in RTL — Riaz Ali, Apr 20 '20 at 08:36
You will have to restart app using this package https://www.npmjs.com/package/react-native-restart — Neetin Solanki, Apr 20 '20 at 09:44

score 0 · Answer 1 · answered Apr 20 '20 at 07:14

0

You should try restarting your app on changing direction

answered Apr 20 '20 at 07:14

All2Pie

310
3
13

restart your app ?? – Riaz Ali Apr 20 '20 at 07:15

score 0 · Answer 2 · answered Apr 20 '20 at 12:33

0

here is solution

`const toggleRTL = () => {
    I18nManager.forceRTL(!rtl);
    RNRestart.Restart();
  };`

answered Apr 20 '20 at 12:33

morteza moradi

145
2
9

1

While this code may answer the question, it would be better to include some context, explaining how it works and when to use it. Code-only answers are not useful in the long run. – Mustafa Apr 22 '20 at 02:26

how to change RTL and LTR in react native

2 Answers2