Appearance and Strings

Before You Start

Read the following guides before proceeding:

Guide	Why
React Native SDK	Surfaces, isolation model and flows

Overview

Every surface takes an appearance object and a strings object. The SDK ships no copy — your app supplies
every word the views draw. The card surfaces (Reveal, Collect, 3-D Secure) share one token map; the wallet
checkout takes CSS variables.

Card Surfaces

import type { WirexRevealAppearance, WirexThemeMode } from '@wirexapp/mobile-sdk';

export const themeMode: WirexThemeMode = 'dark';
export const appearance: WirexRevealAppearance = {
  colorText: '#FFFFFF', colorLabel: '#9AA0B5', colorFocus: '#5753EA', colorBackground: '#1B1E2B',
  fontFamily: 'Inter', fontSizeBase: 16, fontWeightBase: 'medium', borderRadius: 8, controlMinHeight: 44,
};

themeMode is a sibling prop on every card view: 'light' (default) or 'dark'. It selects the built-in
defaults that unset tokens fall back to. The SDK draws one token map; when your screen switches theme, pass
a different map.

Group	Tokens
Colours	`colorText`, `colorLabel`, `colorPlaceholder`, `colorError`, `colorFocus`, `colorBackground`, `colorBorder`, `surfaceColor`
Typography	`fontFamily`, `fontSizeBase`, `fontSizeLabel`, `lineHeightBase`, `lineHeightLabel`, `fontWeightBase`, `fontWeightLabel`
Geometry	`borderRadius`, `borderWidth`, `spacingUnit`, `paddingHorizontal`, `paddingVertical`, `spacingLabel`, `spacingError`, `iconSize`, `controlMinHeight`

Icons are any React Native image source:

Type	Keys
`WirexRevealIcons`	`copy`, `copied`
`WirexCollectIcons`	`Visa`, `MasterCard`
`WirexThreeDSIcons`	`close`

Strings

import type { WirexCollectStrings, WirexRevealStrings } from '@wirexapp/mobile-sdk';

export const revealStrings: WirexRevealStrings = {
  fieldLabels: { pan: 'Card number', cvv: 'CVV' },
  maskedSegmentGlyph: '*',
  copy: 'Copy',
  copied: 'Copied',
};

export const collectStrings: WirexCollectStrings = {
  labels: { number: 'Card number', expiry: 'Expiry', cvv: 'CVV' },
  errors: { '*': { incomplete: 'Required', invalid: 'Check this field' }, expiry: { expired: 'Card expired' } },
};

Type	Keys
`WirexRevealStrings`	`fieldLabels`, `maskedPlaceholder` (plain fields), `maskedSegmentGlyph` (every PIN cell while masked, default `'*'`), `copy`, `copied`
`WirexCollectStrings`	`labels`, `placeholders`, `errors` — per field, with `'*'` as the default for every field. Error keys: `incomplete`, `invalid`, `expired`
`WirexThreeDSStrings`	`title`, `close`, `loading`

Wallet Checkout

import type { WirexWalletAppearance, WirexWalletBranding, WirexWalletButtons } from '@wirexapp/mobile-sdk';

export const walletAppearance: WirexWalletAppearance = { theme: 'dark', variables: { '--wx-accent': '#5753EA' } };
export const walletButtons: WirexWalletButtons = {
  applePay: { style: 'black', type: 'top-up' },
  googlePay: { color: 'black', type: 'pay' },
};
export const walletBranding: WirexWalletBranding = { logo: 'hidden', processingDisclosure: { partnerName: 'Acme' } };

Prop	Description
`appearance`	`theme` and CSS `variables` passed to the checkout
`buttons`	Apple Pay `style` / `type`, Google Pay `color` / `type`
`branding`	`logo`: `'wirex'`, `'hidden'` or `'custom'` with a data-URI `logoImage`; `processingDisclosure`; a privacy URL
`strings`	Overrides the 11 labels of the checkout

Sizing

Native views cannot be sized from JavaScript. Apply the height each surface reports instead of hardcoding it:

Surface	Height source
Reveal row	`onNaturalHeight`
Collect form	Sizes itself from its content
Wallet checkout	`naturalHeight` event, `event.height`

A PIN row fills the row at controlMinHeight in a host box of exactly that height.