UI customization guide

iOS UI Customization

You can customize SimpleScanViewController 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
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
instructionTextSize
A float describing the size of the instruction text
Float
20.0
20.0

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_scan_flash_on
Image of button to turn on flash
bouncer_scan_flash_off
Image of button to turn off flash
bouncer_scan_back
Image of button to go back
Screen Shot 2021-09-23 at 1 33 13 AM

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 setiOSScanViewStyle 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
'instructionText': 'Please center your card in the middle',
27
'instructionTextFont': 'Avenir-Light',
28
'instructionTextColor': '#00ff00',
29
'instructionTextSize': 20.0,
30
31
'roiBorderColor': '#ff0000',
32
'roiCornerRadius': 40.0,
33
34
'torchButtonTintColor': '#000',
35
'torchButtonText': 'Torch',
36
'torchButtonPosition': 0 <topRight> | 1 <bottom>,
37
});
38
}
39
40
const { action, scanId, payload, canceledReason } = await Cardscan.scan();
Copied!