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

# Translate The App(Multi Language Support)

**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.

{% code title="AppConfig.js" %}
```javascript
/**
 * 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;
```
{% endcode %}

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.

{% code title="" %}
```javascript
languages: [
	// English
	{
		languageId: 'english',
		locale: 'en',
		name: 'English',
		icon: 'en',
	},
	...
	// Hungarian
	{
		languageId: 'hungarian',
		locale: 'hu',
		name: 'Hungarian',
		icon: 'hu',
	}
]
```
{% endcode %}

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

### 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.

{% code title="el_EL.js" %}
```javascript
module.exports = {
	"sidebar.general": "γενικός",
	"sidebar.horizontal": "οριζόντια"
}
```
{% endcode %}

**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.,

{% code title="el_EL.js" %}
```javascript
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;
```
{% endcode %}

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

{% code title="index.js" %}
```javascript
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;

```
{% endcode %}

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

{% code title="settings.js" %}
```javascript
/**
 * 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',
		}
	]
}

```
{% endcode %}

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](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/translate-the-app#how-to-set-default-locale) to set it as your default locale.
