React Native

Before integrating Kvalifika, it is recommended to follow the steps described in Integration Guide and Initial Setup.
Naming of the properties and functions might be slightly modified depending on the version.
Installation
Add NPM dependency by running
1
npm install @kvalifika/react-native-sdk
Copied!
or
1
yarn add @kvalifika/react-native-sdk
Copied!
For React Native <0.60
If your React Native version is larger than >= 0.60, you can ignore this step. Otherwise, please run the following command:
react-native link @kvalifika/react-native-sdk
iOS Specific Steps
 Add sources to Podfile and use minimum iOS version 11.0
1
source 'https://github.com/CocoaPods/Specs.git'
2
source 'https://github.com/Kvalifika/kvalifika-cocoapods-specs.git'
3
source 'https://github.com/Kvalifika/zoom-cocoapods-specs.git'
4
​
5
platform :ios, '11.0'
Copied!
 Then navigate to ios folder and run pod install
pod install might take a long time!
App Permissions
Please add the following permissions to your app's Info.plist, so that the Kvalifika iOS SDK can access a user's camera to run a verification. You can do this in the property list view or by code. Right-click on Info.plist and select Open As -> Source Code. Add the lines below somewhere inside the file:
1
<!-- permission strings to be include in info.plist -->
2
<key>NSCameraUsageDescription</key>
3
<string>Please give us access to your camera, to complete the verification.</string>
4
<key>NSPhotoLibraryUsageDescription</key>
5
<string>Please give us access to your photo library to verify you.</string>
Copied!
Create Objective C Bridging Header
After the pods are installed, open your project's .xcworkspace file in Xcode. Add a blank Swift file to your project (File -> New -> Swift File), with a bridging header (it will prompt you to auto-create one).
Right-click on the project's name & select a new file.
Creating Objective C Bridging Header - new file
1.Choose and create an empty Swift file:
Creating Objective C Bridging Header - Swift file
2. Give the name to your file:
Creating Objective C Bridging Header - naming Swift file
3. Select Create Bridging Header:
Creating Objective C Bridging Header - final step
​
Android Specific Parts
After installing NPM package, please do the following steps to set up the Android environment:
1.Please add the following lines to android/build.gradle file:
1.Set minSdkVersion to 21 or higher
2.Add maven URL to repositories: maven { url 'https://s3.eu-central-1.amazonaws.com/com.kvalifika.sdk' }
Code Example
1
// Top-level build.gradle file
2
​
3
buildscript {
4
  ext {
5
    minSdkVersion = 21
6
  }
7
}
8
​
9
allprojects {
10
  repositories {
11
    google()
12
    jcenter()
13
    maven { url 'https://s3.eu-central-1.amazonaws.com/com.kvalifika.sdk' }
14
  }
15
}
Copied!
Initialize the SDK
1
import {
2
  KvalifikaSDK,
3
  KvalifikaSDKLocale,
4
  KvalifikaSDKError,
5
} from '@kvalifika/react-native-sdk';
Copied!
 After that, you need to initialize SDK inuseEffectwith your appId.
appId is Application ID, generated from Admin Panel. See Initial Setup for details.
1
const App = () => {
2
  useEffect(() => {
3
    KvalifikaSDK.initialize({
4
      appId: 'YOUR APP ID',
5
      locale: KvalifikaSDKLocale.EN,
6
    });
7
  }, []);
8
​
9
  return (
10
    <View>
11
      <Text>Kvalifika SDK Sample</Text>
12
    </View>
13
  );
14
};
Copied!
Start Verification
 Call KvalifikaSDK.startSession() on button press:
