React Native Branding Images

Android

Android allows customization of Tips images. Please follow the instructions on Tips Customization page.

iOS

Custom icons and images must be provided in a bundle inside your iOS app. The bundle in which you stored the custom images should be provided to SDK as part of SbCaptureConfiguration .

All custom images are optional, and if not provided, the default SDK images will be used. Also, if you don’t provide any image bundle at all (SbCaptureConfiguration.branding.iosBundles.images in Step 2 in this section) the SDK will use all default icons and images.

Step 1: Add custom icons and images to iOS app

  • Images must be added as an Image Set .

  • Their names in the bundle must match the name of the corresponding image in the BrandingImagesProvider protocol.

  • Ensure that the provided images do not need to scale up on devices with the larger screens. See Images guideline in Human Interface Guidelines. The exact image sizes depend on icon design.

Note that for Capture customization, only images with prefix capture are used.

Step 2: Specify the images bundle

The images bundle should be provided in SbCaptureConfiguration.branding.iosBundles.images property.

Each property inside iosBundles can be of one of the following types:

  • SbMainBundle which defines main app’s bundle, and doesn’t require additional properties.
  • SbCustomBundle which defines a custom bundle. This type of bundle requires the name specified as an additional property.

Example

In order to provide a custom image for the manual capture button icon, an image set with the name captureCaptureIcon was created in the main app’s bundle. The image set contains 3 icons: @1 (50x50), @2 (100x100), and @3 (150x150).

Since the image was added to main bundle, the images bundle will be specified as follows:

const captureConfiguration: SbCaptureConfiguration = {
    captureFeatures: {
      // ...
    },
    branding: {
      iosColors: {
        // ...
      },
      iosFonts: {
        // ...
      },
      iosBundles: {
        images: {
          kind: 'main',
        },
      },
    },
  };