Multi langue support on expo

Draft Disclaimer: Please note that this article is currently in draft form and may undergo revisions before final publication. The content, including information, opinions, and recommendations, is subject to change and may not represent the final version. We appreciate your understanding and patience as we work to refine and improve the quality of this article. Your feedback is valuable in shaping the final release.

I. Right and English Maitre, ressources Will be english first audience is French speaking
Local storage with mmkv to persist user preference
Locale

// using MMKV but feel free to use anything else like expo async storage
import {MMKV} from "react-native-mmkv"

// might be wise to have storage per user but the need is not present yet
export const storage = new MMKV({
    id: "my-app-id",
})

export function setItem(key, value) {
    return storage.set(key, String(value));
}

import React, {createContext, useCallback, useContext, useMemo, useState,} from "react";
import {I18n} from "i18n-js";
import en from "./en.json"
import fr from "./fr.json"
const translations = { en, fr }
import * as Localization from "expo-localization";

export default {fr, en}

export const DEFAULT_LOCALE = Localization.getLocales()[0].languageCode

import {getItem, setItem} from "../storage";

const LocaleContext = createContext({});

function LocaleProvider(props) {
    const i18n = useMemo(() => new I18n(translations), []);
    const defaultLocale = getItem("locale") ?? DEFAULT_LOCALE
    const [locale, _setLocale] = useState(defaultLocale)

    const setLocale = useCallback((locale) => {
        _setLocale(locale)
        i18n.locale = locale
        setItem("locale", locale)
    }, [i18n])

    // Set the locale once at the beginning of your app.
    i18n.locale = locale;

    // When a value is missing from a language it'll fall back to another language with the key present.
    i18n.enableFallback = true;

    i18n.defaultLocale = "en"

    const translate = useCallback((message, options = {}) => {
        return Object.keys(options).reduce((carry, key) => {
            return carry.replace(key, options[key])
        }, i18n.t(message))
    }, [i18n])
    return (
        <LocaleContext.Provider
            value={useMemo(() => ({
                __: translate,
                setLocale,
                locale,
            }), [setLocale, translate, locale])}
            {...props}
        />
    );
}

const useLocale = () => useContext(LocaleContext);

export {LocaleProvider, useLocale};

export default LocaleContext;


// en.json
{
"Save": "Save"
}

// fr.json
{
"Save": "Sauvegarder"
}


// usage in a component
const { __ } = useLocale()


<TouchableOpacity>
	<Text>
		{__('Save')}
	</Text>
</TouchableOpacity>