CODEWITHSUNDEEP
javascriptreactjsreact-nativei18nextreact-i18next
Oliver D
Oliver D

Reputation: 2889

How to set the default language in i18next - React Native?

I'm trying to set a default language when the user opening the app for the first time, I'm using i18next & react-i18next Default language I want to be ar, Is there a way to do it without user action like a button to change the language to ar?

Here's my config

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import {I18nManager} from 'react-native';
// the translations
const ar = require('./Lang/ar.json');
const en = require('./Lang/en.json');

const resources = {
  en: {
    translation: en,
  },
  ar: {
    translation: ar,
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: I18nManager.isRTL ? 'ar' : 'en',
  fallbackLng: 'ar',
  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

Upvotes: 1

Views: 4985

Answers (2)

Hend El-Sahli
Hend El-Sahli

Reputation: 6732

Try this:

import { reactI18nextModule } from 'react-i18next';
const ar = require('./Lang/ar.json');
const en = require('./Lang/en.json');

i18n.use(reactI18nextModule).init({
  resources: {
    ar,
    en,
  },
  fallbackLng: 'ar',
  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
});

Hint

It's better to have the fallback-lang aka default-language to be the user-device-lang instead of hardcoding it to ar ...

Upvotes: 0

tuan nguyen
tuan nguyen

Reputation: 386

in your App.js, check current user language to determine language:

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: cb => {
    const deviceLanguage =
        Platform.OS === 'ios'
          ? NativeModules.SettingsManager.settings.AppleLocale ||
            NativeModules.SettingsManager.settings.AppleLanguages[0] // iOS 13
          : NativeModules.I18nManager.localeIdentifier;
      cb(deviceLanguage.indexOf('vi')>=0?'vi':'en')
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18next
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: false,
    resources: languages,
  });
function App(){ return ....}

Upvotes: 2

Related Questions