Internationalization And Localization In Your React Native App

If you’ve been keeping up with my blog and tutorials, you’ll know that I’ve done quite a few posts on Ionic Framework. I’ve been hearing a lot about React Native lately so I figured it is time to give it a shot.

There are 6,500 languages and roughly seven billion people in the world. Chances are your native language is only known by a small piece of the global population. You can boost downloads of your application and overall App Store Optimization (ASO) by accommodating a larger variety of languages.

Last year, I did a tutorial regarding localization (l10n) and internationalization (i18n) in an Ionic Framework Android and iOS application. This time I’m going to go over the same, but in a React Native application for iOS.

If this is your first time taking a look at React Native, you should note that as of right now it is only compatible with iOS. I believe Android is coming in the future, but not yet. This means you’ll need a Mac to do any development.

Let’s start this tutorial by first creating a fresh React Native project. Assuming you have React Native installed on your machine, run the following from your Mac Terminal application:

react-native init ReactProject
cd ReactProject

This project will take advantage of the React Native plugin react-native-i18n by Alexander Zaytsev to do any translating. With the project as your current working directory in your Terminal, run the following command:

npm install react-native-i18n --save

The dependencies are now in your project directory, but they need to also be added to the Xcode project.

Open ReactProject.xcodeproj found in the root of your project. Now right click the Libraries directory found in the project tree of Xcode and choose Add Files to “ReactProject”…. You want to add RNI18n.xcodeproj found in your project’s node_modules/react-native-i18n directory.

Next, add libRNI18n.a via the Link Binary With Libraries section of Build Phases in Xcode.

The plugin has been added to your project, but not to your project’s code.

Open index.ios.js found at your project’s root and include the following line:

var I18n = require('react-native-i18n');

A lot of what comes next is coming from the plugin’s documentation.

Per the documentation it recommends you use language fallbacks. For example, you can choose to add translations for en_US and en_GB, but with fallbacks enabled you can have a more generic translation for en instead. This fallback can be enabled by adding the following:

I18n.fallbacks = true;

Now let’s look at what it takes to add some translations. We will essentially be just creating an object with parent properties for whatever locale we wish to use. For example:

I18n.translations = {
    en: {
        greeting: "Hello",
        goodbye: "Bye"
    },
    fr: {
        greeting: "Bonjour",
        goodbye: "Au Revoir"
    },
    es: {
        greeting: "Hola",
        goodbye: "Adios"
    }
}

In the above object we have three different languages all using the fallback value. We have a greeting and exiting word for English, Spanish, and French. These translated variables can be used like the following in our view:

<Text>{I18n.t("greeting")}</Text>
<Text>{I18n.t("goodbye")}</Text>

To get a better idea of it all together, your full index.ios.js file might look like the following:

'use strict';

var React = require('react-native');
var I18n = require('react-native-i18n');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var ReactProject = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    {I18n.t("greeting")}
                </Text>
                <Text style={styles.goodbye}>
                    {I18n.t("goodbye")}
                </Text>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    goodbye: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});


I18n.fallbacks = true;

I18n.translations = {
    en: {
        greeting: "Hello",
        goodbye: "Bye"
    },
    fr: {
        greeting: "Bonjour",
        goodbye: "Au Revoir"
    },
    es: {
        greeting: "Hola",
        goodbye: "Adios"
    }
}

AppRegistry.registerComponent('ReactProject', () => ReactProject);

Conclusion

Just like with Angular Translate for Ionic Framework, we can add localization and internationalization features to our React Native application. This is a terrific way to boost your App Store Optimization (ASO) as your application will now reach more audiences.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.