title: How to persist language change react-i18next React-native
body: <p>I use <code>react-i18next</code> and <code>i18next</code> to localize an app. I want to be able to change the language manually in the settings and persist that change.
  The problem is i dont know how to use redux in the <code>i18n</code> config file as redux is async, also i've checked the docs for some built in storage option in <code>react-i18next</code> but without success.</p>
  
  <p>here is the <code>i18n</code> config file:</p>
  
  <pre class="lang-js prettyprint-override"><code>'use strict';
  
  import i18n from 'i18next';
  import {reactI18nextModule, initReactI18next} from 'react-i18next';
  import DeviceInfo from 'react-native-device-info';
  
  import translationFR from '../translation/fr/translation.json';
  import translationEN from '../translation/en/translation.json';
  import translationAR from '../translation/ar/translation.json';
  
  async function getAppLang() {
    const unsubscribe = store.subscribe(() =&gt; true);
    const appLang = await store.getState().appLang;
    await unsubscribe();
    return appLang;
  }
  
  let locale = DeviceInfo.getDeviceLocale().substring(0, 2);
  if (locale != 'fr' &amp;&amp; locale != 'ar') {
    locale = 'en';
  }
  
  // the translations
  const resources = {
    en: translationEN,
    fr: translationFR,
    ar: translationAR,
  };
  i18n
    .use(reactI18nextModule) // passes i18n down to react-i18next
    .init({
      resources: resources,
      lng: locale,
      fallbackLng: ['en', 'fr', 'ar'],
      keySeparator: false, // we do not use keys in form messages.welcome
      interpolation: {
        escapeValue: false, // react already safes from xss
      },
    });
  
  
  export default i18n;
  </code></pre>
  
  <p>To change the language i use this function:</p>
  
  <pre class="lang-js prettyprint-override"><code>import i18n from 'config/i18n';
  ////
  i18n.changeLanguage(langageName);
  </code></pre>
  
  <p><strong>THANKS !</strong></p>