React-i18next: Question about resource loading in react-native

[tankpower1]

Hello, how can i load a resource from my project, for example:

Translations are in assets/langs/en/translations.json and my code is:

i18n .use(i18backend) .use(initReactI18next) .init({ lng: 'en', fallbackLng: 'en', resources: {}, preload: ['en'], react: { useSuspense: false }, backend: { loadPath: '../assets/{{lng}}/{{ns}}.json' } });

Should i use the backend plugin for local loading or add them manually?

[jamuhl]

Did you already read: https://www.i18next.com/how-to/add-or-load-translations ?

[tankpower1]

Yea i was wondering if there's a way to read from the filesystem and load all the languages at once because i have multiple languages with about 6-7 namespaces and its a pain to add them manually :/.

[jamuhl]

as react-native does not use webpack there is no context you could use to get all files in a folder...so...no...there is no magic to import files

[LaVielle]

@tankpower1 In my experience, it's best to add all translations at once when calling init.

In my project (2, languages, ~25 namespaces/language, ~500 strings/language) I saw no drawbacks to adding all this on init i18n.init({resources: allMyTranslations, ...otherOptions})
I see only benefits because now I don't need to manually add resources when i need them in components, which was super messy.

So to answer your initial question, I'd say export your translations, import then in your i18n file, and then init resources with this. No need for backend solution if you're just loading local strings.

@jamuhl Not sure if my way is best practice though cause the docs don't explicitly say to init this way.

[jamuhl]

@LaVielle depends...if initial bundlesize is a lot larger because all the translations got bundled (even all languages) that might have a significant impact on loading time -> not relevant for react-native - but for sure in web

[Nxtra]

@tankpower1 In my experience, it's best to add all translations at once when calling init.

In my project (2, languages, ~25 namespaces/language, ~500 strings/language) I saw no drawbacks to adding all this on init i18n.init({resources: allMyTranslations, ...otherOptions})
I see only benefits because now I don't need to manually add resources when i need them in components, which was super messy.

So to answer your initial question, I'd say export your translations, import then in your i18n file, and then init resources with this. No need for backend solution if you're just loading local strings.

@jamuhl Not sure if my way is best practice though cause the docs don't explicitly say to init this way.

Hi @LaVielle ,

Can you share the structure of the "allMyTranslations" object. How did you configure that?