Translation in React Native Apps

The Ultimate Guide to Implementing Translation in React Native Apps

by

In today’s digital age, expanding your app’s reach to a global audience is essential for success. Translation in React Native Apps is a powerful way to break down language barriers and connect with users worldwide.

In this comprehensive guide, we’ll show you how to seamlessly implement translation in React Native apps, ensuring your application becomes accessible and user-friendly to a broader spectrum of users.

Understanding the Importance of Translation in React Native Apps.

Translation in React Native apps is more than just converting text from one language to another; it’s about creating an inclusive user experience. Here’s why it matters:

1. Broadening Your User Base

By offering your app in multiple languages, you can tap into new markets and attract a more diverse audience. This can significantly increase your user base and revenue potential.

2. Enhancing User Engagement

Users are more likely to engage with an app that speaks their language. Translation makes your app more user-friendly and relatable, leading to higher engagement and user satisfaction.

3. Building Trust and Credibility

A multilingual app conveys professionalism and commitment to user needs. Users are more likely to trust an app that caters to their language preferences, leading to higher trust and credibility.

Implementing Translation in React Native Apps

Now, let’s dive into the practical steps of integrating translation into your React Native app:

Step 1. Choose the Right Translation Library

Begin by selecting a translation library that suits your app’s needs. Popular options include ‘react-i18next’ and ‘i18next’ These libraries provide comprehensive tools for managing translations efficiently.

install both libraries using the below command to use Translation in React Native Apps

npm install i18next react-i18next

Step 2: Create Translation Resources

Create translation resources for your project. Typically, these resources are stored in JSON files, one for each language, under a folder named locales. For example, you might have files like en.json for English and fr.json for French.

Example of en.json :

{
  "welcome": "Welcome to DeveloperNoob!",
  "greeting": "Hello from, {{name}}!"
}

sp.json :

{
  "welcome": "Bienvenido a DeveloperNoob!",
  "greeting": "Hola de, {{name}}!"
}

Step 3: Create a Translation Configuration file in the same folder as i18n.js

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

// import your language files
import english from './en.json';
import spanish from './sp.json';

// Initialize i18next
i18next.use(initReactI18next).init({
    resources: {
        en: { translation: english },
        sp: { translation: spanish },
    },
    lng: 'en', // Default language
    fallbackLng: 'en', // Fallback language
});

export default i18next;

Step 4: Import the configuration file in your App.tsx as

import i18n from "./src/locales/i18n"; //change it according to your path

Step 5: In your app components, you can use the useTranslation hook to access translated strings:

import React from 'react';
import i18n from "./src/locales/i18n";
import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      <p>{t('welcome')}</p>
      <p>{t('greeting', { name: 'Kahnu' })}</p>
    </div>
  );
};

export default MyComponent;

Reload the app and see the changes.

Note: If you face any error like below then just change the i18n import statement to from App.tsx to index.tsx.

index.tsx

/**
 * @format
 */

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import i18n from "./src/locales/i18n"; // Here is your i18n config file path
AppRegistry.registerComponent(appName, () => App);

You might be seeing a warning 

i18next::pluralResolver: Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling.

This warning is related to how the i18next library handles pluralization based on the language’s rules.

It’s indicating that your environment doesn’t fully support the Intl API, which is needed for proper pluralization handling in some languages.

To resolve this warning and ensure correct pluralization in your React Native app, you can follow these steps:

Install the intl Polyfill and intl-pluralrules which is used for proper pluralization handling in various languages.

npm install intl
npm install intl-pluralrules

Now update our App.tsx code to like below

import "intl";
import "intl-pluralrules";
import React from 'react';
import i18n from "./src/locales/i18n"; //chnage it according to your path
import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      <p>{t('welcome')}</p>
      <p>{t('greeting', { name: 'Kahnu' })}</p>
    </div>
  );
};

export default MyComponent;

Now we can we can easily add Translation in React Native Apps.

Output:

But, now how to use the translation in our child component, we need to provide i18n instance to all components, for this we have a wrapper function I18nextProvider.

We can use this wrapper like below 

<I18nextProvider i18n={i18n}>
  <ParentComponents />
</I18nextProvider>

1. <I18nextProvider i18n={i18n}>: This JSX element is the opening tag of the I18nextProvider component. It takes a single prop i18n that should be your i18n instance. This component sets up a context for translation and ensures that the translation context is available to all nested components.

2. <ParentComponents />: This JSX element represents the ParentComponents component. It is placed inside the I18nextProvider component. All child components of ParentComponents (and any further descendants) will have access to the i18n instance and translation functions t because they are within the context provided by I18nextProvider.

3. </I18nextProvider>: This JSX element is the closing tag of the I18nextProvider component. It indicates the end of the I18nextProvider scope.

All done, now we can use that i18n instance in all components.

Let’s say ParentComponents contains a child component like <ChildWelcome />, then how we can use translation there, see the below example of <ChildWelcome />.

import React from "react";
import { Text, View } from "react-native";

import { useTranslation } from "react-i18next";

const ChildWelcome = () => {
  const { t } = useTranslation();
  return (
    <View>
      <Text>{t("welcome")}</Text>
    </View>
  );
};

export default ChildWelcome;

Find the source code of Translation in React Native Apps – https://github.com/kahnu044

you can check our blog on How to use tailwind in react native – https://developernoob.com/react-native-app-with-tailwind-css/

Conclusion:

Incorporating Translation in React Native Apps is a strategic move that can lead to increased user engagement, broader market reach, and enhanced trust among your audience. Follow this ultimate guide to ensure a seamless and successful implementation, and watch your app thrive on a global scale.

Leave a Comment