i18n won't translate correctly when inside array or object in React Native

Question

I'm trying to use i18n-js to translate some strings into other languages. If I have my code in normal code, it works. Ex:

//Displays "Something" (no quotes) where I want it
<Text> translate("Something"); </Text>

But if I put it inside an array or object, then call it later, it stops working and shows a missing message instead of the text I want translated. Ex:

const messages = {
    something: translate("Something"),
    // other translations...
}

// later on
// Displays "[missing "en.Something" translation]" (no quotes) where I want it
<Text> messages.something </Text>

The following is my code for my translate function, as well as the config for i18n. I'm using lodash-memoize, but that is unrelated to the issue. I've already checked that the text being passed to i18n.t() is the same (including type) no matter if it's in normal code or in the array, but it still doesn't return the correct thing. I have some error checking written up to avoid getting the missing message on screen, but that still doesn't fix the issue that it can't find the translation.

export const translationGetters = ({
    en: () => require('./translations/en.json'),
    es: () => require('./translations/es.json')
});

export const translate = memoize(
  (key, config) => {
    text = i18n.t(key, config)
    return text
  },
  (key, config) => (config ? key + JSON.stringify(config) : key)
);

export const setI18nConfig = () => {
  // fallback if no available language fits
  const fallback = { languageTag: "en", isRTL: false };

  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

I have no idea where to go on this. Any advice would be appreciated!

I have same problem, Have you found the solution?

silvia zulinka
– silvia zulinka

2021-10-12 04:12:17 +00:00
Commented Oct 12, 2021 at 4:12 — silvia zulinka
– silvia zulinka, Commented Oct 12, 2021 at 4:12

Giovane de Loredo · Accepted Answer · 2022-10-13 18:22:26Z

1

Same problem here, workaround is to return array/object from inside a function:

Don't work

export const translations = [i18.t('path')]

Works

export function getTranslations() {
  const translations = [i18.t('path')]
  return translations
}

edited Oct 13, 2022 at 18:22

answered Oct 13, 2022 at 18:18

Giovane de Loredo

214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

i18n won't translate correctly when inside array or object in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related