Multi Language in React Native Application for beginners

In this article I will show you how to implement the multi language support in a react native application locally. First of all create the new application of react native by using the follow command:

(make sure that you have the latest version of node install on you system by run the command on terminal node -v)
npx react-native init appname

Now install the libraries to make the multi language works in the application:

yarn add i18next react-i18next
or
npm install i18next react-i18next

Now you are good to go and let’s dive into the code. In this application i will translate english to french and french to english.
First of all we will create two json file in which we will store the languages. In en.json file we will store the english language and in fr.json we will store the the french translation of the english language .

Note: Make sure that the key should be same in both files e.g: hello is the key in both file.

Now we will configure the i18n in react native application.

Here’s the configuration of multi-language. By default I set the language to english which is “en” in this code. Make sure to import the configuration file in the root file in our case the root file is index.js.

It will initialize all the setting and makes things ready to use in the application.

First of all import the useTranslation from react-i18next and destructure the translation and i18n from useTranslation. And create a simple function which will accept the language keys which we configured in the settings file. To show the content of language file use the translation function and pass the key of word , in our case the key of or sentence is hello in both file . If the language is en then it will reflect the content of en.json file and if the language is fr then it will reflect the content of fr,json file.

Here is our final result of this application .

I hope it will help you :) Happy coding.