Skip to content

olivierlesnicki/ReactNativeLocalization

 
 

Repository files navigation

ReactNativeLocalization

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

  1. npm install react-native-localization
  2. In the XCode's "Project navigator", right click on Libraries folder under your project ➜ Add Files to <...>
  3. Go to node_modulesreact-native-localization and add the project
    • ReactNativeLocalization.xcodeproj
  4. Add libReactNativeLocalization.a to Build Phases -> Link Binary With Libraries
  5. Build and run

###How to use:

  1. 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"
   }
});
  1. 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({});
  }

Questions or suggestions?

Feel free to contact me in twitter or create an issue

About

Class to localize the ReactNative interface

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • JavaScript 54.1%
  • Objective-C 45.9%