Adding a new language
Mainly the demo app supports two languages: English and Arabic (RTL). You can add more languages by adding the translation files in the
src/translations folder and adding the language code to the
Using translations in your app
The i18n core module provides a set of utility functions to help you use translation in your app.
react-i18next: to get the translation function.
Text component comes with translation support, you can easily use it as follows:
useSetLanguagehook: to change the current language. This hook returns the selected language and a function to change the language.
useSetLanguage hook will save the selected language in device storage using
MMKV and will be used as the default language when the app is opened again As well as adding some extra config for RTL languages while updating the selected language.
To make the translation for your app more robust and easy to maintain, we have added TypeScript support for the translation function. This ensures that you are using the correct translation key and provide auto-completion for the translation keys. Here is an example of the error you will get if you are using the wrong translation key.
We have also added ESLint rules to ensure that your translation file resources are always up to date. These rules will run as a pre-commit hook whenever you attempt to commit changes to the translation files.
We utilize eslint-plugin-i18n-json alongside a customized validation script for i18next. This script helps sort keys, ensures that all resource files are identical and prevents any missing translations.