Overview
I initialize the I18nManager with the client's locale and ianaTimezone values. If the client data hasn't been loaded yet, default values of en-US and America/New_York are used:
const i18nManager = useMemo(
() =>
new I18nManager({
locale: locale,
timezone: ianaTimezone,
fallbackLocale: "en",
}),
[locale, ianaTimezone],
);
return (
<I18nContext.Provider value={i18nManager}>
<AppLangProvider>{children}</AppLangProvider>
</I18nContext.Provider>
);
Within AppLangProvider, I connect my translations:
import { useI18n } from "@shopify/react-i18n";
import en from "../locales/en.json";
import fr from "../locales/fr.json";
import de from "../locales/de.json";
import es from "../locales/es.json";
import it from "../locales/it.json";
const translations = { en, fr, de, es, it };
export default function AppLangProvider({ children }) {
const [i18n, ShareTranslations] = useI18n({
id: "App",
fallback: en,
async translations(locale) {
const baseLocale = locale?.split("-")[0];
return translations[baseLocale];
},
});
return <ShareTranslations>{children}</ShareTranslations>;
}
Issue
When the client's locale (en-US) matches one of my translations, everything works correctly, and the i18n object maintains the client's ianaTimezone (e.g., i18n.defaultTimezone === Asia/Tbilisi).
However, if the client selects a language for which I don't have a translation (e.g., Polish pl-PL), the fallback locale (en) is applied correctly, but the defaultTimezone within the i18n object resets to the default (i18n.defaultTimezone === America/New_York) instead of retaining the client's ianaTimezone (Asia/Tbilisi).
Expected behavior
The i18nManager should maintain the ianaTimezone provided in my useMemo regardless of the fallback locale being applied. The timezone should not reset to the default value when the fallback translations are used.