Build an Expense Manager App with React Native – Part 4

Adding localization

I’ve tried multiple localization libraries for React Native but finally settled for i18next.

Add the dependency:

To keep things simple, all translations will be in the same folder. In a bigger app, it is recommended to keep component specific translations alongside the component, that way it is easier to clean up if you decide to delete a component, reuse it in another project, etc.

Create a file i18n/index.js:

Create a json file for each supported language. e.g.:

finally call the i18n initialization in your App.js:

To translate a string in a component, import i18n then call i18next.t:

Get current system locale and wiring it

We will use RN NativeModules to get the current device locale, in i18n/index.js, add: (source https://jonrh.is/react-native-locale-strings/)