Issue with findBestAvailableLanguage

Bug

findBestAvailableLanguage is not falling to fallback language i.e. English when I change the language to Spanish.

Steps To Reproduce

Just like the example app, I’m using three languages English, French, and Arabic.

1. When I change the language to French it shows the French Text
2. Now, when I change the language to Spanish which is not supported and should fallback to English as a fallback, it remains French.

Environment info

"i18n-js": "^3.3.0",
"lodash.memoize": "^4.1.2",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-localize": "^1.1.3"

Describe what you expected to happen:

1. When I change the language to Spanish it should fallback to English language

Reproducible sample code

Find the repo here

[zoontek]

@vikrantnegi Thanks for the repo, it helps a lot! I just give it a try, and it worked as planned on my device (android 9). Which OS / version do you target?

Also, please note that the goal of findBestAvailableLanguage is to returns the best available translation here.

Given the following configs and English, French, and Arabic available translations:

👉 It will returns French, because Spanish translation isn’t available, but your user actually prefer French over English.

👉 It will returns English because it’s the first available translation in the list.

👉 It will returns undefined (so the retained value will be your fallback), because none of the user preferred languages are availables in your translations.

If you only want to check the first language in the list, a solution could be to use:

function checkFirstLanguageOrFallback(
  languageTags: string[],
): { languageTag: string, isRTL: boolean } | void {
  const { languageTag, languageCode, scriptCode, isRTL } = getLocales()[0];

  // languageTag format: en-US, zh-Hans-TW, etc.
  // (language code + script code if it exists + country code)
  if (languageTags.includes(languageTag)) {
    return { languageTag, isRTL };
  }

  // partialCode format: en, zh-Hans, etc.
  // (language code + script code if it exists)
  const partialCode = languageCode + (scriptCode ? `-${scriptCode}` : "");

  if (languageTags.includes(partialCode)) {
    return { languageTag: partialCode, isRTL };
  }

  // languageCode format: en, zh, etc.
  if (languageTags.includes(languageCode)) {
    return { languageTag: languageCode, isRTL };
  }
}

But I will not recommand it, it’s not how iOS and Android pick native app translations.

[zoontek]

@vikrantnegi That’s a good idea. I updated the README to add a warning about it: https://github.com/react-native-community/react-native-localize/tree/1.1.4#findbestavailablelanguage