React-native-i18n: Hot reload

[chapati23]

Is there a way to hot reload translations?

[ajostergaard]

Mine hot reloads both missing and existing translations on the iOS simulator.

[marudy]

Hi there,

i think what you actually want, is 'Live Reload'. In order to enable it you press 'Ctrl+M' over the emulator, the pop up menu opens and you click 'Enable Live Reload'. After that translations are auto reloaded when changed and saved in code. Works fine for me on Android simulator.

Cheers

EDIT:
After @ajostergaard comment i looked it up and found this explanatory link.

It turns out that hot reloading is what you both @ajostergaard and @chapati23 mention and works the same for both iOS and Android emulators. The difference is that live reloading refreshes the whole app.

[ajostergaard]

On iOS I get that functionality by enabling Hot Reload - I do not enable Live Reload.

[SoundBlaster]

I think question is about something different:
'hot reload' means that app UI can react to the i18n.setLanguage('de') and changes all strings to the French.

[ricardopereira]

Thanks @SoundBlaster. I think you're right. Does it work? Does the app use "on fly localization" and while doing i18n.setLanguage('de') it will change the app language? i.e. a list of languages in the profile screen where the user selects is preference and the app gets updated without closing the app.

[jedrichards]

I don't see how this lib would provide live update of the active language since that would need React to re-render somehow from the root, either based on props or state, and this library has no control over that.

I'd be interested to know if anyone had any luck with an approach for this though. Maybe change the language and call forceUpdate somewhere?

[ajostergaard]

Given that Hot Reload has a specific meaning in the context of React Native the correct answers are above. If you have a different requirement it is probably a good idea to open a new issue with a clearer unambiguous description. Point is that of you didn't implement this library correctly Hot Reload might not work and you might then wonder whether it could work at all and the answer is that it can and does. :)

[leanh215]

After call I18n.language = 'xxx', the language already changed (can log to show result)

I think just need to do something to make Component re-render then we've done

[leanh215]

Oh yeah, just do a quick search and we done here!
Call this one to re-render this.forceUpdate()

[zoontek]

No problem for hot reloading json with the current version of react native :)

[jedrichards]

@zoontek You've misunderstood the question, or at least the question title is a bit ambiguous. People in this issue have been discussing how to make this library "live update" React views when the user uses the ui to change the active language. i.e. a feature similar to what you get from react-i18next hoc.

https://react.i18next.com/components/translate-hoc.html

The translate hoc is responsible to pass the t function to your component which enables all the translation functionality provide by i18next. Further it asserts the component gets rerendered on language change or changes to the translations themself.

[1c7]

I am also looking for language hot reload (using RN 0.52)

my app would load Russian language from server(by http request),
and

I18n.translations['ru-BY'] = language_load_form_http;

(simplify version code, but you know what I mean)

and now I need refresh the App to make it work.
still looking for solution.

• react-native-restart not working
• forceUpdate() not working
• AsyncStorage store language in local, and load it when App start, not working. (still need a way to refresh the app)

[1c7]

btw, if language not load from server, but store in app,
and all you want is update the app language when user change language setting in Android,
use this: https://blog.callstack.io/react-native-handling-language-changes-on-android-the-right-way-c883056a8f5c

it work for me(RN 0.52, tested on Android 7.0, Samsung Galaxy Note 5)

[jedrichards]

@1c7 I used https://github.com/i18next/react-i18next for the same use case, worked great.

This library (react-native-i18n) isn't a good choice if you need to live refresh the language dynamically.

[zoontek]

@1c7 It's a known issue about this package, and https://github.com/react-community/react-native-languages is the solution to it. See the example for an usage with i18next: https://github.com/react-community/react-native-languages/tree/master/example

You can use it with i18n-js too:

import Languages from 'react-native-languages'
import I18n from 'i18n-js'

import en from '../locales/en'
import fr from '../locales/fr'

I18n.locale = Languages.language
I18n.fallbacks = true
I18n.translations = { en, fr }

Languages.addEventListener('change', ({ language }) => {
  I18n.locale = Languages.language
})

export default I18n

I will give react-native-languages a better documentation and maybe deprecate this one, since react-native-i18n enforce the use of i18n-js, and it is not a solution adapted to the React world

[1c7]

@jedrichards @zoontek Thanks both of you!

[1c7]

@zoontek yes you are right, react-native-languages need more document, now it's too short and not much code example for easy copy&paste haha