title: How to use setLocale within i18n-js?
body: <p>I am using i18n-js within my expo project to translate my app.</p>
  
  <p>This is how I configure it: </p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import * as Localization from 'expo-localization';
  import i18n from 'i18n-js';
  
  export default function configureI18n(translations) {
    i18n.fallbacks = true;
    i18n.translations = translations;
    i18n.locale = Localization.locale;
    const [locale, setLocale] = React.useState(Localization.locale);
    const localizationContext = React.useMemo(() =&gt; ({
      t: (scope, options) =&gt; i18n.t(scope, { locale, ...options }),
      locale,
      setLocale,
    }), [locale]);
  
    return localizationContext;
  }
  </code></pre>
  
  <p>I pass this to my <code>AppContext</code> and try to use <code>setLocale</code> within my view:</p>
  
  <pre><code>function HomeView(props) {
    const { locale, setLocale } = useContext(AppContext);
  
    return (
      &lt;View&gt;
              &lt;Button
                style={{ marginTop: 4 }}
                icon="translate"
                mode="contained"
                title="toggle navigation"
                onPress={() =&gt; setLocale(locale.includes('en') ? 'fr' : 'en')}
              &gt;
                {locale.includes('en') ? 'FR' : 'EN'}
              &lt;/Button&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>The function is called, but the text is still in english, what am I doing wrong ? </p>