dev-resources.site

for different kinds of informations.

🌎 Seamless Multi-Language Support in React Native

Published at

1/11/2025

🛠️ 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:

en.json - English translations.
hi.json - Hindi translations.
i18n.js - Configuration for i18next.
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! 🚀

android Article's

30 articles in total

Three Common Pitfalls in Modern Android Development

read article

Using SVGs on Canvas with Compose Multiplatform

read article

Kotlin Generics Simplified

read article

Understanding Process Management in Operating Systems

read article

Introduction to Operating Systems