React Native Dev Mode not loading translations

[jwtong]

[RecordFetchError: Tolgee: Failed to fetch record for "en"]

const tolgee = Tolgee()
  .use(
    BackendFetch({
      prefix: 'https://cdn.tolg.ee/825f5cca797b796b954bb14ff79aef7f',
    })
  )
  .use(DevTools())
  .use(FormatIcu())
  .init({
    language: 'en',
    // @ts-ignore
    apiUrl: process.env.EXPO_PUBLIC_TOLGEE_API_URL,
    // @ts-ignore
    apiKey: process.env.EXPO_PUBLIC_TOLGEE_API_KEY,
    staticData: { en, cs, fr, de },
  });

My config is as follows, and I have a project setup in the backend cloud, but regardless of using my actual project or demo project, I'm getting the RecordFetchError error. I'm noticing from the expo debugger that there is not even a network request to https://app.tolgee.io.

https://app.tolgee.io/v2/projects/15115/translations/es - fetching direct to this endpoint works fine with x-api-key in header

[JanCizmar]

Hey!

Thanks for creating the issue. It has to go to the Tolgee JS repo, so I am transferring it.

Anyway, can you please provide exact steps to reproduce including some example app, so we can try it ourselves?

Thanks!

[jwtong]

1. clone https://github.com/tolgee/react-native-example
2. npm install
3. Set EXPO_PUBLIC_TOLGEE_API_KEY and EXPO_PUBLIC_TOLGEE_API_URL inside of index.tsx
4. Optionally, you can comment out

.use(
    BackendFetch({
      prefix: 'https://cdn.tolg.ee/825f5cca797b796b954bb14ff79aef7f',
    })
  )

to ensure the build runs on ios

5. npm run ios
6. See that on any given page, the warning pops up with the error described above

[JanCizmar]

Thanks a lot! We will look into that!

[jelgersma]

For me I had to override the functions in my react native expo env. Basically copied the function createDevBackend() function (and copied the related methods it uses such as createUrl) and replace the path with fetch with my axios client. I think the emulators block calls that have x-api-key etc in it. Also change the the part const base = typeof window === 'undefined' ? undefined : window.location.origin; in the createUrl func to const base = typeof window === 'undefined' ? undefined : window.location?.origin;. For me window is defined but location doesn't exist so it just crashes on that part.

After changing those two parts it works.

Edit: Axios isnt necessarily needed. You can also change the fetch to include credentials: 'include',