Setup with expo

[compojoom]

Hey 👋
I've spent more times on this than I'm comfortable admiting and I think it is time admit defeat andask for help.

I have followed the instructions. I've collected strings, prepared them, translated them into German. But the strings in my app are still shown in English. In the docs we have the app setup section: https://github.com/nkzw-tech/fbtee/?tab=readme-ov-file#app-setup

I've done the same:

import { getLocales } from 'expo-localization';
import { createLocaleContext } from 'fbtee';

// // Define available languages
const availableLanguages = new Map([
  ['en_US', 'English'],
  ['de_DE', 'Deutsch (German)'],
]);

const clientLocalesRN = getLocales().map(({ languageTag }) => languageTag);

const loadLocale = async (locale: string) => {
  console.log('loadLocale', locale);
  if (locale === 'de_DE') {
    return (await import('../../translations/de_DE.json')).default.de_DE;
  }

  return {};
};

export const LocaleContext = createLocaleContext({
  availableLanguages,
  clientLocales: clientLocalesRN,
  loadLocale,
});

I'm wrapping my whole _layout.tsx in the LocaleContext. Nothing. All I see in terminal is:

 WARN  Translations have not been provided.
 WARN  Translations have not been provided.
 WARN  Translations have not been provided.
 WARN  Translations have not been provided.

which corresponds to the output of this runtime test

fbtee/packages/fbtee/src/__tests__/fbt-runtime-test.tsx

Line 141 in ebd1778

'Translations have not been provided.',

my src/translations/de_DE.json looks like this right now:

{
  "de_DE": {
    "1ONu71": "Weiter",
    "2VPV74": {
      "*": "{number}+"
    },
    "1REuSN": {
      "*": "<{number}"
    },
    "3uo8du": "{previous items}; {following items}",
    "1UOVWD": "{previous items} • {following items}",
    "4DAMgG": "{previous items}, {following items}",
    "1C255": "{list of items}, and {last item}",
    "17bm9d": "{list of items} and {last item}",
    "phH4S": "{list of items}, or {last item}",
    "3q8AmB": "{list of items} or {last item}",
    "4zJcb": "{previous items}; {last item}",
    "1wKCx": "{list of items} • {last item}",
    "3Q0iaX": "{list of items}, {last item}"
  }
}

I'm looking for the text "Weiter", but it is sadly "Next" :)

I went a step further. I created a button to set a locale:

import { fbt, useLocaleContext } from 'fbtee';
....

const { setLocale } = useLocaleContext();

        <Button onPress={() => setLocale('de_DE')}>
          <Text>Set Locale to de_DE</Text>
        </Button>

nothing.

What I found out works is to provide a translations object with the loaded txs at runtime.

const translations = {
'de_DE': {
"1ONu71": "Weiter",
....
}
}
export const LocaleContext = createLocaleContext({
  availableLanguages,
  clientLocales: clientLocalesRN,
  loadLocale,
translations,
});

Why is this necessary? I thought that the whole purpose of the loadLocale was to dynamically load the tx when necessary, yet it is never triggered?(even when I manually call setLocale 🤷 )

[cpojer]

The expo-app-template comes with working locale switch functionality, see https://github.com/nkzw-tech/expo-app-template/blob/main/src/app/_layout.tsx

Just double checking, are you loading your compiled translations, or the input translations that were created by prepare-translations? In the app, you need to load the former, not the latter. Just mentioning it because you do ../../translations/de_DE.json, so maybe you are going one folder too far?

If you are setting the locale to de_DE on load and it is not the default locale, then it is expected that you will manually load it. loadLocale is not called for the initial locale. Please see #35 (comment) for the explanation.

We prefer leaving it up to the developer so they can avoid flashing the app in the default locale and then the translated locale, or parallelize loading of locales to speed up initial app load. However, I recognize this can be confusing so we might change the behavior in the future so that loadLocale is invoked on the initial load by default, with options to load locales on your own for a more optimized experience.

[compojoom]

../../ is correct in my case, because the LocalContext lives inside providers/LocalProvider. I'm loading the compiled translation.

Ok, I see. Thank you! I think I got it now. It was a bit tricky because you can't have top level await in React-Native. Here is the code I ended up with:

import { getLocales } from 'expo-localization';
import { createLocaleContext } from 'fbtee';
import { ReactNode, useState, useEffect, useMemo } from 'react';
import { selectLocale } from '../../store/settingsSlice';
import { useSelector } from 'react-redux';

// Define available languages
const availableLanguages = new Map([
  ['en_US', 'English'],
  ['de_DE', 'Deutsch (German)'],
  ['es_ES', 'Español (Spanish)'],
]);

const clientLocalesRN = getLocales().map(({ languageTag }) => languageTag);

const loadLocale = async (locale: string) => {
  if (locale === 'de_DE') {
    return (await import('../../translations/de_DE.json')).default.de_DE;
  }
  if (locale === 'es_ES') {
    return (await import('../../translations/es_ES.json')).default.es_ES;
  }

  return {};
};

export const LocaleContext = ({ children }: { children: ReactNode }) => {
  const userLocale = useSelector(selectLocale);
  const [translations, setTranslations] = useState<Record<string, any> | null>(
    null
  );

  useEffect(() => {
    const setupTranslations = async () => {
      const translations = await loadLocale(userLocale);
      setTranslations({
        [userLocale]: translations,
      });
    };
    setupTranslations();
  }, [userLocale]);

  const MyLocaleContext = useMemo(() => {
    if (translations === null) {
      return null;
    }
    return createLocaleContext({
      availableLanguages,
      clientLocales: [userLocale, ...clientLocalesRN],
      loadLocale,
      translations: translations,
    });
  }, [translations]);

  if (MyLocaleContext === null) {
    return null;
  }

  return <MyLocaleContext>{children}</MyLocaleContext>;
};

I switch the language through the redux store. When this happens the userLocale changes and the translations object changes with just the new locale. This in term triggers a new localeContext.

I think this is ok, or is there any other recommendation?

[cpojer]

Yes that is fine! React Native should really add top-level async. You can probably do something like a lazy React component that swaps itself with the real implementation after loading translations, which would be more idiomatic and less prone to race conditions.

Consider that in a small React Native app you are most likely shipping all code inside of your app and not downloading them remotely. So something more idiomatic like this:

import ja_JP from '../translations/ja_JP.json' with { type: 'json' };
// + other locales

const LocaleContext = createLocaleContext({
  availableLanguages,
  clientLocales,
  // We preload all the locales.
  loadLocale: () => Promise.resolve({}),
  translations: {
    ja_JP: ja_JP.ja_JP,
  },
});

is probably totally sufficient until your app has 10k components and 200 locales.

[compojoom]

My app helps kids(especially my daughter :))/students learn vocabulary. It let's them snap a photo of the words they need to learn, the app transforms them into "cards" and they can then practicy typing them or handwriting them. I think I got carried away and since AI is doing most of the work it supports 60+ languages. Not that I have that many translations yet... but why not :)

I thought a bit more about the "idiomatic" you described above. I don't have a lot of words inside my app, but still I think that the startup performance of the async loading will beat up me importing all locales at the begining.