React-i18next fails to load translations only on iOS

Question

I am running a React native app with react-i18next and the backend addon. The app works and loads translations perfectly well on Android and Web, but on iOS it fails to load the translations at all.

When i18n is initializing it gives the following error. I am not certain whether the illegal operation error is the cause, but it seems pretty likely.

i18next::backendConnector: loading namespace translation for language en failed, [TypeError: Network request failed]

. . .

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:614:3)
    at tryReadSync (fs.js:383:20)
    at Object.readFileSync (fs.js:420:19)

Is there a configuration somewhere for react-native to let iOS read from the public folder?

My i18n.js:

import * as Localization from 'expo-localization'
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next'

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    debug: true,
    fallbackLng: 'en-US',
    interpolation: { escapeValue: false },
  })

i18n.changeLanguage(Localization.locale)

export default i18n

and my translation file, located at public/locales/en-US/translation.json

{
  "outOfStock": "Out of Stock"
}

Answer 1

I suspect expo, like react-native is not hosting the translations so they could be fetched via i18next-http-backend. So I would suggest you load the translations without i18next-http-backend. As resources on init: https://www.i18next.com/how-to/add-or-load-translations#add-on-init or with the help of i18next-resources-to-backend: https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations