---
updatedAt: 2025-09-24T21:30:37.000Z
agentTools:
  projectIndex: https://developers.transifex.com/llms.txt
---

# 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.

```javascript
tx.getLanguages(): Promise([
  {
    name: String,
    code: String,
    localized_name: String,
    rtl: Boolean
  },
  ...
])
```

Example

```javascript
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.

```javascript
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.

```javascript
tx.setCurrentLocale(localeCode): Promise
```

Example

```javascript
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.

```javascript
tx.getCurrentLocale(): String(localeCode)
```

Example

```javascript
console.log(tx.getCurrentLocale());
```

## Events API

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

```javascript
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

| Event                           | Description                                          | Callback                      |
| :------------------------------ | :--------------------------------------------------- | :---------------------------- |
| **FETCHING\_TRANSLATIONS**      | library started fetching translations from CDS       | `function(localeCode) { .. }` |
| **TRANSLATIONS\_FETCHED**       | translations were successfully fetched from CDS      | `function(localeCode) { .. }` |
| **TRANSLATIONS\_FETCH\_FAILED** | an error occurred fetching translations from CDS     | `function(localeCode) { .. }` |
| **LOCALE\_CHANGED**             | current language changed                             | `function(localeCode) { .. }` |
| **FETCHING\_LOCALES**           | library is fetching available locales from CDS       | `function() { .. }`           |
| **LOCALES\_FETCHED**            | available locales were successfully fetched from CDS | `function() { .. }`           |
| **LOCALES\_FETCH\_FAILED**      | an error occurred fetching locales from CDS          | `function() { .. }`           |

## 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:

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