Overview

The ReadyRemitAppearance type allows you to fully customize the SDK's visual theme. It uses a JSON structure with two main sections:

foundations: Core design tokens (colors, font family)
components: Component-specific configurations (buttons, inputs, loading, content)

All properties are optional — the SDK uses sensible defaults for any missing values.

Definition

export type ReadyRemitAppearance = {
  foundations?: ReadyRemitFoundations;
  components?: ReadyRemitComponents;
};

Foundations

Core design tokens used throughout the SDK.

export type ReadyRemitFoundations = {
  colorPrimary?: ReadyRemitColorValue;
  colorTextPrimary?: ReadyRemitColorValue;
  colorTextSecondary?: ReadyRemitColorValue;
  colorTextLink?: ReadyRemitColorValue;
  colorForeground?: ReadyRemitColorValue;
  colorBackground?: ReadyRemitColorValue;
  colorDivider?: ReadyRemitColorValue;
  colorSuccess?: ReadyRemitColorValue;
  colorWarning?: ReadyRemitColorValue;
  colorDanger?: ReadyRemitColorValue;
  fontFamily?: ReadyRemitFontFamily;
};

export type ReadyRemitColorValue = {
  light: string;  // Hex color for light mode (e.g., '#FFFFFF')
  dark: string;   // Hex color for dark mode (e.g., '#000000')
};

export type ReadyRemitFontFamily = 'inter' | 'roboto' | 'source sans 3' | 'sf pro';

Foundation Properties

Property	Description
colorPrimary	Primary brand accent color
colorTextPrimary	Main text color
colorTextSecondary	Secondary/muted text color
colorTextLink	Link and interactive text color
colorForeground	Surface/card background color
colorBackground	Page background color
colorDivider	Separator/divider line color
colorSuccess	Success state color
colorWarning	Warning state color
colorDanger	Error/danger state color
fontFamily	Font family used throughout the SDK

Default Foundation Colors

Token	Light Mode	Dark Mode
colorPrimary	`#42CB91`	`#42CB91`
colorTextPrimary	`#001C2A`	`#E3E3E3`
colorTextSecondary	`#5E636B`	`#B0B0B0`
colorTextLink	`#006F94`	`#4E83A6`
colorForeground	`#FFFFFF`	`#1F1F1F`
colorBackground	`#F4F5F6`	`#111111`
colorDivider	`#E2E2E2`	`#313131`
colorSuccess	`#008761`	`#008761`
colorWarning	`#FEF8DB`	`#6C560D`
colorDanger	`#AA220F`	`#ED7083`

Components

Component-specific configurations for buttons, inputs, loading screens, navigation, and content.

export type ReadyRemitComponents = {
  button?: ReadyRemitButtonConfig;
  inputFields?: ReadyRemitInputFieldsConfig;
  loading?: ReadyRemitLoadingConfig;
  backLink?: ReadyRemitBackLinkConfig;
  content?: ReadyRemitContentConfig;
};

Button Configuration

export type ReadyRemitButtonConfig = {
  buttonPrimaryBackgroundColor?: ReadyRemitColorValue;
  buttonPrimaryTextColor?: ReadyRemitColorValue;
  buttonSecondaryBorderColor?: ReadyRemitColorValue;
  buttonSecondaryTextColor?: ReadyRemitColorValue;
  buttonTextCase?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
  buttonPrimaryTextShadow?: boolean;
  buttonRadius?: number;
};

Property	Type	Description
buttonPrimaryBackgroundColor	`ColorValue`	Primary button background
buttonPrimaryTextColor	`ColorValue`	Primary button text
buttonSecondaryBorderColor	`ColorValue`	Secondary button border
buttonSecondaryTextColor	`ColorValue`	Secondary button text
buttonTextCase	`string`	Text transformation for button labels
buttonPrimaryTextShadow	`boolean`	Enable text shadow on primary buttons
buttonRadius	`number`	Corner radius in dp/pt

Input Fields Configuration

export type ReadyRemitInputFieldsConfig = {
  inputBorderColor?: ReadyRemitColorValue;
  inputBackgroundColor?: ReadyRemitColorValue;
  inputRadius?: number;
};

Property	Type	Description
inputBorderColor	`ColorValue`	Input field border color
inputBackgroundColor	`ColorValue`	Input field background color
inputRadius	`number`	Corner radius in dp/pt

Loading Configuration

export type ReadyRemitLoadingConfig = {
  loadingBackgroundColor?: ReadyRemitColorValue;
  loadingTextColor?: ReadyRemitColorValue;
  loadingSpinnerColor?: ReadyRemitColorValue;
};

