Translate The App(Multi Language Support)

In this section, you will get detailed documentation to learn about how you can translate your app in your preferred language.

Reactify support multilingual feature which helps you to build your app in your native language. Read the documentation below carefully and follow the given steps.

How To Set Default Locale

Reactify provide you the options to change the default locale of the template according to your native language. You can change the locale in the AppConfig.js file. You can find the AppConfig.js file in the src->constants folder.

AppConfig.js

/**
 * App Config File
 */
const AppConfig = {
  ...,
  // set default locale 
  locale: {
    languageId: 'english', // language id
    locale: 'en',          // locale code
    name: 'English',       // locale name
    icon: 'en'             // locale icon
  }
}

export default AppConfig;

You can find the details about the other supported languages & their locales in the src->reducers->settings.js file under the languages array. Just select the locale in which you want to convert your template and pass this value in the above file.

languages: [
	// English
	{
		languageId: 'english',
		locale: 'en',
		name: 'English',
		icon: 'en',
	},
	...
	// Hungarian
	{
		languageId: 'hungarian',
		locale: 'hu',
		name: 'Hungarian',
		icon: 'hu',
	}
]

Reactify provides supports to 12 languages(built-in), They are: English, Chinese, Russian, Hebrew, French, Arabic, German, Spanish, Japanese, Korean, Italian and Hungarian.

How To Add A New Locale

Here are the instructions to add a new locale in your app. We have taken an example of adding Greek language to the template.

Step 1: Create a file with the name of locale code inside the src->lang->locales directory and define the static strings which you want to translate into Greek, you can check the other locale files to check how strings are defined.

el_EL.js

module.exports = {
	"sidebar.general": "γενικός",
	"sidebar.horizontal": "οριζόντια"
}

Step 2: Create a file with the name of locale code inside the src->lang->entries directory and follow the same steps as in other files e.g.,

el_EL.js

import appLocaleData from 'react-intl/locale-data/el';
import elMessages from '../locales/el_EL';

const elLang = {
    messages: {
        ...elMessages
    },
    locale: 'el-EL',
    data: appLocaleData
};
export default elLang;

Step 3: Open index.js file under the src->lang directory and follow the steps given below in the code block.

index.js

import { addLocaleData } from 'react-intl';
import enLang from './entries/en-US';
...
import elLang from './entries/el_EL'; // Import the locale here

const AppLocale = {
    ...,
    el: elLang
};

...
addLocaleData(AppLocale.el.data);

export default AppLocale;

Step 4: Now you need to add your locale inside the settings.js file under the src->reducers directory.

settings.js

/**
 * App Settings Reducers
 */
 ...
 
 /**
 * initial app settings
 */
const INIT_STATE = {
  ...,
  languages: [
		{
			languageId: 'english',
			locale: 'en',
			name: 'English',
			icon: 'en',
		},
		...
		// your new locale will goes here
		{
			languageId: 'greek',
			locale: 'el',
			name: 'Greek',
			icon: 'el',
		}
	]
}

That's it, Now you are done with adding a new locale to the template. If you want this newly added locale as your default then you can follow the steps given in the above section How To Set Default Locale to set it as your default locale.