Display translated content

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);

🚧

Notice

The tx.setCurrentLocale() is a promise based function. Make sure you await for this function to load before displaying the UI.

Get current translation language

Returns the currently selected language code.

tx.getCurrentLocale(): String(localeCode)

Example

console.log(tx.getCurrentLocale());

Events API

You can use the events API to globally listen for various changes in the language state.

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

Displaying translated strings from a Database

The only issue with using a variable instead of a string literal as the argument to the t-function is that the CLI tool (for pushing source strings) will not be able to extract a string from it. However, when the application runs, the t-function does not know if its argument originated from a variable or a string literal. It will look into its cache and, if a translation is available, it will use it.This means that, although Tx Native cannot directly extract source content from a database, it can translate them if the source-translation pair is somehow in its cache. So, if you write a script to go through the database and push the source strings via the API, then the application can use the t-function to display the translations.

To handle strings that exist in DBs, you can use some code like the following example:

string = value_from_database();
print(t(string));