Localization with react native i18n: A Comprehensive Guide

One of the key features of any good mobile application is localization, which involves adapting the app to different languages and regions. This is where the react-native-i18n library comes in. This blog post will explore what react-native-i18n is, why it’s important, and how to use it in your React Native projects.

What is react-native-i18n?

React Native Internationalization (react-native-i18n) is a library that provides support for internationalization and localization in React Native applications. It is designed to make it easy for React Native developers to add support for multiple languages and locales to their apps.

The library provides a simple API for managing translations, and it supports a wide range of features including plurals, gender-based translations, and right-to-left language support. Additionally, it integrates seamlessly with popular internationalization tools like ICU and gettext.

Why Localization is Important?

Localization is the process of adapting an application to meet the language and cultural needs of users in different regions. It is important because it allows your app to reach a wider audience and provide a better user experience for people who may not speak the same language as the app’s default language.

When you localize your app, you can translate the user interface, error messages, and other text elements into different languages. You can also adapt the app to regional preferences such as date and time formats, currency symbols, and measurement units. This can help you to increase user engagement and retention, and ultimately, drive more revenue for your app.

Related read: How to Implement React Native Multi Language Support?

How to Use react-native-i18n?

To use react-native-i18n, you first need to install the library using npm:

npm install –save react-native-i18n

Next, you need to import the library and set it up in your app. This involves configuring the available languages and locales and defining the translation keys and values.

Related read: How To Create NPM Package For React Native?

Step 1: Create an i18n.js file at the same location where your app’s index.js is present

Here’s an example setup code:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import locales from './src/translations/locales';


// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
compatibilityJSON: 'v3',
resources: {
...locales, // here added multiple lang JSON files
},
fallbackLng: 'en',
lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
// if you're using a language detector, do not define the lng option
interpolation: {
escapeValue: false, // react already safes from xss
},
});


export default i18n;

In this example, we’ve imported multiple lang JSON files and added them under the resources and set English as the current language.in the next step, we create multiple lang JSON files.

Step 2: Create a translations folder under your app’s src and add an index.js file

Here your index.js file looks like this:

import en from './en';
import hn from './hn';
export default { en, hn };

In this example, we’ve imported two files first one is en.js, and the other hn.js. en.js file contains English translation JSON and hn.js contains Hindi translation JSON file. here you can create multiple local translations JSON files ex. Kanada, Telugu, etc

Here’s an example code for en.js:

export default {
translation: {
all: {
submit: 'submit',
switchThemeText: 'Switch Theme', 
},
},
};

Here’s an example code for hn.js:-

export default {
translation: {
all: {
submit: 'प्रस्तुत',
switchThemeText: 'थीम स्विच करें',
},
},
};

In this example, we’ve defined two languages (English and Hindi) and set English as the current language. We’ve also defined two translation keys (submit and switchThemeText) and assigned them different values for each language.

Step 3: Last and final step is to add our localization configuration to our application this can be done in one single step you just need to import our i18n.js configuration file into the App.js

Here’s an example code:

import React, { useEffect } from 'react';
import AppContainer from './src/containers/AppContainer';
import { Provider } from 'react-redux';
import configureStore from './src/redux/store';
import crashlytics from '@react-native-firebase/crashlytics';
import './i18n'; // here is the i18n config file added


const App = () => {
try {
return (
<Provider store={configureStore()}>
<AppContainer />
</Provider>
);
} catch (error) {
crashlytics().log('Error in App.');
crashlytics().recordError(error);
}
};


export default App;

Once you’ve set up react-native-i18n, you can use it to translate text in your app using the I18n.t() function or using useTranslation() hook.

Here’s an example:

import React from 'react';
import { Text } from 'react-native';
import { useTranslation } from 'react-i18next';


const Greeting = () => {
const { t } = useTranslation(); // here is the useTranslation() hook that provides translation function 't' and using that function we can translate our key values


return <Text>{t('translation:all:submit')}</Text>;
};


export default Greeting;

In this example, we’re rendering a simple Text component with the translated value of the submit key. Also, we can provide a user option to change lang as per their choice and this can be done using the changeLanguage() function.

Here’s an example:

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useTranslation } from 'react-i18next';


const Greeting = () => {
const { t, i18n } = useTranslation(); // here is the useTranslation() hook that provides translation function 't' and using that function we can translate our key values


const onChangeLang = () => {
i18n.changeLanguage('hn'); // here I provided the 'hn' hind as lang option to changeLanguage(). here all your text converted to the Hindi language
};


return (
<View>
<Text>{t('translation:all:submit')}</Text>
<TouchableOpacity onPress={() => onChangeLang()}>
<Text>Change language</Text>
</TouchableOpacity>
</View>
);
};


export default Greeting;

In this example, we change the language using the i18s changeLanguage() function and here I have provided a hard-coded ‘hn’(Hindi) language option, you can also create dynamic functionality for changing languages of the user’s choices and pass that value to changeLanguage() function. when we call the changeLanguage() function all your app text is translated to your selected lang.