Property	Type	Description
loadingBackgroundColor	`ColorValue`	Loading screen background
loadingTextColor	`ColorValue`	Loading screen text
loadingSpinnerColor	`ColorValue`	Loading spinner color

Back Link Configuration

export type ReadyRemitBackLinkConfig = {
  backIconType?: 'arrow' | 'chevron';
  backTextCase?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
};

Property	Type	Description
backIconType	`string`	Back button icon style
backTextCase	`string`	Text transformation for back button label

Content Configuration

Customize the home screen headline and description.

export type ReadyRemitContentConfig = {
  contentHomepageHeadline?: ReadyRemitHomepageHeadline;
  contentHomepageDescription?: ReadyRemitHomepageDescription;
};

export type ReadyRemitHomepageHeadline =
  | 'Global transfer'
  | 'International & domestic transfers'
  | 'International transfers'
  | 'Send money internationally';

export type ReadyRemitHomepageDescription =
  | 'Send funds to your recipients with convenience and flexibility.'
  | 'Send money to friends and family in other countries';

Available Headlines

Value	English	Spanish
`Global transfer`	Global transfer	Transferencia global
`International & domestic transfers`	International & domestic transfers	Transferencias internacionales y domésticas
`International transfers`	International transfers	Transferencias internacionales
`Send money internationally`	Send money internationally	Enviar dinero al extranjero

Available Descriptions

Value	English	Spanish
`Send funds to your recipients with convenience and flexibility.`	Send funds to your recipients with convenience and flexibility.	Envíe fondos a sus destinatarios de forma práctica y flexible.
`Send money to friends and family in other countries`	Send money to friends and family in other countries	Enviar dinero a amigos y familiares en otros países

Complete Example

import {
  startSDK,
  ReadyRemitEnvironment,
  ReadyRemitSupportedAppearance,
  type ReadyRemitAppearance,
} from 'react-native-ready-remit-sdk';

const appearance: ReadyRemitAppearance = {
  foundations: {
    colorPrimary: { light: '#42CB91', dark: '#42CB91' },
    colorTextPrimary: { light: '#001C2A', dark: '#E3E3E3' },
    colorTextSecondary: { light: '#5E636B', dark: '#B0B0B0' },
    colorTextLink: { light: '#006F94', dark: '#4E83A6' },
    colorForeground: { light: '#FFFFFF', dark: '#1F1F1F' },
    colorBackground: { light: '#F4F5F6', dark: '#111111' },
    colorDivider: { light: '#E2E2E2', dark: '#313131' },
    colorSuccess: { light: '#008761', dark: '#008761' },
    colorWarning: { light: '#FEF8DB', dark: '#6C560D' },
    colorDanger: { light: '#AA220F', dark: '#ED7083' },
    fontFamily: 'inter',
  },
  components: {
    button: {
      buttonPrimaryBackgroundColor: { light: '#00766C', dark: '#20948A' },
      buttonPrimaryTextColor: { light: '#FFFFFF', dark: '#FFFFFF' },
      buttonSecondaryBorderColor: { light: '#006F94', dark: '#4E83A6' },
      buttonSecondaryTextColor: { light: '#006F94', dark: '#4E83A6' },
      buttonTextCase: 'capitalize',
      buttonPrimaryTextShadow: false,
      buttonRadius: 8,
    },
    inputFields: {
      inputBorderColor: { light: '#858585', dark: '#505050' },
      inputBackgroundColor: { light: '#F8F8F8', dark: '#0C0C0C' },
      inputRadius: 8,
    },
    loading: {
      loadingBackgroundColor: { light: '#004C5B', dark: '#03282F' },
      loadingTextColor: { light: '#FFFFFF', dark: '#FFFFFF' },
      loadingSpinnerColor: { light: '#42CB91', dark: '#42CB91' },
    },
    backLink: {
      backIconType: 'chevron',
      backTextCase: 'capitalize',
    },
    content: {
      contentHomepageHeadline: 'Send money internationally',
      contentHomepageDescription: 'Send funds to your recipients with convenience and flexibility.',
    },
  },
};

startSDK({
  configuration: {
    environment: ReadyRemitEnvironment.Sandbox,
    appearance: appearance,
    supportedAppearance: ReadyRemitSupportedAppearance.Device,
  },
  fetchAccessTokenDetails: async () => ({ /* ... */ }),
  verifyFundsAndCreateTransfer: async (request) => ({ transferId: 'TXN123' }),
});

Partial Customization

You don't need to provide all values. Only override what you need:

const appearance: ReadyRemitAppearance = {
  foundations: {
    colorPrimary: { light: '#FF5722', dark: '#FF7043' },
    fontFamily: 'roboto',
  },
  components: {
    button: {
      buttonRadius: 24,
    },
  },
};