Localisation

Gravity Native supports client-side localisation with the i18n-js package. The section explains how to translate the native UI.

Refer to the server-side localization section to learn how to translate the server-side code.

Locale Files

Locale files are stored inside the /locales folder, and each language has its own folder of .json files. The locales are split to match the same structure as the views.

All .json files inside each locale folder are imported and combined inside the index.js file inside each locale folder. You need to import all of your individual locale files into the index file.

/locales
  /en
    en_dashboard.json
    en_nav.json
  /es
    es_dashboard.json
    es_nav.json

The locale files are simple JSON files containing the strings. The keys are always the same (in English) as these are referenced in the code. The string changes depending on the language.

{
  "title": "Dashboard",
  "message": {
      "title": "Welcome to Gravity!",
      "text": "This is a sample dashboard to get you started. Please read the documentation to learn how to build your own features."
},
{
  "title": "Tablero de Control",
  "message": {
    "title": "¡Bienvenido a Gravity!",
    "text": "Este es un tablero de muestra para comenzar. Por favor, lea la documentación para aprender a construir sus propias características."
},

Adding More Locales

Pro tip – ask ChatGPT to translate the JSON files to new languages.

1. Create a new folder inside the /locales file with the local name eg. /fr and add your JSON files.

2. Import the new locale file into the index.js file

3. Import the locale to app.js and add it to I18n config object.

// locales
import en from '~/locales/en/index';
import es from '~/locales/es/index';
export const i18n = new I18n({ en, es });

Performing Translations

Translations can be performed by importing the i18n package and using the t function.

import { i18n } from 'components/lib'
import Style from './style.js';

export function Card(props){

return (  
  <div>
  
    <div className={ Style.title }>
     { i18n.t('account.card.title') }
    </div>
    
 </div>
}

Switching Languages

There is a language switcher component in the drawer nav for changing the language. You can add more languages to the dropdown in /components/locale.