I18n for multiple language in any hybrid app

Question

I am new in a react native developer. with support to multi-languages like English, Chinese what are you suggest to me?

Answer 1

the best way of making your application multilingual is using I18n package. I've used this package in multiple projects.

it's so much easy to get started with it.

first install the package:

npm i react-native-i18n --save

make a "translation" folder in your project.

make a .json file for your desired language, which will look like below (I named this file per.json):

{
  "discountCode":"کد تخفیف",
  "validUntil":"معتبر تا",
  "days":"روز",
  "copy":"کپی"
}

make an i18n.js file in translation folder and write your config file. mine is:

import I18n from 'react-native-i18n';
import Persian from './per.json'

I18n.locale="per"

I18n.translations={
   'per': Persian
}

export default I18n;

then in your project, you should use your translations like below:

import I18n from './translation/i18n'

<Text style={styles.myTextStyle}>{I18n.t("discountCode")}</Text>

hope this simple guide help you build your multilingual application.

if you had any questions, feel free to ask.

Answer 2

Project react-native-i18n is deprecated now. Read this article Internationalization in React Native which doesn't required any linking or any configuration except for this little configuration.

import i18n from 'i18n-js';

import en from './locales/en.json';
import de from './locales/de.json';

i18n.defaultLocale = 'en';
i18n.locale = 'en';
i18n.fallbacks = true;
i18n.translations = { en, de };

export default i18n;

To display internationalized information on the page we can use i18n.t() function by passing a translation key as an argument. e.g. i18n.t("home.welcome")