Localization

Localization

• Localizing Text
  • Authentication Component
  • SignIn Component
  • SignUp Component
  • Cards Component
  • Settings Component
  • General Translations
• Setting Default Country
• Setting Country Options

Localizing Text

For text localization we do not use country codes internally in rn-memento-sdk, instead we allow you to completely customize the text in each component:

Authentication Component

For the translation hierarchy as well as the default values for the <Authentication> component, see:

See the full Authentication translation object

Example:

By default, the landing screen will say

"Sign up or log in to Memento"

You will probably want to change that to specify your app's name. With Memento you can easily change this:

JSX

<Authentication
  name={RouteNames.AUTHENTICATION}
  config={{
    translation: {
      LANDING: {
        // Customize the Welcome text
        WELCOME: 'Sign up or log in to MyBankingApp',

        // ...
      },
    },
  }}
/>

SignIn Component

For the translation hierarchy as well as the default values for the <SignIn> component, see:

See the full SignIn translation object

Example:

JSX

<SignIn
  name={RouteNames.SIGN_IN}
  config={{
    translation: {
      SIGN_IN: {
        SMS_CODE: {
          TITLE:
            'Almost logged in! Please enter the code we sent to your phone',
        },

        // ...
      },
    },
  }}
/>

SignUp Component

For the translation hierarchy as well as the default values for the <SignUp> component, see:

See the full SignUp translation object

Example:

JSX

<SignUp
  name={RouteNames.SIGN_UP}
  config={{
    translation: {
      SIGN_UP: {
        SMS_CODE: {
          TITLE: 'Please enter the code we sent to your phone',
        },

        // ...
      },
    },
  }}
/>

Cards Component

For the translation hierarchy as well as the default values for the <Cards> component, see:

See the full Cards translation object

Example:

JSX

<Cards
  name={RouteNames.CARDS}
  config={{
    translation: {
      CARDS: {
        TITLE: 'My Custom Card',
        AVAILABLE_BALANCE: 'My Available balance',

        // ...
      },
    },
  }}
/>

Settings Component

For the translation hierarchy as well as the default values for the <Settings> component see:

See the full Settings translation object

Example:

JSX

<Settings
  config={{
    translation: {
      SETTINGS: {
        HOME: {
          TITLE: 'My Settings',
        },
      },
    },
  }}
>
  {/*...*/}
</Settings>

General Translations

Memento SDK also has text that is not screen-specific. To change these, you can use the <MementoContainer> translation config.

For the translation hierarchy as well as the default values for the <MementoContainer> component, see:

See the full MementoContainer translation object

Example:

JSX

<MementoContainer
  // ...
  config={{
    translation: {
      ERROR: {
        TOKEN_EXPIRED:
          'Oh no! You are no longer logged in. Please log in will you.',
      },
    },
    // ...
  }}
>
  {/*...*/}
</MementoContainer>

Setting Default Country

NOTE: You will have to restart the app for this change to take effect

JSX

<MementoContainer
  // ...
  config={{
    initialCountry: 'CA', // ISO-2 country code (Canada)
  }}
>
  {/*...*/}
</MementoContainer>

Setting Country Options

By default, all countries will be available in the country selection dropdowns. You can then use the chosenCountries configuration to limit that list to only include countries you support.

NOTE: You will have to restart the app for this change to take effect

JSX

<MementoContainer
  // ...
  config={{
    initialCountry: 'CA', // ! This country must be included in "chosenCountries" !
    chosenCountries: ['IS', 'US', 'CA'], // ISO-2 country codes (Iceland, USA, Canada)
  }}
>
  {/*...*/}
</MementoContainer>