i18next
- React Native course
- Expert
- Lesson 32/47
- 5 min
Learn the i18next library.
The i18next library
i18next is the most common i18n library for React Native. The i18next core and the react-i18next binder are used together. The core handles language management; the binder integrates with React.
Install: npm install i18next react-i18next. Then you initialize with i18next.init(). This call takes translation files and a default language. react-i18next also provides the useTranslation hook; this hook gives the t function inside components. This way each component calls its own translation; no prop drilling needed.
The init configuration
i18next.init() takes a config object. Core fields: resources (translation files), lng (default language), fallbackLng (fallback when a translation is missing).
Example: i18next.init({ resources: { en: { translation: { hello: 'Hello' } } }, lng: 'en', fallbackLng: 'en' }). Here resources carries the translation table for each language. lng picks the language used at launch. fallbackLng says which language to fall back to when a key is not translated. These three fields are the base of the i18n setup.
Practice Initialize i18next
Write an i18next.init() call. The resources field has an en language with a translation section carrying hello: 'Hello'. Set lng and fallbackLng to 'en'.
Starter code
import i18next from 'i18next';
// Add the i18next.init call hereSample solution
import i18next from 'i18next';
i18next.init({
resources: {
en: { translation: { hello: 'Hello' } }
},
lng: 'en',
fallbackLng: 'en'
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 i18next initialization
i18next.____(config);i18next.init(config);Explanation: answer: init. It takes the config object.
2 What does fallbackLng do?
fallbackLng: 'en'- Package name
- Default font
- Screen color
- Fallback when a translation is missing Correct answer
Explanation: fallbackLng is the language used when a key is not found.
3 Match each field to its role
| Term | Meaning |
|---|---|
resources |
Translation table |
lng |
Default language |
fallbackLng |
Backup language |
init |
Init method |