It is a thing that if you want to improve your application and make it more available for using it in other countries, internationalization is an important requirement for reaching more customers and clients. That’s why in this article I will show you how to make your React Native app Multi-Language supported.
One thing that I want to mention before starting is that the process of internationalizing your app not only means changing the main language of the app, but also translating the proper date and time formats, the currencies and also the correct scripting (such as RTF).
As I mentioned before, in order to make our app multilanguage, we’re going to use two libraries one called i18next and another one called react-18next.
On the one hand, the i18next library is a JavaScript framework used for internationalization. It gives the user the standards of i18n for web and mobile apps, even for desktop apps. It has some great solutions such as detecting the user language and loading and caching the translations.
It supports having multiple translation files and loading them as needed for more scalability.
On the other hand, the react-18next library is an i18next based framework used specially for react and react native apps, and for server-side rendering.
I will show you in 5 easy steps how to internationalize your App
1- First, in your React Native project you will need to install the mentioned libraries:
2- After installing the needed libraries, inside the source folder of your project, create another folder called i18n. Inside this folder is where you’re going to store the configuration file and the JSONs with the translations you want to use. E.g.
3- Once you have the folder created, the next step is to create a JSON file for each translation you want to have. Inside the translation files, add the keys that must be always unique, and add the values that is where you have the wanted translation. Here’s an example.en.js
es.js
4- Next step is to setup the i18next configuration file. Inside the i18n folder, create a file named index.js, and there import i18n, initReactI18nex from the installed libraries and import the JSONs previously created.
Once having the required import, use the following code snippet for finishing the setup.
5- As the last step, to make it work we’ll use the following code snippet in the screens we want to get translated:
So with that done, your app depending on the locale that is used will show the corresponding language and now the app is internationalized.
Leave A Comment