How to use i18next Localisation in React-Native & Expo

Localisation

Localisation is very important for many applications and many development projects right now. Nearly every project is created has option to select more than one language. Also in the mobile applications developers try to give users best user experience with multiple language options.

You can define your own json and create as many translations you want to use in your application. So how to start using them in react-native or react native applications?

Setup

Install i18next to your application

# npm
npm install i18next — save
npm install react-i18next --save
# yarn
yarn add i18next
yarn add react-i18next

After you create your applications create i18n.js file.

Here is how your i18n.js file looks.

After all these installations you can start using the translations in your components and files.

In your app.js import the i18n.js file as below

import ‘./i18n’;

Then when you export your Components or classes you should use

withNameSpaces()(ComponentName)

Usage

After all the setup process your internalisation ready to use!

const {t} = this.props;
{t(‘foo’)}

When your application language is English that will give you the “en” version of foo value.

// or: using a function to return namespaces based on props
export default withNamespaces((props) => props.namespaces)(TranslatableView);

Happy Coding!

Thank you for reading this far. If you enjoyed this post, please share, comment, and press that 👏 a few times (up to 50 times). . . Maybe it will help someone.

Follow me on Medium or Github if you’re interested in more in-depth and informative write-ups like these in the future. 😀

Melih