Translation files
- React Native course
- Expert
- Lesson 33/47
- 5 min
Learn translation JSON files.
Translation files
Translation files are one JSON file per language. tr.json holds Turkish, en.json holds English. Each file has the same key structure; only values differ.
Example tr.json: { "hello": "Merhaba", "bye": "Hoşça kal" }. Example en.json: { "hello": "Hello", "bye": "Goodbye" }. Keys are the same; values change by language. Files live in a folder like ./locales/. Nesting is allowed: { "cart": { "total": "Total" } }. This keeps order in big projects.
Nested keys
In big projects keys are nested. For example { "cart": { "total": "Total", "empty": "Cart is empty" } }. This groups all cart strings in one object.
Access: t('cart.total'), t('cart.empty'). The dot walks the nested levels. This method keeps order as the key count grows. For example 'cart.total' and 'profile.name' are in separate groups; collision risk drops. The file structure must stay consistent across the project; a key is defined once.
Practice Write a translation file
Write the content of an en.json. The root object has a "greeting" key with value "Hello" and a "farewell" key with value "Goodbye".
Starter code
{
// add translation keys here
}Sample solution
{
"greeting": "Hello",
"farewell": "Goodbye"
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each file to its language
| Term | Meaning |
|---|---|
tr.json |
Turkish |
en.json |
English |
fr.json |
French |
de.json |
German |
2 Nested key access
t('____.total');t('cart.total');Explanation: cart.total is a nested access.
3 How is a nested key accessed?
t(?)- With a dot: 'cart.total' Correct answer
- With a slash: 'cart/total'
- With an arrow: 'cart->total'
- With an underscore: 'cart_total'
Explanation: The dot walks the nested levels.