React native (expo) change locale with i18n-js

Question

Using the official documentation for Expo Localization https://docs.expo.dev/guides/localization I was able to implement translations. However, switching languages does not take immediate effect.

After changing the language on the Settings screen I return back to the home page and the previous language is still active, even though i18n.locale is set to the new language.

This is not the full code, but all the important parts:

settings.js

import { useRouter } from "expo-router";
import i18n from '../localizations/i18n';
import { Ionicons } from '@expo/vector-icons';

const Settings = () => {
   const router = useRouter();

   const changeLanguage = async () => {
        try {
            i18n.locale = await AsyncStorage.getItem('settings').language;
        } catch (e) {
            console.log('Error getting language', e);
        }
    };

   ... code

   <Pressable onPress={() => router.back()}>
        <Ionicons name="arrow-back" size={50} color="black" />
   </Pressable>

   ... form that triggers `changeLanguage()`
}

localizations/i18n.js

import { I18n } from "i18n-js";

const i18n = new I18n({
    en: {
        hello: 'Hello',
    },
    de: {
        hello: 'Hallo'
    }
});

i18n.defaultLocale = 'en';

export default i18n;

home.js

import i18n from "../localizations/i18n";
import { Text} from "react-native";

<Text>{i18n.t('hello')}</Text>

<Text>{i18n.t('hello', {locale: i18n.locale})}</Text> // doesn't work either

Should I refresh the i18n somehow? There is no mention in the official documentation.