What is i18n?

Learn the internationalization (i18n) concept.

What is i18n?

i18n is short for internationalization; it takes the first and last letter with 18 letters between. It means the app supports more than one language. The user picks a language; the UI switches to it. In React Native we do this with the i18next library.

Without i18n every string is hardcoded; adding a language means changing code. With i18n strings live in separate files; the code reaches them through keys like t('hello'). Adding a language is just adding a file. This lets the app work worldwide.

Keys and translations

In i18n every string is represented by a key. For example the 'greeting' key is 'Merhaba' in Turkish and 'Hello' in English. The code only knows the key; the translation comes from the active language.

The t('greeting') call looks at the active language and returns the right string. Keys should be short and meaningful: 'greeting', 'login.button', 'cart.total'. Grouping with dots keeps order in big projects. Translation files are locale files like tr.json, en.json; each carries all keys for one language.

Exercise Use the first translation key

Write a Text component. Its content is a t('title') call. The t function comes as a parameter to the component.

Show example solution

import React from 'react';
import { Text } from 'react-native';

function Title({ t }) {
  return (
    <Text>{t('title')}</Text>
  );
}

Test yourself

What is i18n short for?
```
t('hello')
```
- internationalization
- integration
- internet
- interpretation
Show answer

internationalization — i18n is short for internationalization.

The translation call

const text = ____('greeting');

Show answer

const text = t('greeting');

Match each piece to its role

i18n

Multi language
i18next

Library
t()

Returns a translation
tr.json

Turkish strings

Next lesson: i18next

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies