React Native Branding Colors

Android

Please follow the instructions on Android Branding Colors page.

iOS

Branding colors are defined in the SbIosColors interface. These colours can then be provided to the SbBranding interface via the optional iosColors property.

The usage of the colors matches the table, provided on the main Branding Colors page:

• primary and onPrimary define colors for a Primary action button, as well as detected document and crop shape color.
• secondary and onSecondary define colors for a Secondary action button
• surface and onSurface define background and foreground colors for Tips screen.
• focus defines the color of the image on Tips screen.
• captureBackground and onCaptureBackground define background and foreground colors of the Camera, Preview and Crop screens (black and white by default).

The colors must be provided in a 6-digit hexadecimal format. For example 0xff0000 corresponds to the red color, and 0xffffff corresponds to the white. All colors are optional, and if not provided, the default colors will be used. See BrandingColorsProvider protocol for details about default colors used by Capture.

Example

const captureConfiguration: SbCaptureConfiguration = {
    captureFeatures: {
      // ...
    },
    branding: {
      iosColors: {
        primary: 0xffcc00,
        onPrimary: 0x000000,
        secondary: 0x4a7082,
        onSecondary: 0xffffff,
        focus: 0x11e00d,
      },
      iosFonts: {
        // ...
      },
    },
  };