How can i do interpolation with multi language in react native using i18n

Implementing multi-language support and interpolation with i18n in a React Native project involves several steps. I'll walk you through the implementation step by step, including practical code examples.

Step 1: Install Dependencies

First, install the i18next and react-i18next libraries. For this example, we'll use i18next and react-i18next as they support advanced features like interpolation, pluralization, and context.

bash
npm install i18next react-i18next

Step 2: Configure i18n

Create an i18n.js file to configure i18next. In this file, initialize i18next and define your language resources.

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

const resources = {
  en: {
    translation: {
      "welcome": "Welcome, {{name}}!"
    }
  },
  zh: {
    translation: {
      "welcome": "欢迎, {{name}}!"
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "en", // Set default language
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

Step 3: Use in React Components

Within React components, utilize the useTranslation Hook to load the translation function and perform interpolation.

javascript
import React from 'react';
import { useTranslation } from 'react-i18next';

function WelcomeComponent() {
  const { t } = useTranslation();

  const name = "John";
  return <h1>{t('welcome', { name })}</h1>;
}

In the above example, {{name}} is replaced with the value of the name variable passed in (here, "John"), so the greeting is displayed according to the current language.

Step 4: Switch Language

To switch languages in your application, use the i18next.changeLanguage method.

javascript
import { i18n } from './i18n';

function changeLanguage(language) {
  i18n.changeLanguage(language);
}

Calling changeLanguage('zh') switches to Chinese.

Summary

With this approach, you can easily implement multi-language functionality in your React Native application with dynamic interpolation, which is highly useful for applications that need to display text based on user input or dynamic data. This setup also supports predefined translation texts, ensuring proper internationalization and localization of content.