What is i18n?
- React Native course
- Expert
- Lesson 31/47
- 5 min
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.
Practice 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.
Starter code
import React from 'react';
import { Text } from 'react-native';
function Title({ t }) {
return (
// call t for translation
<Text>Static text</Text>
);
}Sample solution
import React from 'react';
import { Text } from 'react-native';
function Title({ t }) {
return (
<Text>{t('title')}</Text>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is i18n short for?
t('hello')- internationalization Correct answer
- integration
- internet
- interpretation
Explanation: i18n is short for internationalization.
2 The translation call
const text = ____('greeting');const text = t('greeting');Explanation: The t function returns a translation.
3 Match each piece to its role
| Term | Meaning |
|---|---|
i18n |
Multi language |
i18next |
Library |
t() |
Returns a translation |
tr.json |
Turkish strings |