Supported Appearance

Control light/dark mode behavior

Definition

export enum ReadyRemitSupportedAppearance {
  Light = 'light',
  Dark = 'dark',
  Device = 'device',
}

Cases

Case	Value	Description
`Light`	`'light'`	SDK always uses light theme
`Dark`	`'dark'`	SDK always uses dark theme
`Device`	`'device'`	SDK follows the device/system appearance setting (recommended)

Default

The default value is Device, which means the SDK will automatically switch between light and dark themes based on the user's system preferences.

Sample Usage

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

// Follow system appearance (default behavior)
startSDK({
  configuration: {
    environment: ReadyRemitEnvironment.Sandbox,
    supportedAppearance: ReadyRemitSupportedAppearance.Device,
  },
  // ...
});

// Force light mode
startSDK({
  configuration: {
    environment: ReadyRemitEnvironment.Sandbox,
    supportedAppearance: ReadyRemitSupportedAppearance.Light,
  },
  // ...
});

// Force dark mode
startSDK({
  configuration: {
    environment: ReadyRemitEnvironment.Sandbox,
    supportedAppearance: ReadyRemitSupportedAppearance.Dark,
  },
  // ...
});

Combining with Appearance

When using a custom appearance configuration, the supportedAppearance setting determines which color values are used:

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

const appearance: ReadyRemitAppearance = {
  foundations: {
    colorPrimary: { 
      light: '#007AFF',  // Used when Light or Device (light mode)
      dark: '#0A84FF',   // Used when Dark or Device (dark mode)
    },
  },
};

startSDK({
  configuration: {
    environment: ReadyRemitEnvironment.Sandbox,
    appearance: appearance,
    supportedAppearance: ReadyRemitSupportedAppearance.Device, // Uses both light and dark values
  },
  // ...
});

Tip: If you only provide appearance colors for one mode (e.g., only light values), consider setting supportedAppearance to match (e.g., Light) to ensure consistent behavior.

Updated 4 days ago