react-nativeexpoi18next

React nativ i18n doesn't work on prod environment


I use i18n on my application react nativ, with expo, for translate, all works fine in dev environment, but not in production environment

For test in prod environment i use : npx expo start --no-dev --minify --clear --clear for reset if i add code (like console.log) but its not always run ?

See my file "i18n.js" :

        import i18n from 'i18next';
    import { initReactI18next } from 'react-i18next';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    import en from './locales/en.json';
    import fr from './locales/fr.json';
    import es from './locales/es.json';
    import it from './locales/it.json';
    import * as Localization from 'expo-localization';
    
    const LANGUAGE_KEY = 'user-language';
    const deviceLanguage = Localization.locale.split('-')[0]; // Exemple : 'en' ou 'fr'
    console.log("đŸ“± Langue du device dĂ©tectĂ©e :", deviceLanguage);
    
    // Initialisation d'i18n avec la langue par défaut
    i18n
        .use(initReactI18next)
        .init({
            resources: {
                en: { translation: en },
                fr: { translation: fr },
                es: { translation: es },
                it: { translation: it },
            },
            lng: deviceLanguage, // Par défaut, si aucune langue n'est définie
            fallbackLng: 'en', // En cas d'erreur ou de langue non trouvée
            interpolation: {
                escapeValue: false,
            },
            compatibilityJSON: 'v3'
        })
        .then(() => console.log("✅ i18n initialisĂ©"))
        .catch((err) => console.error("⚠ Erreur lors de l'init i18n", err));
    
    // Un seul bloc pour les événements :
    i18n.on('languageChanged', (lng) => console.log(`🌍 Langue changĂ©e : ${lng}`));
    i18n.on('failedLoading', (lng) => console.error(`⚠ Échec de chargement de la langue : ${lng}`));
    
    // Charger la langue depuis AsyncStorage et définir la langue détectée ou la langue par défaut
    const getLanguageFromStorage = async () => {
        try {
            let savedLanguage = await AsyncStorage.getItem(LANGUAGE_KEY);
            if (!savedLanguage) {
                savedLanguage = deviceLanguage; // Par défaut, on utilise la langue détectée
            }
    
            // Vérifier si la langue détectée existe dans les ressources
            const availableLanguages = Object.keys(i18n.options.resources);
            if (availableLanguages.includes(savedLanguage)) {
                i18n.changeLanguage(savedLanguage); // Change la langue si elle existe dans les ressources
            } else {
                i18n.changeLanguage('en'); // Si la langue n'existe pas, utiliser 'en' par défaut
            }
        } catch (e) {
            console.error('Failed to load language from storage', e);
            i18n.changeLanguage('en'); // En cas d'erreur, revenir à la langue par défaut
        }
    };
    
    getLanguageFromStorage();

export default i18n;

And my console.log is not show, i have tried to execute this :

I call it like this in my code :

const { t, i18n } = useTranslation();

Solution

  • I have found, i just need to add my file i18n.js in my principal file

    import '../../src/i18n.js';
    

    Just don't know why that failed on prod and not in dev