Installing react-native-localize

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

If you’re using a react-native version greater than 0.60.x , you won't have to link the library react-native-localize manually. If you’re below the specified version, please refer to the module's official documentation here.

This 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 doesn’t include a concept for caching.

Add locales

Create two new files ( en.json and nl.json ) inside the directory src/translations/ . Both of these files are for separate languages: English and Dutch, respectively. 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.

The following are the contents of each file:

Add i18n Functionality

Open the App.js file and import the following statements:

Next, require the translation files from the directory created in the previous step, using an object named translationGetters .

Add the helper function translate , which is going to translate the keywords from the language files.

Next, we’ll add another helper method to detect the fallback language when there’s no proper translation available for a particular word or phrase.