How to use setLocale in i18n-js ?

How to / Third Party Tooling
1

I am using i18n-js within my expo project to translate my app.

This is how I configure it:

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(() => ({
    t: (scope, options) => i18n.t(scope, { locale, ...options }),
    locale,
    setLocale,
  }), [locale]);

  return localizationContext;
}

I pass this to my AppContext and try to use setLocale within my view:

function HomeView(props) {
  const { locale, setLocale } = useContext(AppContext);

  return (
    <View>
            <Button
              style={{ marginTop: 4 }}
              icon="translate"
              mode="contained"
              title="toggle navigation"
              onPress={() => setLocale(locale.includes('en') ? 'fr' : 'en')}
            >
              {locale.includes('en') ? 'FR' : 'EN'}
            </Button>
    </View>
  );
}

The function is called, but the text is still in english, what am I doing wrong ?