Make professional mobile apps with React Native and Typescript — Internationalization (Chapter 3 — Part 6)
Make your app supports multiple languages.
Supporting multiple languages is a common feature of applications. Normally when you target a wide range of users, you want to support the languages they desire. Or at least if the primary language of your app is not English, at least you also want to support English as well.
Even you don't plan to support multiple languages at first, make the right structure reduces a large amount of effort in the future. It also doesn't cost much now.
Continue with your code from the previous part. Otherwise, clone the repository.
git clone -b manage_data_rematch https://github.com/thinhtran3588/react-native-starter-kit.git
Install it first.
yarn add i18next react-i18next
Our app will support English & Vietnamese and has English as the default language.
Create a new file src/i18n.ts.
We create a function to initialize i18next here. Note that the debug flag is enabled when running debug and we get logs in the console. The resource is a big JSON object having 3 levels: the first level is the language, the second one is the namespace and the last is key-value pair.
Pro tip: The resource is divided into multiple json files. Each file represents a language for a screen except ‘common' represents common texts used in the app. It helps us manage them easier instead of using a big JSON object.
Go to src/assets/jsons. Create new files with the below structure:
Now we update src/core/models/settings.ts to store the current language we use and a reducer to update it.
Since i18n initialization takes time, we use an useEffect hook to call it and show a loading screen until it's done. The useTranslation hook takes a default namespace so we’re able to just use the key ‘weather' instead of ‘common:weather'. If we want to use a key that is not from the default namespace, we need to use the second way The t function translates the key to its corresponding value.
Now, we’ll create a new component in the Settings screen to manage the language.
Update src/core/components/index.ts to use RadioGroup & Radio components.
Go to src/modules/settings/screens/settings_screen. Create a new folder language. Inside it, create language.tsx & language.styles.ts.
Update settings_screen.tsx, dark_mode.tsx & settings_screen/components/index.ts
The last step is updating weather_item.tsx, weather_screen.tsx, & format_date.ts.
Now reload your app & enjoy the result.
Congratulations! That’s all we need to do in this part.
You can clone the sample here:
git clone -b internationalization https://github.com/thinhtran3588/react-native-starter-kit.git
Things you have learned in this part:
- implement internationalization with react-i18next