How to import i18next in React Native?

Integrating and configuring i18next in your React Native project for internationalization and localization enables your application to support multiple languages. Here are the steps and examples:

Step 1: Install necessary packages

First, install i18next and related libraries in your React Native project using npm or yarn.

bash
npm install i18next react-i18next i18next-http-backend i18next-react-native-language-detector

Or using yarn:

bash
yarn add i18next react-i18next i18next-http-backend i18next-react-native-language-detector

Step 2: Configure i18next

Next, create and configure i18next. This is typically done in a separate file, such as i18n.js.

javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-react-native-language-detector';

i18n
  .use(HttpBackend) // Load translation resources
  .use(LanguageDetector) // Auto-detect device language
  .use(initReactI18next) // Integrate i18next with react-i18next
  .init({
    fallbackLng: 'en', // Default language
    debug: true, // Enable debug mode
    interpolation: {
      escapeValue: false, // No additional code escaping needed
    },
    react: {
      useSuspense: false, // Disable Suspense feature
    },
  });

export default i18n;

Step 3: Add translation resources

Add translation resources by creating language folders and corresponding translation files. For example, create locales/en/translation.json and locales/es/translation.json files with the appropriate translations:

json
// locales/en/translation.json
{
  "welcome": "Welcome to React Native!"
}

json
// locales/es/translation.json
{
  "welcome": "¡Bienvenido a React Native!"
}

Step 4: Use translation

Use the useTranslation hook in your components to implement translations.

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

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

  return (
    <View>
      <Text>{t('welcome')}</Text>
    </View>
  );
};

export default WelcomeScreen;

Step 5: Run your application

Run your React Native application to verify that multi-language support works correctly. The app will display the appropriate translated text based on the device's language settings.

Through these steps, you can successfully integrate i18next into your React Native application to implement multi-language functionality.