# Mobile SDK plugins customization

The mobile SDK allows for customization through the use of a specially formatted JSON object, known as the "theme". The theme can be applied using the withTheme builder's method.

# Platform Specific Options

On the top level of the theme, you can specify the platform the corresponding options should be applied to:

  • universal - for both platforms
  • ios, android - for the specific platform (the specific options will overwrite the universal ones if defined)

For each platform, the options are organized into the following groups:

  • colors
  • fonts
  • images
  • metrics

# Color parameters

The colors can be defined either as a single value or as a pair of light/dark values for light and dark mode correspondingly. The value of a color can be set either as #RRGGBBAA or as 0xAARRGGBB (alpha is optional).

# Fonts & Images

  • The fonts and images should be placed under the www/ folder and be required in a .js file (assets.js on the screenshot) that should then be included into the project somewhere. This is to ensure that the resources are bundled into the native apps.
  • The fonts also need to be listed in the theme under fonts.assets. For each one, you provide the name (the font’s name as it’s written it its metadata) and file (the font’s filepath starting from to www/). Then you will be able to refer the fonts by name and specify their size.
  • The images can be referred by its filepath (starting from www/). For iOS, it’s also possible to specify the scale (adjusts the logical size in points, points=pixels/scale) and rendering mode (“template” or “original”)

# Metric parameters

Some sizes and styles.

# Full list of possible params

For the full list of possible customizations you can use, please see the native SDKs documentation

# Example

# React Native example

Let's assume that the appropriate files of fonts and pictures are located in www directory of your project.

Then we can use them in the theme like this:

{
  "universal": {
    "fonts": {
      "assets": [
        // refers to the ttf/otf files (ios needs them to register fonts before they could be used)
        {
          "name": "Scriptina",
          "file": "www/fonts/SCRIPTIN.ttf"
        }
      ],
      "headline1": {
        "name": "Scriptina", // use ttf's `Full Name` or the name of any system font installed, or omit the key to keep the default font-face
        "size": 40 // in points
      },
      "caption": {
        "name": "GoodTimesRg-Regular",
        "size": 9
      }
    },
    "images": {
      "iconMail": "www/img/mail-icon.png",
      "verificationStepIcons": {
        "identity": {
          "image": "www/img/robot-icon.png",
          "scale": 3
        }
      }
    },
    "colors": {
      "navigationBarItem": {
        "light": "#FF000080",
        "dark": "0x80FF0000"
      },
      "alertTint": "#FF000080"
    }
  },
  "ios": {
    "metrics": {
      "commonStatusBarStyle": "default"
    }
  }
}

# List of possible parameters

# Fonts

# body

"body": "Font Name"

Used for paragraphs, text fields, etc. in conjunction with contentNeutral mostly. Default is System Regular, 14pt.

# Platform support

Android iOS

# caption

"caption": "Font Name"

Used for minor captions in conjunction with contentWeak mostly. Default is System Regular, 12pt.

# Platform support

Android iOS

# headline1

"headline1": "Font Name"

Used for screen titles in conjunction with contentStrong mostly. Default is System Bold, 24pt.

# Platform support

Android iOS

# headline2

"headline2": "Font Name"

Used for section titles in conjunction with contentStrong mostly. Default is System Bold, 20pt.

# Platform support

Android iOS

# subtitle1

"subtitle1": "Font Name"

Used for subtitles in conjunction with contentStrong mostly. Default is System Semibold, 18pt.

# Platform support

Android iOS

# subtitle2

"subtitle2": "Font Name"

Used for subtitles in conjunction with contentNeutral mostly. Default is System Regular, 16pt.

# Platform support

Android iOS

# Colors

# Common

"navigationBarItem": "#RRGGBBAA"

Navigation bar items tinting color. Used for the close button only at the moment. Default is #94A0B8 and #FFFFFF with alpha 40% for the dark appearance.

# Platform support

Android iOS

# alertTint

"alertTint": "#RRGGBBAA"

Used for the system alert actions and the toolbar buttons. Default is #1693E9 and #1485D1 for the dark appearance.

# Platform support

Android iOS

# Backgrounds

# backgroundCommon

"backgroundCommon": "#RRGGBBAA"