1
const App = () => {
2
  useEffect(() => {
3
    KvalifikaSDK.initialize({
4
      appId: 'YOUR APP ID',
5
      locale: KvalifikaSDKLocale.EN,
6
    });
7
  }, []);
8
​
9
  return (
10
    <View>
11
      <Button
12
        onPress={() => KvalifikaSDK.startSession()}
13
        title="Start Session"
14
      />
15
    </View>
16
  );
17
};
Copied!
Handling Verifications
It's useful to know that whether a user has completed the verification flow or canceled it. For this, you can implement the callback methods.
Callback Methods
​
Method
Description
onInitialize
This callback method is triggered when SDK is initialized.
onStart
This callback method is triggered when the user starts verification.
onFinish
This callback method is triggered when the user completes verification. Get session data here.
onError
This callback method is triggered on error  (see Error Codes for more information)
KvalifikaSDK uses NativeEventEmitter to communicate between Android and iOS native modules. Make sure to remove callbacks on unmount.
1
const App = () => {
2
  useEffect(() => {
3
    KvalifikaSDK.onInitialize(() => {
4
      Alert.alert('Kvalifika', 'Kvalifika SDK Initialized');
5
    });
6
​
7
    KvalifikaSDK.onStart(sessionId => {
8
      console.log(`Started with id: ${sessionId}`);
9
    });
10
​
11
    KvalifikaSDK.onFinish(sessionId => {
12
      Alert.alert('Kvalifika', `Session finished with id: ${sessionId}`);
13
    });
14
​
15
    KvalifikaSDK.onError((error, message) => {
16
      console.log(error, message);
17
​
18
      if (error === KvalifikaSDKError.INVALID_APP_ID) {
19
      }
20
​
21
      if (error === KvalifikaSDKError.USER_CANCELLED) {
22
      }
23
​
24
      if (error === KvalifikaSDKError.TIMEOUT) {
25
      }
26
​
27
      if (error === KvalifikaSDKError.USER_CANCELLED) {
28
      }
29
​
30
      if (error === KvalifikaSDKError.SESSION_UNSUCCESSFUL) {
31
      }
32
​
33
      if (error === KvalifikaSDKError.ID_UNSUCCESSFUL) {
34
      }
35
​
36
      if (error === KvalifikaSDKError.CAMERA_PERMISSION_DENIED) {
37
      }
38
​
39
      if (error === KvalifikaSDKError.LANDSCAPE_MODE_NOT_ALLOWED) {
40
      }
41
​
42
      if (error === KvalifikaSDKError.REVERSE_PORTRAIT_NOT_ALLOWED) {
43
      }
44
​
45
      if (error === KvalifikaSDKError.FACE_IMAGES_UPLOAD_FAILED) {
46
      }
47
​
48
      if (error === KvalifikaSDKError.DOCUMENT_IMAGES_UPLOAD_FAILED) {
49
      }
50
      
51
      if (error === KvalifikaSDKError.NO_MORE_ATTEMPTS) {
52
      }
53
​
54
      if (error === KvalifikaSDKError.UNKNOWN_INTERNAL_ERROR) {
55
      }
56
    });
57
​
58
    return () => {
59
      // Remove callbacks to avoid duplicate listeners if useEffect runs multiple times or remounts
60
      KvalifikaSDK.removeCallbacks();
61
    };
62
  }, []);
63
​
64
  useEffect(() => {
65
    KvalifikaSDK.initialize({
66
      appId: 'YOUR APP ID',
67
      locale: KvalifikaSDKLocale.EN,
68
    });
69
  }, []);
70
​
71
  return (
72
    <View>
73
      <Button
74
        onPress={() => KvalifikaSDK.startSession()}
75
        title="Start Session"
76
      />
77
    </View>
78
  );
79
};
Copied!
Error Codes
Error Code
Description
INVALID_APP_ID
Kvalifika App Id is incorrect
USER_CANCELLED
User canceled before completing verification.
TIMEOUT
Canceled due to inactivity.
SESSION_UNSUCCESSFUL
The Session was not performed successfully.
ID_UNSUCCESSFUL
The ID Scan was not performed successfully and identity document data was not generated.
CAMERA_PERMISSION_DENIED
Camera is required but access is prevented by user settings.
LANDSCAPE_MODE_NOT_ALLOWED
Verification was canceled because the device is in landscape mode.
REVERSE_PORTRAIT_NOT_ALLOWED
Verification was canceled because the device is in reverse portrait mode.
FACE_IMAGES_UPLOAD_FAILED
Could not upload face images. Internal request failed.
DOCUMENT_IMAGES_UPLOAD_FAILED
Could not upload ID card or passport images. Internal request failed.
NO_MORE_ATTEMPTS
User has reached maximum limit of attempts
UNKNOWN_INTERNAL_ERROR
Session failed because of an unhandled internal error. This error comes with a message.
UI Customizations
Appearance
It is possible to customize the logo and icons.
In React Native we need to add the images in android and ios subfolders in the project directory.
Open android subfolder in Android Studio and drag the image to res/drawable folder.
Open ios subfolder in XCode. Open Assets.xcassets folder and drag the image.
An image name in android and ios subfolders must match.
1
KvalifikaSDK.initialize({
2
  appId: 'YOUR APP ID',
3
  locale: KvalifikaSDKLocale.EN,
4
  logo: 'logo',
5
  documentIcon: 'document_icon',
6
  cancelIcon: 'cancel_icon',
7
  activeFlashIcon: 'active_flash_icon',
8
  inactiveFlashIcon: 'inactive_flash_icon',
9
});
Copied!
Language
It is possible to set locale when initializing SDK. Supported locales are:
Code
Language
EN
English
GE
Georgian
RU
Russian
SP
Spanish
1
KvalifikaSDK.initialize({
2
  appId: 'YOUR APP ID',
3
  locale: KvalifikaSDKLocale.EN,
4
});
Copied!
Development Mode
Without specifying mode SDK uses https://api.kvalifika.com​
With development mode ON SDK uses https://apistaging.kvalifika.com​
1
KvalifikaSDK.initialize({
2
  appId: 'YOUR APP ID',
3
  development: true,
4
});
Copied!
ProGuard (Android)
If ProGuard is used in Android release build, it is possible to add the following options to ProGuard file:
1
-keep class com.facetec.sdk.** { *; }
Copied!