Which Library Should You Choose?

It is true that any translation library that works for React will also do the trick for React Native. There are about 5 or 6 main options that you could choose from, but after counting up the pros and cons of each one, we decided to go with i18next.

i18next is a free library that offers a quick “getting started” routine, as well as some nice plug-n-play features that you might find useful and opt for later.

Let’s get started!

1. Install i18next

npm install i18next --save

2. Create empty translation file for English

Create a file and put it in a folder that works best for you (e.g. /translations/en.tsx), where you will later add translation files for all your supported languages. It should, for now, look something like this:

const translation = {};
export default translation;

3. Initialize the library and supply it with the file you just created

Add this code somewhere at the top of your root component:

import i18n from 'i18next';
  import { initReactI18next } from 'react-i18next';

  import en from './translation/en';
  i18n
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    resources: {
      en: {
        translation: en,
      },
    },
  });

The initialization is pretty straightforward, but can take in quite a few configuration options based on your needs. You can see all of them here.

But right now, we can already go ahead and try it out:

import i18next from 'i18next';

  render() {
    return (
      <Text>{i18next.t('Hello world!')}</Text>
    )
  }

#javascript #react-native #localization