Implement library to get texts

If you haven’t already, check out our contributing guidelines for onboarding!

---

We are implementing the structure for internationalisation and localisation.

As part of that, we need to implement a library to get texts. We will pass it a translation key, a locale and optionally an object with variables and it will return the correct text to use.

Let’s first add some clarity on what each language file will look like. By default, we will only have the en file (which will be the one used by default when no translation is found). Let’s use the file src/languages/en.js as an example, it would look something like this and would just export that object:

{
	localizationConfig: {
	phoneCountryCode: ‘1’,
}
	signOut: “Sign Out”,
	chatSwitcher: {
		searchInput: “Find or start a chat”
	}
	IOUReport: {
		oweRow: ({payerName, payeeName, amount, currency}) => `${payerName} owes` + currency(‘en’, amount, currency, 2) + `to ${payeeName}`;
	}
}

There will be a main language file called translations.js, which will import each of the existing defined language files into one big object and export that. This is what will be used by the library to get the texts.

This library will only export one method translate(locale, key,variables = {}) and it will:

1. Lookup that key in the translations object:

• Try to find it using the full locale
• Try to find it using the language part of the locale only (ie: the first part of the locale. For es-ES will get es)
• If the language requested is not en, then log an alert to the server (so we know we are missing a translation) and then try to find it using the default language en.
• In dev throw if the key does not exist and in production would use the key name and log an alert to the server.

1. So now we found the key and see the value, if it is a string, it will return it as is. If the value is a function, it will call the function, passing the variables to it as a parameter (JS-Lib’s Str.result does this)

Please include JUnit tests for the added methods.

Apply on Upwork: https://www.upwork.com/jobs/~019d8c473a29e6f464 https://github.com/Expensify/Expensify/issues/151944

[iwiznia]

Yes, you can use this

[iwiznia]

I’m assuming key parameter will be a string. I have a question here. For nested values how are we going to pass the key? In the translation example, are we going to pass chatSwitcher.searchInput as key parameter to get translation for searchInput?

@tugbadogan great question! The key should be either a string like "chatSwitcher.searchInput" OR an array like ["chatSwitcher", "textInput"]. Both should work.

@tugbadogan also, keep in mind this, which I don’t see in your proposal:

If the language requested is not en, then log an alert to the server (so we know we are missing a translation) and then try to find it using the default language en. In dev throw if the key does not exist and in production would use the key name and log an alert to the server.

---

Shouldn’t we use the locale automatically based on the browser locale and optionally pass the locale? So that the new syntax be like translate(key, locale?, variables?). As we have to pass the locale while calling it and we would get the locale from the language settings. so we can just set the language setting in Onyx store and use it in the translate function.

@parasharrajat, no, that will be handled at a higher level, this library is not tasked to detect the browser’s locale.