Display translated content
Outdated article
All developer documentation has moved to Transifex Developer Hub. Read this article here.
Transifex Native will automatically display content in the language currently selected in your application.
In order to allow changing the current language, you will need to implement a language picker in your code. You can use the Transifex Native JS API to build that and add the related logic.
Languages API
Fetches list of project languages from CDS, useful for creating a language picker.
tx.getLanguages(): Promise([
{
name: String,
code: String,
localized_name: String,
rtl: Boolean
},
...
])
Example
import { tx } from '@transifex/native';
tx.getLanguages()
.then(languages => {
console.log(languages);
// [{
// name: 'Greek',
// code: 'el',
// localized_name: 'Ελληνικά',
// rtl: false,
// }, {
// ...
// }]
})
.catch(console.log);
Get a list of available locales based on CDS.
tx.getLocales(): Promise(['code', 'code',...])
Language State API
Set current translation language
Fetches translations from the CDS and stores them in cache. When the promise returns, all content will be translated to that language.
tx.setCurrentLocale(localeCode): Promise
Example
tx.setCurrentLocale('el')
.then(() => console.log('content loaded'))
.catch(console.log);
tx.getCurrentLocale(): String(localeCode)
Example
console.log(tx.getCurrentLocale());
import { tx, onEvent, offEvent, sendEvent } from '@transifex/native';
import { LOCALE_CHANGED } from '@transifex/native';
// create an event handler
function handleLanguageChanged() {
// Current language was changed
console.log(tx.getCurrentLocale());
}
// register handler to a specific event
onEvent(LOCALE_CHANGED, handleLanguageChanged);
// remove handler from a specific event
offEvent(LOCALE_CHANGED, handleLanguageChanged);
// manually trigger a custom event with a payload
sendEvent("my_custom_event", { foo: "bar" });
Event types
- FETCHING_TRANSLATIONS, library started fetching translations from CDS
- Callback: function(localeCode) { .. }
- TRANSLATIONS_FETCHED, translations were successfully fetched from CDS
- Callback: function(localeCode) { .. }
- Callback: function(localeCode) { .. }
- TRANSLATIONS_FETCH_FAILED, an error occurred fetching translations from CDS
- Callback: function(localeCode) { .. }
- Callback: function(localeCode) { .. }
- LOCALE_CHANGED, current language changed
- Callback: function(localeCode) { .. }
- Callback: function(localeCode) { .. }
- FETCHING_LOCALES, library is fetching available locales from CDS
- Callback: function() { .. }
- Callback: function() { .. }
- LOCALES_FETCHED, available locales were successfully fetched from CDS
- Callback: function() { .. }
- Callback: function() { .. }
- LOCALES_FETCH_FAILED, an error occurred fetching locales from CDS
- Callback: function() { .. }
- Callback: function() { .. }