Customizing the Verify UI

Search…
iOS UI Customization
You can customize VerifyCardViewController and VerifyCardAddViewController by setting key-values dictionary in your project's App.js. Please see the section below for customizing the remaining components.
Fonts
All font values should be described as {font-family}-{style} like Avenir-Light. All the available system fonts and their appropriate names can be found here.
Available Customizations
Key
Description
Value Type
Value Example
Default
backButtonTintColor
A hex string of the color overlay of the back button
String
“#FFF”
“#FFF”
backButtonText
A string describing the text of the back button
String
“Close”
“”
backgroundColor
A hex string of the background color
String
“#FFF”
“#181b20”
backgroundColorOpacity
A float between 0 - 1 of the background color opacity
Float
0.5
0.7
cardDetailExpiryTextColor
A hex string of the card's expiration text color
String
“#FFF”
“#FFF”
cardDetailNameTextColor
A hex string of the card's name text color
String
“#FFF”
“#FFF”
cardDetailNumberTextColor
A hex string of the card's number text color
String
“#FFF”
“#FFF”
descriptionHeaderText
A string describing the text of the description header located above the ROI view
String
“Scan Card”
“Scan Card”
descriptionHeaderTextColor
A hex string of the description header color
String
“#FFF”
“#FFF”
descriptionHeaderTextFont
A string describing the font of the description header
String
“Avenir-Bold”
System Default
descriptionHeaderTextSize
A float describing the size of the description header font
Float
30.0
30.0
enableCameraPermissionText
A string describing the text show when the camera permissions are denied. This should ask the user to turn on the camera permissions for your app
String
"Enable your camera permissions”
"Enable your camera permissions”
enableCameraPermissionTextColor
A hex string of the enable camera permission text color
String
“#FFF”
“#FFF”
enableCameraPermissionTextFont
A string describing the font of the enable camera permission text
String
“Avenir-Light”
System Default
enableCameraPermissionTextSize
A float describing the size of the enable camera permission text
Float
20.0
20.0
enableManualCardEntry
A boolean when true shows the manual card entry button when there is no card base card
Bool
false
true
instructionText
A string describing scanning instructions for the user
String
“Position your card”
“”
instructionTextColor
A hex string describing the instruction text color
String
“#FFF”
“#FFF”
instructionTextFont
A string describing the font of the instruction text
String
“Avenir-Light”
System Default
Images
Images must be added to the native iOS project’s Image.xcasset folder and the must be named exactly as listed above.
Image Names
Description
bouncer_verify_flash_on
Image of button to turn on flash
bouncer_verify_flash_off
Image of button to turn off flash
bouncer_verify_back
Image of button to go back
Localization
By default, we provide internationalization support and translations for all of our strings in English, Spanish, French, Portuguese, German, Chinese (simplified and traditional), Hindi, Hebrew, Japanese, Korean, Arabic, and Indonesian. However, if you want to set strings yourself, you can do so by setting the available text fields listed above.
UI Customization Example
1
// App.js
2
​
3
// Call setiOSVerifyViewStyle before scan
4
if (Platform.OS === 'ios') {
5
    CardVerify.setiOSVerifyViewStyle({
6
      'backButtonTintColor': '#000',
7
      'backButtonText': 'Close',
8
​
9
      'backgroundColor': '#FFC0CB',
10
      'backgroundColorOpacity': 0.5,
11
​
12
      'cardDetailExpiryTextColor': '#FFF',
13
      'cardDetailNameTextColor': '#FFF',
14
      'cardDetailNumberTextColor': '#FFF',
15
​
16
      'descriptionHeaderText': 'Scan Card',
17
      'descriptionHeaderTextColor': '#FFF',
18
      'descriptionHeaderTextFont': 'Avenir-Heavy',
19
      'descriptionHeaderTextSize': 30.0,
20
​
21
      'enableCameraPermissionText': "Enable your camera permissions",
22
      'enableCameraPermissionTextColor': '#000',
23
      'enableCameraPermissionTextFont': 'Avenir-LightOblique',
24
      'enableCameraPermissionTextSize': 20.0,
25
​
26
      'enableManualCardEntry': true,
27
​
28
      'instructionText': 'Please center your card in the middle',
29
      'instructionTextFont': 'Avenir-Light',
30
      'instructionTextColor': '#00ff00',
31
      'instructionTextSize': 20.0,
32
​
33
      'manualCardEntryText': 'Enter your card manually',
34
      'manualCardEntryTextColor': '#0000ff',
35
      'manualCardEntryTextFont': 'Avenir-BookOblique',
36
      'manualCardEntryTextSize': 25.0,
37
​
38
      'roiBorderColor': '#ff0000',
39
      'roiCornerRadius': 40.0,
40
​
41
      'torchButtonTintColor': '#000',
42
      'torchButtonText': 'Torch',
43
      'torchButtonPosition': 0 <topRight> | 1 <bottom>,
44
​
45
      'wrongCardText': 'This is the wrong card'
46
    });
47
}
48
​
49
const { action, scanId, payload, canceledReason } = await CardVerify.scan(bin, lastFour, true);
Copied!
Linking native dependencies
Troubleshooting
Last modified 9mo ago
Copy link
Contents
iOS UI Customization
Fonts
Available Customizations
Images
Localization