Implementing multi language (i18n) without any library in React Native

by Franco Berton

Introduction: This article wants to be an introductory guide on how to make a multi language self-made in React Native without external modules, describing the necessary steps and concluding through an reflective analysis of the proposed solution.

Requirements: The precondition for this guide is the integration of react-redux inside the package.json.

1. Translation file

Implementing a multi language self-made require the definition of a folder called i18n.

This folder will contain JSON files, where each one of them will present a different locale support.

In this case, we define two JSON files for support the english language and the italian language.

Below, we submit the structure of the root folder:

ios
android
src
└── i18n
├── en.json // English
└── it.json // Italian

Inside each file, we define the identifying properties of translations:

//en.json
{
   “selectLanguage”: “Select language”,
   “languageEn”: “English”,
   “languageIt”: “Italian”,
   “welcome”: “Welcome”,
   “hello”: “Hello”,
   “howareyou”: “How are you?”
}
//it.json
{
  “selectLanguage”: “Seleziona il linguaggio”,
  “languageEn”: “Inglese”,
  “languageIt”: “Italiano”,
  “welcome”: “Benvenuto”,
  “hello”: “Ciao”,
  “howareyou”: “Come stai?”
}

2. Implementing an internationalization service

The step provides an internationalization service definiton represented by a reducer and an action.

The architectural structure of the service will look like this:

ios
android
src
└── services
└── Intl
│ ├── reducers.js
│ ├── actions.js
│ └── index.js
├── mapDispatchToProps.js
├── mapStateToProps.js
└── index.js

The reducer will provide a method to set the translation of selected language.

This method will be invoked by an action to handle the language translations.

Below, we submit the method to set the translations:

The previous method will be invoked by another method to handle the action to update the language translations:

In summary, the reducer will look like this:

The action to update a language will be look this:

Finally, inside an index file we export the reducer and the action:

and we register the reducer inside the combineReducers function of redux to catch actions dispatched:

3. Component definition for redux connection

So that the internationalization service can be shared among the various features, it is necessary to make a component to facilitate the connection to redux of the features.

This component provides the sharing of actions and states about to the invocation of actions.

It will be look this:

The mapping of actions and states is defined in two distinct files:

4. Change language component definition

Now, let’s make the component to change language within the components folder, defining a structure like this:

ios
android
src
└── components
└── LanguageSwitcher
│   └── index.js
└── index.js

In the component class, we define the method to change language.

It will call the action, extracted from props , to update the global state containing the language and the translations.

The method will be look this:

The change language component will be represented with Picker component to select the desired language.

The class will be look like this:

5. Connecting a feature to redux to share the translated contents

In this step, we make a feature called settings, where it will be used the change language component and the translations.

The feature will be connected to redux, so that it can have the state containing the translations.

Below, the implementation of settings component:

6. Result

7. Conclusion

The proposed solution want to highlight, how is it possible, in just a few simple step, to make an internationalization service self-made, able to satisfy standard exigencies of this feature.

This approach must not be seen as an alternative to module react-native-localize, but rather a basic solution self-made.

The source code of the proposed solution you can see on this link.

If you like my article, share it.

Your support and feedback means so much to me.