|
||
---|---|---|
RNI18n | ||
RNI18n.xcodeproj | ||
android | ||
vendor | ||
.gitignore | ||
README.md | ||
RNI18n.podspec | ||
index.js | ||
package.json |
README.md
![](https://cdn0.iconfinder.com/data/icons/material-design-ii-glyph/614/3010_-_Translate-512.png)
Automatic setup
$ npm install react-native-i18n --save
After installing the npm package you need to link the native modules.
If you're using React-Native < 0.29 install rnpm with the command npm install -g rnpm
and then link the library with the command rnpm link
.
If you're using React-Native >= 0.29 just link the library with the command react-native link
.
You can do so using rnpm.
If you're having any issue you can also try to install the library manually as follows.
Manual setup
iOS
Add RNI18n.xcodeproj
to Libraries and add libRNI18n.a
to Link Binary With Libraries under Build Phases.
More info and screenshots about how to do this is available in the React Native documentation.
Android
Add react-native-i18n
to your ./android/settings.gradle
file as follows:
include ':app', ':react-native-i18n'
project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-i18n/android')
Include it as dependency in ./android/app/build.gradle
file:
dependencies {
...
compile project(':react-native-i18n')
}
Finally, you need to add the package to your MainApplication (./android/app/src/main/java/your/bundle/MainApplication.java
):
import com.i18n.reactnativei18n.ReactNativeI18n; // <-- Add to ReactNativeI18n to the imports
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
...
new ReactNativeI18n(), // <-- Add it to the packages list
...
);
}
...
After that, you will need to recompile your project with react-native run-android
.
Usage
import I18n from 'react-native-i18n'
class Demo extends React.Component {
render () {
return (
<Text>{I18n.t('greeting')}</Text>
)
}
}
// Enable fallbacks if you want `en-US` and `en-GB` to fallback to `en`
I18n.fallbacks = true
I18n.translations = {
en: {
greeting: 'Hi!'
},
fr: {
greeting: 'Bonjour!'
}
}
This will render Hi!
for devices with the English locale, and Bonjour!
for devices with the French locale.
Fallbacks
When fallbacks are enabled (which is generally recommended), i18n.js
will try to look up translations in the following order (for a device with en_US
locale):
- en-US
- en
Note: iOS locales use underscored (en_US
) but i18n.js
locales are dasherized (en-US
). This conversion is done automatically for you.
I18n.fallbacks = true
I18n.translations = {
'en': {
greeting: 'Hi!'
},
'en-GB': {
greeting: 'Hi from the UK!'
}
}
For a device with a en_GB
locale this will return Hi from the UK!'
, for a device with a en_US
locale it will return Hi!
.
Device's locale
You can get the device's locale with the RNI18n
native module:
import ReactNativeI18n from 'react-native-i18n'
const deviceLocale = ReactNativeI18n.locale
Returns en-US
.
I18n.js documentation
For more info about I18n.js methods (localize
, pluralize
, etc) and settings see its documentation.
Licence
MIT