Class to localize the ReactNative interface
###What 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 Native Script, 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 feasable to create a commonjs module to use as common source of the strings, requiring it in the different views).
###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.
###Installation
npm install 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-localizationand add the project- ReactNativeLocalization.xcodeproj
- Add libReactNativeLocalization.a to Build Phases -> Link Binary With Libraries
- Build and run
###How to use:
- 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
var LocalizedStrings = require('./node_modules/react-native-localization/LocalizedStrings');
;
var strings = new LocalizedStrings({
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"
}
});- Use the strings object directly in the render method accessing the key of the localized string
<Text style={styles.title}>
{strings.how}
</Text>###Other methods
- setLanguage(languageCode) - to force manually a particular language
- getLanguage() - to get the current displayed language
- getInterfaceLanguage() - to get the current device interface language
###Other examples To force a particular language use something like this:
_onSetLanguageToItalian(){
strings.setLanguage('it');
this.setState({});
}Feel free to contact me in twitter or create an issue