What it does
I just needed a dead simple way to internationalize my first React Native app.
At the beginning I thought I'd expose the native iOS internationalization API (NSLocalizedString macro) to React Native, but then I've opted for a solution that seems, at least to me, more in the spirit of React (and I hope better performance wise).
In this implementation we can keep the localized strings in the same file of the React View in a similar way of how Styles are implemented (I don't deny that this approach could lead to some duplications in the translated strings, but it could be feasible to create a CommonJS module to use as common source of the strings, requiring it in the different views).
[
](https://www.npmjs.com/package/react-native-localization#how-it-works)How it works
The Javascript library uses a native library (ReactLocalization) to get the current interface language, then it loads and displays the strings matching the current interface locale or the default language (the first one if a match is not found) if a specific localization can't be found.
It's possible to force a language different from the interface one.
[
](https://www.npmjs.com/package/react-native-localization#installation)Installation
The easiest way to install is to type just 2 commands inside your react-native project folder and you are ready to go:
npm install react-native-localization --save
react-native link
Don´t forget to restart the app / node server or you will see an error.
If you're installing for Android and still experiencing problems check if step 4 of "Manual installation Android" has been automatically executed by the linker.
[
](https://www.npmjs.com/package/react-native-localization#manual-installation-ios)Manual installation iOS
npm install --save react-native-localization
In the XCode's "Project navigator", right click on Libraries folder under your project ➜ Add Files to <...>
Go to node_modules
➜ react-native-localization
and add the ReactNativeLocalization.xcodeproj
file
Add libReactNativeLocalization.a to Build Phases -> Link Binary With Libraries
Build and run
[
](https://www.npmjs.com/package/react-native-localization#manual-installation-android)Manual installation Android
npm install --save react-native-localization
In android/setting.gradle
...
include ':react-native-localization', ':app'
project(':react-native-localization').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localization/android')
In android/app/build.gradle
...
dependencies {
...
compile project(':react-native-localization')
}
register module (in MainApplication.java)
import com.babisoft.ReactNativeLocalization.ReactNativeLocalizationPackage; // <--- import
public class MainApplication extends Application implements ReactApplication {
......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactNativeLocalizationPackage()
);
}
......
}
(Thanks to @rebeccahughes for showing by example how to create an android module for React Native)
[
](https://www.npmjs.com/package/react-native-localization#usage)Usage
In the React class that you want to localize require the library and define the strings object passing to the constructor a simple object containing a language key (i.e. en, it, fr..) and then a list of key-value pairs with the needed localized strings.
// ES6 module syntax
import LocalizedStrings from 'react-native-localization';
// CommonJS syntax
// let LocalizedStrings = require ('react-native-localization');
let strings = new LocalizedStrings({
"en-US":{
how:"How do you want your egg today?",
boiledEgg:"Boiled egg",
softBoiledEgg:"Soft-boiled egg",
choice:"How to choose the egg"
},
en:{
how:"How do you want your egg today?",
boiledEgg:"Boiled egg",
softBoiledEgg:"Soft-boiled egg",
choice:"How to choose the egg"
},
it: {
how:"Come vuoi il tuo uovo oggi?",
boiledEgg:"Uovo sodo",
softBoiledEgg:"Uovo alla coque",
choice:"Come scegliere l'uovo"
}
});
Then use the strings
object literal directly in the render method accessing the key of the localized string.
<Text style={styles.title}>
{strings.how}
</Text>
The first language is considered the default one, so if a translation is missing for the selected language, the default one is shown and a line is written to the log as a reminder.
[
](https://www.npmjs.com/package/react-native-localization#api)API
setLanguage(languageCode) - to force manually a particular language
getLanguage() - to get the current displayed language
getInterfaceLanguage() - to get the current device interface language
formatString() - to format the passed string replacing its placeholders with the other arguments strings
en:{
bread:"bread",
butter:"butter",
question:"I'd like {0} and {1}, or just {0}"
}
...
strings.formatString(strings.question, strings.bread, strings.butter)
Beware: do not define a string key as formatString
or language
!
getAvailableLanguages() - to get an array of the languages passed in the constructor
[
](https://www.npmjs.com/package/react-native-localization#examples)Examples
To force a particular language use something like this:
_onSetLanguageToItalian() {
strings.setLanguage('it');
this.setState({});
}
It's also possible to set the language directly in your Xcode project using the following code snippet:
[[NSUserDefaults standardUserDefaults] setObject:[NSArray arrayWithObjects:@"de", nil] forKey:@"AppleLanguages"];
Replace de
with a supported locale identifier to test.
Check out the WIKI page for additional informations.
[
](https://www.npmjs.com/package/react-native-localization#questions-or-suggestions)
