Make professional mobile apps with React Native and Typescript — Internationalization (Chapter 3 — Part 6)

Make your app supports multiple languages.

Photo by Nareeta Martin on Unsplash

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

We will do it with react-i18next, “is a powerful internationalization framework for React / React Native which is based on i18next”.

Install it first.

yarn add i18next react-i18next

Update src/config/index.ts.

config/index.ts

Our app will support English & Vietnamese and has English as the default language.

Create a new file src/i18n.ts.

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:

jsons
  locales
    en
      common.json
      weather.json
      settings.json
    vi
      common.json
      weather.json
      settings.json

locales en

locale vi

Now we update src/core/models/settings.ts to store the current language we use and a reducer to update it.

models/settings.ts

Update src/app.tsx.

app.tsx

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.

components/index.ts

Go to src/modules/settings/screens/settings_screen. Create a new folder language. Inside it, create language.tsx & language.styles.ts.

language component

Update settings_screen.tsx, dark_mode.tsx & settings_screen/components/index.ts

settings screen

The last step is updating weather_item.tsx, weather_screen.tsx, & format_date.ts.

weather item

Now reload your app & enjoy the result.

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:

1. implement internationalization with react-i18next

Next: Animation.

Prev: Manage your data. Make Dark mode and theme your app.

Back to Introduction.