Using i18n in React Native apps
Internationalization (i18n) is essential for any app with a global user base. Here's how to implement it in a React Native app with Crowdbotics.
6 October 2021
The Crowdbotics platform leverages AI and systematic code reuse to help you build better applications faster and with less risk.
Let Crowdbotics take you so far ahead of the curve, you create a new trajectory.
Don’t take our word for it, see what our customers have to say.
By Industry
Everything you need to be successful with Crowdbotics.
Use & Learn
We are on a mission to radically transform the software development lifecycle.
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.
10.x.x
installed0.60.x
or aboveTo 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.
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.
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"
}
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).
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
}
})
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.
This completes the tutorial on how to use react-native-localize
to add and use language translations in a React Native app.