Localization
Localization
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:
<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:
<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:
<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:
<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:
<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:
<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
<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
<MementoContainer
// ...
config={{
initialCountry: 'CA', // ! This country must be included in "chosenCountries" !
chosenCountries: ['IS', 'US', 'CA'], // ISO-2 country codes (Iceland, USA, Canada)
}}
>
{/*...*/}
</MementoContainer>
Updated almost 2 years ago