1

I have successfully installed react-native-i18n and its works fine. However, I want to change the locale inside the React native app itself.

I have added a button( Touchable opacity ) and have written the following code : 

onPress={() => { i18n.locale = 'ar'; }}

However, this does not change the locale to 'ar' and all my translations are still coming for english ( en-US ) only. I dont want the user to go to phone settings and change the locale from there. Can I not do it from the app itself? Only so that the locale is limited for my app only.

Sankalp Singha
  • 4,461
  • 5
  • 39
  • 58

1 Answers1

0

You need to rerender the app. Listen for ConfigurationChange event to rerender or you may refer this GitHub issue. Easier hack is to set a state once you do i18n.locale = 'ar' :)

Hariks
  • 1,852
  • 1
  • 19
  • 34
  • Can you elaborate on : `set a state once you do i18n.locale = 'ar'` ? – Sankalp Singha Mar 30 '17 at 12:39
  • onPress={() => { i18n.locale = 'ar'; this.setState(abc: 0);}} You could also do this.setState(this.state) but that will throw a warning to use this.forceUpdate() . forceUpdate is not a recommended approach, refer [this](http://stackoverflow.com/a/35004739/6423570) – Hariks Mar 30 '17 at 13:00
  • I don't think that storing all the key values for the dictionary used by the i18n should be stored in the local state. I would need to store them globally so that all my other components can use them as well. I think that I would have to store them redux. – Sankalp Singha Mar 30 '17 at 13:04
  • We are not trying to store i18n dictionary in local state, we are just rerendering the component so that the locale change is reflected, isn't that the issue? setState is used to trigger a render – Hariks Mar 30 '17 at 13:09
  • 1
    using setState/forceUpdate for rerendering is just a hacky solution as I mentioned, better way is to use redux – Hariks Mar 30 '17 at 13:13