Comments (17)
@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
from react-native-i18n.
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?
from react-native-i18n.
@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.
from react-native-i18n.
@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.
from react-native-i18n.
Mine hot reloads both missing and existing translations on the iOS simulator.
from react-native-i18n.
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.
from react-native-i18n.
On iOS I get that functionality by enabling Hot Reload - I do not enable Live Reload.
from react-native-i18n.
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.
from react-native-i18n.
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.
from react-native-i18n.
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. :)
from react-native-i18n.
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
from react-native-i18n.
Oh yeah, just do a quick search and we done here!
Call this one to re-render this.forceUpdate()
from react-native-i18n.
No problem for hot reloading json with the current version of react native :)
from react-native-i18n.
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 workingforceUpdate()
not working- AsyncStorage store language in local, and load it when App start, not working. (still need a way to refresh the app)
from react-native-i18n.
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)
from react-native-i18n.
@jedrichards @zoontek Thanks both of you!
from react-native-i18n.
@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
from react-native-i18n.
Related Issues (20)
- Rerender Text change
- v2.0.15 broke android release build HOT 1
- Not working on IOS xcode12.4/12.5 HOT 1
- Android native code issue
- Not compile() HOT 2
- for latest RN
- missing en-US "" translation
- compile() on react-native-i18n package is not found; build always failing when package is used HOT 1
- android can not build with error compile HOT 2
- Android Could not find method compile() for arguments [project ':react-native-i18n'] HOT 2
- Android cannot build with minSdkVersion in AndroidManifest
- patch gradle android issue
- please upgrade gradle file.
- Compile keyword does not exist in the new versions of Gradle HOT 1
- react-native-i18n not working on React Native 0.70+
- Could not find method compile() for arguments
- react-native-locale-detector oldies problem
- not working on RN 072
- A problem occurred evaluating project ':react-native-i18n'. > Could not find method compile() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
- compile issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-i18n.