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

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

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

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;

import i18n from 'i18next';

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

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;

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