Used for almost all the screens as the background color (the exception is the Camera Screen, see cameraBackground . Default is #FFFFFF and #1E232E for the dark appearance.

# Platform support

Android iOS

# backgroundCritical

"backgroundCritical": "#RRGGBBAA"

Used as a background state color for the verification steps and as a background color for the auto-generated images.pictureFailure Default is #F05C5C with alpha 12% and #F05C5C with alpha 30% for the dark appearance.

# Platform support

Android iOS

# backgroundInfo

"backgroundInfo": "#RRGGBBAA"

Not used at the moment. Default is #E8F4FD and #072F4B for the dark appearance.

# Platform support

Android iOS

# backgroundNeutral

"backgroundNeutral": "#RRGGBBAA"

Used as a background state color for the verification steps and as a main background color for the .filled style cards. Default is #F6F7F9 and #FFFFFF with alpha 7% for the dark appearance.

# Platform support

Android iOS

# backgroundSuccess

"backgroundSuccess": "#RRGGBBAA"

Used as a background state color for the verification steps and as a background color for the auto-generated images.pictureSuccess Default is #18B494 with alpha 12% and #18B494 with alpha 30% for the dark appearance.

# Platform support

Android iOS

# backgroundWarning

"backgroundWarning": "#RRGGBBAA"

Used as a background state color for the verification steps and as a background color for the auto-generated images.pictureWarning and images.pictureSubmitted Default is #F2AA0D with alpha 13% and #F2AA0D with alpha 30% for the dark appearance.

# Platform support

Android iOS

# bottomSheetBackground

"bottomSheetBackground": "#RRGGBBAA"

The background color of the bottom sheet. Default is #FFFFFF and #333C4D for the dark appearance.

# Platform support

Android iOS

# bottomSheetHandle

"bottomSheetHandle": "#RRGGBBAA"

The foreground color of the bottom sheet handle. Default is #D1D6E1 and #FFFFFF with alpha 20% for the dark appearance.

# Platform support

Android iOS
✅ (From version 1.26)

# Content

# cameraBackground

"cameraBackground": "#RRGGBBAA"

The Camera Screen background color. Default is #1E232E.

# Platform support

Android iOS

# cameraContent

"cameraContent": "#RRGGBBAA"

Used as a tint color for the elements placed on the Camera Screen such as the gallery button, the touch button, etc. Default is #FFFFFF.

# Platform support

Android iOS

# cardBorderedBackground

"cardBorderedBackground": "#RRGGBBAA"

Used as a background color for the cards with bordered card style.

# iOS

Default is nil

# Android

Default is null

# Platform support

Android iOS
✅ (From version 1.26)

# cardPlainBackground

"cardPlainBackground": "#RRGGBBAA"

Used as a background color for the cards with plain card style.

# iOS

Default is nil

# Android

Default is null

# Platform support

Android iOS
✅ (From version 1.26)

# contentCritical

"contentCritical": "#RRGGBBAA"

Used as a foreground state color for the verification steps and as a foreground color for the auto-generated images.pictureFailure Default is #F05C5C.

# Platform support

Android iOS

# contentInfo

"contentInfo": "#RRGGBBAA"

Used for the Video Screen's viewport border only at the moment. Default is #1693E9 and #1485D1 for the dark appearance.

# Platform support

Android iOS
"contentLink": "#RRGGBBAA"

Used for the text links. Default is #1693E9 and #1485D1 for the dark appearance.

# Platform support

Android iOS

# contentNeutral

"contentNeutral": "#RRGGBBAA"

Used as a foreground color for the text body, some subtitles and the accessory elements. Default is #5C6B8A and #FFFFFF with alpha 60% for the dark appearance.

# Platform support

Android iOS

# contentStrong

"contentStrong": "#RRGGBBAA"

Used as a foreground color for the headlines and some subtitles. Default is #333C4D and #FFFFFF with alpha 85% for the dark appearance.

# Platform support

Android iOS

# contentSuccess

"contentSuccess": "#RRGGBBAA"

Used as a foreground state color for the verification steps and as a foreground color for the auto-generated images.pictureSuccess Default is #18B494.

# Platform support

Android iOS

# contentWarning

"contentWarning": "#RRGGBBAA"

Used as a foreground state color for the verification steps and as a foreground color for the auto-generated images.pictureWarning and images.pictureSubmitted Default is #E6A00B.

# Platform support

Android iOS

# contentWeak

"contentWeak": "#RRGGBBAA"

Used as a foreground color for the minor captions and the light accessory elements. Default is #94A0B8 and #FFFFFF with alpha 40% for the dark appearance.

# Platform support

Android iOS

# Fields

# fieldBackground

"fieldBackground": "#RRGGBBAA"

The background color of the input fields. Used for text fields. Default is #F6F7F9 and #FFFFFF with alpha 7% for the dark appearance.

# Platform support

Android iOS

# fieldBackgroundInvalid

"fieldBackgroundInvalid": "#RRGGBBAA"

The background color of the input fields marked as invalid. Used for text fields, checkbox groups, attachments, and other elements that require validation. Default is equal to the backgroundCritical color.

# Platform support

Android iOS
✅ (From version 1.26)

# fieldBorder

"fieldBorder": "#RRGGBBAA"

The border color of the input fields. Used for text fields. Default is the clear color.

# Platform support

Android iOS

# fieldContent

"fieldContent": "#RRGGBBAA"

The content color of the input fields. Used for text fields. Default is #333C4D and #FFFFFF with alpha 85% for the dark appearance.

# Platform support

Android iOS

# fieldPlaceholder

"fieldPlaceholder": "#RRGGBBAA"

The placeholder color of the input fields. Used for text fields. Default is #94A0B8 and #FFFFFF with alpha 40% for the dark appearance.

# Platform support

Android iOS
✅ (From version 1.26)

# fieldTint

"fieldTint": "#RRGGBBAA"

The tint color of the input fields. Used as an accent color for text fields, checkboxes and radio buttons. Default is #1693E9 and #1485D1 for the dark appearance.

# Platform support

Android iOS

# List

# listSelectedItemBackground

"listSelectedItemBackground": "#RRGGBBAA"

The background color of the selected list item. Default is #F6F7F9 and #FFFFFF with alpha 7% for the dark appearance.

# Platform support

Android iOS
✅ (From version 1.26)

# listSeparator

"listSeparator": "#RRGGBBAA"

The list separator color. Default is #D1D6E1 and #FFFFFF with alpha 20% for the dark appearance.

# Platform support

Android iOS
✅ (From version 1.26)

# Primary Button

# primaryButtonBackground

"primaryButtonBackground": "#RRGGBBAA"

The primary button background color in the normal state. Default is #1693E9 and #1485D1 for the dark appearance.

# Platform support

Android iOS

# primaryButtonBackgroundDisabled

"primaryButtonBackgroundDisabled": "#RRGGBBAA"

The primary button background color in the disabled state. Default is #A1D2F7 and #072F4B for the dark appearance.

# Platform support

Android iOS

# primaryButtonBackgroundHighlighted

"primaryButtonBackgroundHighlighted": "#RRGGBBAA"

The primary button background color in the highlighted state. Default is #1485D1 and #0B4A75 for the dark appearance.

# Platform support

Android iOS

# primaryButtonContent

"primaryButtonContent": "#RRGGBBAA"

The primary button foreground color in the normal state. Default is #FFFFFF and #FFFFFF with alpha 85% for the dark appearance.

# Platform support

Android iOS

# primaryButtonContentDisabled

"primaryButtonContentDisabled": "#RRGGBBAA"

The primary button foreground color in the disabled state. Default is #FFFFFF and #0B4A75 for the dark appearance.

# Platform support

Android iOS

# primaryButtonContentHighlighted

"primaryButtonContentHighlighted": "#RRGGBBAA"

The primary button foreground color in the highlighted state. Default is #FFFFFF and #FFFFFF with alpha 85% for the dark appearance.

# Platform support

Android iOS

# secondaryButtonBackground

"secondaryButtonBackground": "#RRGGBBAA"

The secondary button background color in the normal state. Default is the clear color.

# Platform support

Android iOS

# Secondary Button

# secondaryButtonBackgroundDisabled

"secondaryButtonBackgroundDisabled": "#RRGGBBAA"

The secondary button background color in the disabled state. Default is the clear color.

# Platform support

Android iOS

# secondaryButtonBackgroundHighlighted

"secondaryButtonBackgroundHighlighted": "#RRGGBBAA"

The secondary button background color in the highlighted state. Default is #E8F4FD and #072F4B for the dark appearance.

# Platform support

Android iOS

# secondaryButtonContent

"secondaryButtonContent": "#RRGGBBAA"

The secondary button foreground color in the normal state. Default is #1693E9 and #1485D1 for the dark appearance.

# Platform support

Android iOS

# secondaryButtonContentDisabled

"secondaryButtonContentDisabled": "#RRGGBBAA"

The secondary button foreground color in the disabled state. Default is #A1D2F7 and #0B4A75 for the dark appearance.

# Platform support

Android iOS

# secondaryButtonContentHighlighted

"secondaryButtonContentHighlighted": "#RRGGBBAA"

The secondary button foreground color in the highlighted state. Default is #1693E9 and #1485D1 for the dark appearance.

# Platform support

Android iOS

# Platform elements

# statusBarColor

"statusBarColor": "#RRGGBBAA"

# Platform support

Android iOS

# Images

# Icons

# iconAttachment

"iconAttachment": "www/image_path"

Used for attachments fields when the field is empty. Default is a clip icon.

# Platform support

Android iOS

# iconBack

"iconBack": "www/image_path"

Used for the back bar button. Default is a back arrow icon. Setting to nil forces the system back button to be used instead.

# Platform support

Android iOS

# iconBin

"iconBin": "www/image_path"

Used for attachments fields when the document can be removed. Default is a trash bin icon.

# Platform support

Android iOS

# iconCalendar

"iconCalendar": "www/image_path"

Used for date fields. Default is a calendar icon.

# Platform support

Android iOS

# iconCameraToggle

"iconCameraToggle": "www/image_path"

Used for the camera toggle button on the VideoIdent Screen. Default is a rounded arrows icon.

# Platform support

Android iOS

# iconCheckboxOff

"iconCheckboxOff": "www/image_path"

Used for unmarked checkboxes. Default is an empty rectangle icon with contentWeak border color.

# Platform support

Android iOS

# iconCheckboxOn

"iconCheckboxOn": "www/image_path"

Used for marked checkboxes. Default is a white checkmark icon on a background rectangle with fieldTint color.

# Platform support

Android iOS

# iconClose

"iconClose": "www/image_path"

Used for the close bar button across all the screens. Default is a cross icon.

# Platform support

Android iOS

# iconDisclosure

"iconDisclosure": "www/image_path"

Used to indicate the disclosability. Default is a simple disclosing arrow icon.

# Platform support

Android iOS

# iconDropdown

"iconDropdown": "www/image_path"

Used for dropdown fields. Default is a down arrow icon.

# Platform support

Android iOS

# iconFailure

"iconFailure": "www/image_path"

Used to compose the auto-generated pictureFailure Default is a cross icon.

# Platform support

Android iOS

# iconGallery

"iconGallery": "www/image_path"

Used for the gallery button on the Camera Screen. Default is a photos stack icon.

# Platform support

Android iOS

# iconMail

"iconMail": "www/image_path"

Used for the default E-Mail support item. Default is a letter icon.

# Platform support

Android iOS

# iconPicture

"iconPicture": "www/image_path"

Used for attachments fields when the document is attached. Default is a picture icon.

# Platform support

Android iOS

# iconPlay

"iconPlay": "www/image_path"

Used the play button on the Preview screen. Default is a play icon in the circle.

# Platform support

Android iOS

# iconRadioButtonOff

"iconRadioButtonOff": "www/image_path"

Used for unselected radio buttons. Default is an empty circle icon with contentWeak border color.

# Platform support

Android iOS

# iconRadioButtonOn

"iconRadioButtonOn": "www/image_path"

Used for selected radio buttons. Default is a white circle icon on a backround circle with fieldTint color.

# Platform support

Android iOS

# iconRotate

"iconRotate": "www/image_path"

Used for the rotation bar button on the Preview Screen. Default is a photo rotation icon.

# Platform support

Android iOS

# iconSearch

"iconSearch": "www/image_path"

Used for the search bar. Default is a magnifying glass icon.

# Platform support

Android iOS

# iconSubmitted

"iconSubmitted": "www/image_path"

Used to compose the auto-generated pictureSubmitted Default is an uploading-to-the-cloud icon.

# Platform support

Android iOS

# iconSuccess

"iconSuccess": "www/image_path"

Used to compose the auto-generated pictureSuccess Default is a checkmark icon.

# Platform support

Android iOS

# iconTorchOff

"iconTorchOff": "www/image_path"

Used for the turned-off flashlight button on the Camera Screen. Default is an outlined flash icon.

# Platform support

Android iOS

# iconTorchOn

"iconTorchOn": "www/image_path"

Used for the turned-on flashlight button on the Camera Screen. Default is a filled flash icon.

# Platform support

Android iOS

# iconWarning

"iconWarning": "www/image_path"

Used for the warnings bottom sheet and to compose the auto-generated pictureWarning Default is an exclamation mark in the triangle.

# Platform support

Android iOS

# Content driven sets

# instructionsImages

"instructionsImages": "www/image_path"

Instruction pictures.

When an image is referred with one of the following text keys:

  • sns_step_{STEP}_{scene}_instructions_image
  • sns_step_{STEP}_{scene}_instructions_doImage
  • sns_step_{STEP}_{scene}_instructions_dontImage

the sdk will look through instructionsImages for the corresponding image object. At that it takes the value of the text key and uses it as a key for instructionsImages dictionary.

Feel free to add your own pictures or use the predefined ones:

  • default/facescan
  • default/do_idCard
  • default/dont_idCard
  • default/do_passport
  • default/dont_passport
  • default/do_idCard_backSide
  • default/dont_idCard_backSide

# Platform support

Android iOS

# verificationStepIcons

"verificationStepIcons": "www/image_path"

Verification steps icons.

Default icons are defined for the following keys: .identity, .selfie, .selfie2, .proofOfResidence, .proofOfResidence2, .applicantData, .emailVerification,.phoneVerification and .questionnaire. Also the .default key is filled with the .identity icon.

# Platform support

Android iOS

# documentTypeIcons

"documentTypeIcons": "www/image_path"

Document types icons.

Default icons are defined for the following keys: .idCard, .passport, .drivers and .residencePermit. Also the .default key is filled with the .idCard icon.

# Platform support

Android iOS

# Pictures

# pictureFailure

"pictureFailure": "www/image_path"

The "failure" image. Could be used if you'd like to override the auto-generated one. Default is nil

# Platform support

Android iOS

# pictureGeolocationOff

"pictureGeolocationOff": "www/image_path"

Used as the image on the Geolocation Screen when the app has no permissions to get the geolocation. Default is a crossed geolocation pin icon.

# Platform support

Android iOS

# pictureGeolocationOn

"pictureGeolocationOn": "www/image_path"

Used as the image on the Geolocation Screen before the start of the geolocation detection. Default is a geolocation pin icon.

# Platform support

Android iOS

# pictureSubmitted

"pictureSubmitted": "www/image_path"

The "submitted" image. Could be used if you'd like to override the auto-generated one. Default is nil

# Platform support

Android iOS

# pictureSuccess

"pictureSuccess": "www/image_path"

The "success" image. Could be used if you'd like to override the auto-generated one. Default is nil

# Platform support

Android iOS

# pictureWarning

"pictureWarning": "www/image_path"

The "warning" image. Could be used if you'd like to override the auto-generated one. Default is nil

# Platform support

Android iOS

# Metrics

# Common

# activityIndicatorStyle

"activityIndicatorStyle": "medium"

The loading spinner style.

# iOS

Default is medium for iOS 13+ and .gray for previous ones.

# Android

Default is medium. Supported values are small, medium and large.

# Platform support

Android iOS
✅ (From version 1.26)

# commonStatusBarStyle

"commonStatusBarStyle": "default"

The status bar style on all the screens. Default is .default

# Platform support

Android iOS

# preferredCloseBarItemAlignment

"preferredCloseBarItemAlignment": "right"

The preferred alignment of the close bar button. The options are .right and .left Default is .right

# Platform support

Android iOS

# preferredCloseBarItemStyle

"preferredCloseBarItemStyle": "icon"

The preferred style of the close bar button. The options are .icon and .text Default is .icon

# Platform support

Android iOS

# Bottom Sheet

# bottomSheetCornerRadius

"bottomSheetCornerRadius": "16"

The bottom sheet corners radius. Default is 16pt.

# Platform support

Android iOS
✅ (From version 1.26)

# bottomSheetHandleSize

"bottomSheetHandleSize": {"width": 36, "height": 4}

The bottom sheet handle size. Default is 36pt x 4pt.

# Platform support

Android iOS
✅ (From version 1.26)

# Buttons

# buttonBorderWidth

"buttonBorderWidth": "1"

The secondary button border width. Default is 1pt.

# Platform support

Android iOS

# buttonCornerRadius

"buttonCornerRadius": "8"

The primary and secondary buttons corner radius. Default is 8pt.

# Platform support

Android iOS

# buttonHeight

"buttonHeight": "48"

The primary and secondary buttons height. Default is 48pt.

# Platform support

Android iOS

# Camera

# cameraStatusBarStyle

"cameraStatusBarStyle": "default"

The status bar style on the Camera Screen. Default is .default

# Platform support

Android iOS

# Card Style

# cardBorderWidth

"cardBorderWidth": "1"

The cards' border width. Default is 1pt.

# Platform support

Android iOS

# cardCornerRadius

"cardCornerRadius": "8"

The cards' corners radius. Default is 8pt.

# Platform support

Android iOS

# documentTypeCardStyle

"documentTypeCardStyle": "filled"

The document types card style.

# iOS

Default is .filled

# Android

Default is default. Supported values are default, bordered and plain.

# Platform support

Android iOS

# selectedCountryCardStyle

"selectedCountryCardStyle": "filled"

The selected country card style.

# iOS

Default is .filled

# Android

Default is default. Supported values are default, bordered and plain.

# Platform support

Android iOS

# supportItemCardStyle

"supportItemCardStyle": "bordered"

The support items card style.

# iOS

Default is .bordered

# Android

Default is default. Supported values are default, bordered and plain.

# Platform support

Android iOS

# verificationStepCardStyle

"verificationStepCardStyle": "filled"

The verification steps card style.

# iOS

Default is .filled

# Android

Default is default. Supported values are default, bordered and plain.

# Platform support

Android iOS

# Fields

# fieldBorderWidth

"fieldBorderWidth": "0"

The input fields border width. Used for the search bar only at the moment. Default is 0pt.

# Platform support

Android iOS

# fieldCornerRadius

"fieldCornerRadius": "8"

The input fields corner radius. Used for the search bar only at the moment. Default is 8pt.

# Platform support

Android iOS

# fieldHeight

"fieldHeight": "48"

The input fields height. Default is 48pt.

# Platform support

Android iOS
✅ (From version 1.26)

# Content

# screenHorizontalMargin

"screenHorizontalMargin": "16"

The horizontal margins of the screen content. Default is 16pt.

# Platform support

Android iOS
✅ (From version 1.26)

# List separator

# listSeparatorHeight

"listSeparatorHeight": "1"

The list separator thickness. Default is 1pt.

# Platform support

Android iOS
✅ (From version 1.26)

# listSeparatorMarginLeft

"listSeparatorMarginLeft": "0"

The list separator left margin. Default is 0pt.

# Platform support

Android iOS
✅ (From version 1.26)

# listSeparatorMarginRight

"listSeparatorMarginRight": "0"

The list separator right margin. Default is 0pt.

# Platform support

Android iOS
✅ (From version 1.26)

# Alignment

# screenHeaderAlignment

"screenHeaderAlignment": "center"

The alignment for the screen headers.

# iOS

Default is .center

# Android

Default is center. Supported values are left, center and right.

# Platform support

Android iOS
✅ (From version 1.26)

# sectionHeaderAlignment

"sectionHeaderAlignment": "natural"

The alignment for the section headers.

# iOS

Default is .natural

# Android

Default is left. Supported values are left, center and right.

# Platform support

Android iOS
✅ (From version 1.26)

# Viewport

# viewportBorderWidth

"viewportBorderWidth": "8"

The selfie viewport border width. Default is 8pt.

# Platform support

Android iOS
Last Updated: 8/15/2023, 10:55:21 AM