React Native is the next best thing in cross-platform mobile development. Being under Facebook’s wings it is rapidly gaining the attention of developers of all backgrounds, be it native developers or web developers, resulting in a quite large community already. I am one of those web developers who wants to contribute to that community by writing this tutorial. It is a tutorial on how to support different languages and locales in your React Native app, additionally as a user-specific setting.

Needed requirements

First initialize a React Native app with:

React Native >= 0.40 (At the time of writing this post React Native’s Current Version was 0.42 and is also the version being used in this tutorial.) Redux (redux, react-redux, reduxsauce, redux-saga, redux-persist, redux-logger and seamless-immutable) react-native-i18n rn-translate-template React Navigation (At the time of writing this post React Navigation’s Current Version was 1.0.0-beta.7 and is also the version being used in this tutorial.)

You can also use this sample repo to follow the tutorial.

First Steps

Import the custom I18n.js file (which came with rn-translate-template and initializes the I18n configuration) in the most top-level application file (or at least in an application file above all other files - files where redux and react-native-i18n are used). Also consider importing the I18n.js file before importing other components, to prevent those other components from crashing when they use the react-native-i18n plugin.

// App.js import '../I18n/I18n' // import this before RootContainer as RootContainer is using react-native-i18n, and I18n.js needs to be initialized before that! import RootContainer from './RootContainer'

I import I18n.js in my App.js file because App.js is used in index.android.js and in index.ios.js, which makes it a top-level application file, and because it does not use redux and react-native-i18n. As you can see, I import it before the RootContainer component. I do this because I want the I18n configuration to be available at the root of my app before I make use of react-native-i18n’s translate function in components (such as RootContainer).

Define I18n.fallbacks = true in the custom I18n.js file. When the device’s locale is not available in the defined translations, it will fall back to the default locale. This is ‘en’ (English) by default but we can adjust this by, for example, defining I18n.defaultLocale = 'nl' .

If your app does not support English, it is imperative to change the defaultLocale’s value!

Adding translations

Now that we have I18n initialized in our app, we can add translations. We can do this in our I18n.js file by requiring the translation files: