Search code examples
react-nativei18nextreact-i18next

Big Locale DBs in React-native (Expo)


I've found this good and simple article https://medium.com/@jamuhl/translate-your-expo-io-react-native-mobile-application-aa220b2362d2 to implement localization in RN (in Expo).

My use case is a bit different: my app have list of hundrends of terms to translate (a js object of ~1MB each language, times 6-7 languages).

The app is totally offline (no chance to load the locale files from a server) so I'm searching the best way to lazy-loads the json/js locale object I want.

I'm here to take advices from RN/i18next experts possibly.

EDIT: I pretty much copied the i18n configuration of this https://github.com/i18next/react-i18next/blob/master/example/react-native-expo/js/i18n.js

The real databases are in the field data:DB. Obiouvsly that's not the best way to load heavy files, I always loads all the DB of all the languages..can I keep somehow the same simple structure but lazy-load just the language I need? Otherwise, there is an example of local lazy-load (from the device file system) in i18next and react-native?

import i18n from 'i18next';
import {reactI18nextModule} from 'react-i18next';
i18n
    .use(languageDetector)
    .use(reactI18nextModule)
    .init({
        fallbackLng: 'en',
        resources: {
            en: {
                home: {
                    title: 'Welcome',
                    introduction: 'This text comes from i18next and is provided in english.',
                },
                data: { DB:require("./locales/it.json") },
            },
            de: {
                home: {
                    title: 'Willkommen',
                    introduction: 'Dieser Text ist von i18next und ist in deutsch.',
                },
                data: { DB:require("./locales/de.json") },

            }
        },
        // have a common namespace used around the full app
        ns: ['common'],
        defaultNS: 'home',

        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react as it does escape per default to prevent xss!
        }
    });

Solution

  • With i18next it's rather simple to create a own backend implementation...https://www.i18next.com/misc/creating-own-plugins#backend

    I would suggest bundling your translations with the application and not loading from any external resource. You also can directly add translations on the fly using https://www.i18next.com/overview/api#resource-handling