Translate The App

In this section you will learn about how you can translate your app in your preferred language.

Embryo-ReactJS support multilingual feature which helps you to build your app in your native language. Read the documentation carefully and follow the steps. Embryo by default supports 2 languages, they are: English and French.

How To Set Default Locale

If you want to change your default locale then you can change it 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: {
        locale: 'en',          // locale code
        name: 'English',       // locale name
        icon: 'en'             // locale icon
    }
}
export default AppConfig;   

The template by default supports two locales i.e. English & French. You can check the languages in src->assets->data->localeData.js file. Copy the locale in which you want to convert your template and paste the locale in the AppConfig.js file.

localeData.js

/**
 * locales data
 */
export const languages = [
    {
        locale: 'en',
        name: 'English',
        icon: 'en',
    },
    {
        locale: 'fr',
        name: 'French',
        icon: 'fr',
    }
]

How To Add A New Locale

Here are the instructions to add a new locale in your app. We are taking an example of Greek that we are going to add.

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 = {
   "menu.Home": "Σπίτι",
   "menu.HomeOne": "κατάστημα",
   ...
}

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 localeData.js file under the src->assets->data directory.

localeData.js

/**
 * locales data
 */
export const languages = [
    {
        locale: 'en',
        name: 'English',
        icon: 'en',
    },
    {
        locale: 'fr',
        name: 'French',
        icon: 'fr',
    },
    {
        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.