Change default language in react into arabic using i18n

Question

I am working on multi-language react app with english and arabic languages. The default language was english then I translated it in the ar.json file, Now I need to make the arabic language be the default language. I tried to change it in the i18n.js file but it didn't work. Here is the code :

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

import translationEN from './locales/en.json';
import translationAR from './locales/ar.json';

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

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'ar', // default language
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

I changed lng: en to lng : ar but it still shows the english as the default language, so what shall I do ?

Answer 1

Please make sure both translation files exist, but I think your approach is wrong you should change the default language in the i18n config file.

const i18nConfig = {
    locales: ['en', 'sr', 'sl'],
    defaultLocale: 'sl',
    prefixDefault: false,
};

module.exports = i18nConfig;

This is just an example of setting the default locale on my page and it works perfectly for Slovenian language.