ReactNativeLocalization

Class to localize the ReactNative interface

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 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 --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

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.

import LocalizedStrings from 'react-native-localization';

let localizedStrings = 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"
 }
});

Then use the localizedStrings object literal directly in the render method accessing the key of the localized string.

<Text style={styles.title}>
  {strings.how}
</Text>

API

setLanguage(languageCode) - to force manually a particular language
getLanguage() - to get the current displayed language
getInterfaceLanguage() - to get the current device interface language

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.

Questions or suggestions?

Feel free to contact me on Twitter or open an issue.

RoryCombe/ReactNativeLocalization