🌎 Seamless Multi-Language Support in React Native

Adding multi-language support to your React Native app not only enhances the user experience but also expands your app’s reach to a global audience. In this article, we’ll show you how to integrate multi-language support into your React Native app using i18next, react-i18next, and other helpful packages.

---

---

🛠️ Required Dependencies

Run the following commands to install the necessary packages:

yarn add i18next react-i18next i18next-http-backend i18next-browser-languagedetector
yarn add @react-native-async-storage/async-storage
yarn add react-native-localize

---

📂 Setting Up the Translations Folder

Create a translations folder inside your src directory. Inside this folder, create the following files:

1. en.json - English translations.
2. hi.json - Hindi translations.
3. i18n.js - Configuration for i18next.
4. translate.js - Helper function for translation.

---

📝 Translation Files

en.json

{
  "welcome": "Welcome",
  "hello_world": "Hello, World!"
}

hi.json

{
  "welcome": "स्वागत है",
  "hello_world": "नमस्ते, दुनिया!",
  "change_language": "भाषा बदलें"
}

---

🔧 i18n Configuration

i18n.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import * as Localization from 'react-native-localize';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Translation files
import english from '../translations/en.json';
import hindi from '../translations/hi.json';

// Detect the user's language
const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: callback => {
    AsyncStorage.getItem('user-language', (err, language) => {
      if (err || !language) {
        const bestLanguage = Localization.findBestAvailableLanguage([
          'english',
          'hindi',
        ]);
        callback(bestLanguage?.languageTag || 'english');
      } else {
        callback(language);
      }
    });
  },
  init: () => {},
  cacheUserLanguage: language => {
    AsyncStorage.setItem('user-language', language);
  },
};

i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'english',
    lng: 'english',
    resources: {
      english: {translation: english},
      hindi: {translation: hindi},
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

---

🛠 Helper for Translations

translate.js

import i18n from 'i18next';

export const translate = (key, options = {}) => {
  return i18n.t(key, options);
};

---

🚀 Integrating i18n in Your App

Update your App.js file to include the I18nextProvider:

App.js

import React from 'react';
import MainNavigator from './src/navigation/rootNavigator';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {I18nextProvider} from 'react-i18next';
import i18n from './src/translations/i18n';

const App = () => {
  return (
    <I18nextProvider i18n={i18n}>
      <SafeAreaProvider>
        {/* Your main app components */}
      </SafeAreaProvider>
    </I18nextProvider>
  );
};

export default App;

---

🖥️ Example Screen for Multi-Language Support

Create a component to demonstrate the language switch feature:

LanguageComponent.js

import {View, Text, Button, StyleSheet} from 'react-native';
import React from 'react';
import {useTranslation} from 'react-i18next';
import {translate} from '../../translations/translate';

const LanguageComponent = () => {
  const {i18n} = useTranslation();

  const switchLanguage = language => {
    i18n.changeLanguage(language);
  };

  return (
    <View style={styles.container}>
      <Text>{translate('welcome')}</Text>
      <Text>{translate('hello_world')}</Text>
      <Button title="Switch to Hindi" onPress={() => switchLanguage('hindi')} />
      <Button
        title="Switch to English"
        onPress={() => switchLanguage('english')}
      />
    </View>
  );
};

export default LanguageComponent;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

With these steps, you’ve successfully added multi-language support to your React Native app! 🌐 Happy coding! 🚀