Not every React Native app serves global customers, but if yours does, you’ll need it to support internationalization. You can use react-native-localize to support multiple languages by detecting the operating system or the device language.

In this tutorial, let’s build a small demo that uses react-native-localize along with a popular internationalization library called i18n-js. The app will display some mock locales based on the device’s language and region settings.

Requirements

• Nodejs version <= 10.x.x installed
• watchman installed
• have access to one package manager such as npm or yarn
• use react native version 0.60.x or above

Getting started with the Crowdbotics App Builder

To generate a new React Native project you can use the react-native cli tool. Or if you want to follow along, I am going to generate a new app using Crowdbotics app building platform.

Register either using your Github credentials or email. Once logged in, you can click the Create App button to create a new app. The next screen is going to prompt you as to what type of application do you want to build. Choose Mobile App.

Enter the name of the application and click the button Create App. After you link your GitHub account from the dashboard, you are going to have access to the GitHub repository for the app. This repo generated uses the latest react-native version and comes with built-in components and complete examples that can be the base foundation for your next app.

You can now clone or download the GitHub repo that is generated by the Crowdbotics app building platform. Once you have access to the repo on your local development environment, make sure to navigate inside it. You will have to install the dependencies for the first time using the command yarn install. Then, to make it work on the iOS simulator/devices, make sure to install pods using the following commands from a terminal window.

# navigate inside iOS
cd ios/

# install pods
pod install

That’s it. It’s a three-step process. Now, let’s get back to our tutorial.

Installing react-native-localize

To get started, open a terminal window and generate a new React Native app. Also, install the following dependencies after navigating inside the app directory in a terminal window.

# install following dependencies
yarn add react-native-localize i18n-js lodash.memoize

# for ios only
cd ios/
pod install

The react-native-localize library gives you access to localization constants related to a particular device. These constants are not included in the i18n-js library.

The lodash.memoize package is going to be used since i18n-js does not have a concept of caching.

Here is an image of successfully installing pods related to react-native-localize to make it work with the iOS platform. It also lists some of the previously installed pods when the install command is executed.

The above terminal screenshot also lists other pods already installed. If you haven’t installed them, they are going to be installed during this step.

For Android, if you are using a react-native version greater than 60.x.x, you do not have to do anything.

Now, we are going to use an iOS simulator for this tutorial. If you are on Windows or Linux-based operating systems, you can use Android Studio.

Run the command below to open the boilerplate application that comes with react-native-cli.

# for Mac users
react-native run-ios

# for Windows/Linux users
react-native run-android

If the app opens without any error, that means the configuration we have done so far is good to go.

Creating locales for different languages

Create two new files en.json and nl.json inside the directory src/locales/. Both of these files are for separate languages: English and Dutch. Inside these files are JSON objects that have key-value pairs. The key for both files or the languages is going to be the same. The value for each key is going to differ as it contains the actual translation.

Following are the contents of each file:

// en.json
{
 "hello": "Hello!",
 "Good morning": "Good morning",
 "Currency": "USD"
}
// nl.json
{
 "hello": "Hallo!",
 "Good morning": "Goedemorgen",
 "Currency": "EUR"
}

Adding i18n functionality

Open App.js and import the following statements.

import React from 'react'
import * as RNLocalize from 'react-native-localize'
import i18n from 'i18n-js'
import memoize from 'lodash.memoize'
import { SafeAreaView, StyleSheet, Text } from 'react-native'

Now, add the translation files from the directory created in the previous step using an object called translationGetters.

const translationGetters = {
  en: () => require('./src/locales/en.json'),
  nl: () => require('./src/locales/nl.json')
}

It needs a helper function, translate, that is going to translate the keywords on the language selection.

const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
)

We require another helper method that is going to detect the fallback language when there is no proper translation available for a particular word or phrase. Let us call this helper function setI18nConfig.

const setI18nConfig = () => {
  const fallback = { languageTag: 'en' }
  const { languageTag } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback
  translate.cache.clear()
  i18n.translations = { [languageTag]: translationGetters[languageTag]() }
  i18n.locale = languageTag
}

In the above snippet, using the method RNLocalize.findBestAvailableLanguage(), you can let the app detect the possible language tag (value for each tag is coming from the language getters object). If no tag is available, it is going to use the fallback language tag. This method can also be used with some languages to detect their reading direction (such as RTL).

Completing the App component

Lastly, let us create the App component. In the App.js file, start by adding a constructor method that is going to be used to set the i18n config helper method.

class App extends React.Component {
  constructor(props) {
    super(props)
    setI18nConfig()
  }
  // ...
}

export default App

Then, using the lifecycle methods componentDidMount and componentWillUnmount, you are going to add and remove event listeners to listen for any localization change.

componentDidMount() {
 RNLocalize.addEventListener('change', this.handleLocalizationChange)
 }
 componentWillUnmount() {
 RNLocalize.removeEventListener('change', this.handleLocalizationChange)
 }
 handleLocalizationChange = () => {
 setI18nConfig()
 .then(() => this.forceUpdate())
 .catch(error => {
 console.error(error)
 })
 }

Following is the snippet for the rest of the component file with the render method and the styles used in it. Apart from translation locales, react-native-localize provides ready-to-use helper methods such as getCountry(). This particular method returns a value in the form of a country code based on the device’s locale.

render() {
 return (
 <SafeAreaView style={styles.safeArea}>
 <Text style={styles.value}>{translate('hello')}</Text>
 <Text style={styles.value}>{translate('Good morning')}</Text>
 <Text style={styles.value}>Currency: {translate('Currency')}</Text>
 <Text style={styles.value}>Country: {RNLocalize.getCountry()}</Text>
 </SafeAreaView>
 )
}

Here are the corresponding styles for the App component.

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: 'white',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  value: {
    fontSize: 24
  }
})

Running the app

Make sure you build the app before running it on the platform of your choice. Here are the commands you need to run depending on the device.

# ios
react-native run-ios
# android
react-native run-android

When the app’s build process is complete, it is going to run the English locales by default.

On changing the locale, the correct result is reflected in the app.

Conclusion

This completes the tutorial on how to use react-native-localize to add and use language translations in a React Native app.