https://github.com/osedea/ignite-intl
Ignite plugin to add internationalization to your application
https://github.com/osedea/ignite-intl
Last synced: 10 months ago
JSON representation
Ignite plugin to add internationalization to your application
- Host: GitHub
- URL: https://github.com/osedea/ignite-intl
- Owner: Osedea
- Created: 2019-11-14T13:20:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-09T19:49:53.000Z (over 6 years ago)
- Last Synced: 2025-07-03T08:14:57.980Z (11 months ago)
- Language: JavaScript
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ignite Intl plugin
This plugin will setup your application for internationalization using:
* https://github.com/react-native-community/react-native-localize : To get data on the locales of the user that are defined in the OS settings
* https://github.com/formatjs/react-intl : To handle the actual management of translated strings
## Add plugin
```sh
ignite add intl
```
## Remove plugin
```sh
ignite remove intl
```
## How yo use in your app
At `/`OSEDEA, we like simple, working solutions.
And when I say simple, I mean simple to *USE*. This setup is not super simple, but it provides a very simple, homogeneous way to add translations after: the `translate` method.
To your top component (i.e. the one you plug into `AppRegistry.registerComponent`), add the following changes (`./i18n` being the file generated by the plugin if you add the translation files, or the `templates/index.js` file of this repo):
```diff
import React, { Component } from 'react';
+ import * as RNLocalize from 'react-native-localize';
+ import { RawIntlProvider } from 'react-intl';
+ import { loadLocale, translate, registerLanguageListener, unregisterLanguageListener, intl, changeLanguage, currentLocale, getLocale } from './i18n';
class Root extends Component {
+ state = { locale: currentLocale };
+ componentDidMount() {
+ // Listen to changes made on the phone
+ RNLocalize.addEventListener('change', getLocale);
+ // setState if `changeLanguage` is called from anywhere in the app
+ registerLanguageListener(this.handleLocalizationChange);
+ // Loads the locale last saved in AsyncStorage
+ loadLocale().then((lang) => lang && changeLanguage(lang));
+ }
+ componentWillUnmount() {
+ // Cleanup
+ RNLocalize.removeEventListener('change', getLocale);
+ unregisterLanguageListener(this.handleLocalizationChange);
+ }
+ handleLocalizationChange = (locale: string) => {
+ this.setState({ locale });
+ };
render() {
return (
+
-
+
+
);
}
}
export default Root;
```
In any other component:
```diff
import React, { Component } from 'react';
import { View, Text } from 'react-native';
+ import { translate } from '../i18n';
class SomeComponent extends Component {
render() {
return (
- Hey, how are you?
+ {translate({ id: 'hello' })}
);
}
}
export default SomeComponent;
```
If you are using [react-navigation](https://github.com/react-navigation/react-navigation), follow [this guide](https://reactnavigation.org/docs/en/localization.html#wiring-up-your-localization-library-to-navigation) to setup your Tabs labels, etc.
## Compatibility
This has been tested with React Native [0.61.4](https://github.com/facebook/react-native/releases/tag/v0.61.4).
## Contributing
Please open an issue for any compatibility issues, or provide better interactivity/compatibility through opening a PR! 🙂