Internationalization with React Native

In this article we will see how to internationalize a React Native application so we can offer it in several languages.

Start by creating a new project:

react-native init I18N_Sample
cd I18N_Sample

To internationalize our application, we will use the react-native-i18n library.

yarn add react-native-i18n
rnpm link

This library works as follows:

First, import the react-native-i18n library whenever you need to use a translation.

import I18n from 'react-native-i18n'

Define all the translations you will use.

I18n.fallbacks = true
I18n.translations = {
  en: {
    greeting: 'Hi!',
  },
  'en-GB': {
    greeting: 'Hi from the UK!',
  },
  fr: {
    greeting: 'Bonjour!',
  },
}

Here, on a device set to French, the returned value will be Bonjour!; on a device set to UK English, the value will be Hi from the UK!; and for the rest it will be Hi!.

Finally, replace our text with its translations.

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

Here is a complete example of a component using translation:

import I18n from 'react-native-i18n'
 
class Demo extends React.Component {
  render() {
    return <Text>{I18n.t('greeting')}</Text>
  }
}
 
I18n.fallbacks = true
 
I18n.translations = {
  en: {
    greeting: 'Hi!',
  },
  'en-GB': {
    greeting: 'Hi from the UK!',
  },
  fr: {
    greeting: 'Bonjour!',
  },
}

In our case, instead of having to import the library and manage translations in each component, we will manage all translations in the same place.

Create a strings.js file at the project root.

touch strings.js

Add the following code to it:

var I18n = require('react-native-i18n')
 
I18n.fallbacks = true
 
I18n.translations = {
  en: {
    instruction1: 'Welcome to React Native!',
    instruction2: 'To get started, edit index.js',
    instruction3: 'Press Cmd+R to reload \n Cmd+D or shake for dev menu',
  },
  fr: {
    instruction1: 'Bienvenue sur React Native!',
    instruction2: 'Pour commencer, éditez index.js',
    instruction3: 'Appuyez sur Cmd+R pour recharger \n Cmd+D ou agitez pour le menu dev',
  },
}
 
const AppString = {
  // screen titles
  instruction1: I18n.t('instruction1'),
  instruction2: I18n.t('instruction2'),
  instruction3: I18n.t('instruction3'),
}
export default AppString

In this file, as in the example we saw earlier, we import the library and define our translations.

However, once our translations are defined, we export a constant named AppStrings that groups all translations together.

This way, we will no longer need to use the react-native-i18n library in our components. We will only import AppStrings.

Here is the example for the index.ios.js and index.android.js screens:

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
import strings from './strings'
 
export default class I18N_Sample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>{strings.instruction1}</Text>
        <Text style={styles.instructions}>{strings.instruction2}</Text>
        <Text style={styles.instructions}>{strings.instruction3}</Text>
      </View>
    )
  }
}

That is how to internationalize a React Native application.