DEV Community

Cover image for 🌎 Seamless Multi-Language Support in React Native
Amit Kumar
Amit Kumar

Posted on

3 1 1 2 1

🌎 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.


Image description


🛠️ 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
Enter fullscreen mode Exit fullscreen mode

📂 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.

Image description


📝 Translation Files

en.json

{
  "welcome": "Welcome",
  "hello_world": "Hello, World!"
}
Enter fullscreen mode Exit fullscreen mode

hi.json

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

🔧 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;

Enter fullscreen mode Exit fullscreen mode

🛠 Helper for Translations

translate.js

import i18n from 'i18next';

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


Enter fullscreen mode Exit fullscreen mode

🚀 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;
Enter fullscreen mode Exit fullscreen mode

🖥️ 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',
  },
});

Enter fullscreen mode Exit fullscreen mode

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay