React Native

This will guide you to integrate the Kvalifika SDK into your React Native project

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

npm install @kvalifika/react-native-sdk

or

yarn add @kvalifika/react-native-sdk

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

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/Kvalifika/kvalifika-cocoapods-specs.git'
source 'https://github.com/Kvalifika/zoom-cocoapods-specs.git'

platform :ios, '11.0'

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:

<!-- permission strings to be include in info.plist -->
<key>NSCameraUsageDescription</key>
<string>Please give us access to your camera, to complete the verification.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Please give us access to your photo library to verify you.</string>

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.

  1. Choose and create an empty Swift file:

2. Give the name to your file:

3. Select Create Bridging Header:

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

// Top-level build.gradle file

buildscript {
  ext {
    minSdkVersion = 21
  }
}

allprojects {
  repositories {
    google()
    jcenter()
    maven { url 'https://s3.eu-central-1.amazonaws.com/com.kvalifika.sdk' }
  }
}

Initialize the SDK

import {
  KvalifikaSDK,
  KvalifikaSDKLocale,
  KvalifikaSDKError,
} from '@kvalifika/react-native-sdk';

After that, you need to initialize SDK inuseEffectwith your appId.

appId is Application ID, generated from Admin Panel. See Initial Setup for details.

const App = () => {
  useEffect(() => {
    KvalifikaSDK.initialize({
      appId: 'YOUR APP ID',
      locale: KvalifikaSDKLocale.EN,
    });
  }, []);

  return (
    <View>
      <Text>Kvalifika SDK Sample</Text>
    </View>
  );
};

Start Verification

Call KvalifikaSDK.startSession() on button press:

const App = () => {
  useEffect(() => {
    KvalifikaSDK.initialize({
      appId: 'YOUR APP ID',
      locale: KvalifikaSDKLocale.EN,
    });
  }, []);

  return (
    <View>
      <Button
        onPress={() => KvalifikaSDK.startSession()}
        title="Start Session"
      />
    </View>
  );
};

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

KvalifikaSDK uses NativeEventEmitter to communicate between Android and iOS native modules. Make sure to remove callbacks on unmount.

const App = () => {
  useEffect(() => {
    KvalifikaSDK.onInitialize(() => {
      Alert.alert('Kvalifika', 'Kvalifika SDK Initialized');
    });

    KvalifikaSDK.onStart(sessionId => {
      console.log(`Started with id: ${sessionId}`);
    });

    KvalifikaSDK.onFinish(sessionId => {
      Alert.alert('Kvalifika', `Session finished with id: ${sessionId}`);
    });

    KvalifikaSDK.onError((error, message) => {
      console.log(error, message);

      if (error === KvalifikaSDKError.INVALID_APP_ID) {
      }

      if (error === KvalifikaSDKError.USER_CANCELLED) {
      }

      if (error === KvalifikaSDKError.TIMEOUT) {
      }

      if (error === KvalifikaSDKError.USER_CANCELLED) {
      }

      if (error === KvalifikaSDKError.SESSION_UNSUCCESSFUL) {
      }

      if (error === KvalifikaSDKError.ID_UNSUCCESSFUL) {
      }

      if (error === KvalifikaSDKError.CAMERA_PERMISSION_DENIED) {
      }

      if (error === KvalifikaSDKError.LANDSCAPE_MODE_NOT_ALLOWED) {
      }

      if (error === KvalifikaSDKError.REVERSE_PORTRAIT_NOT_ALLOWED) {
      }

      if (error === KvalifikaSDKError.FACE_IMAGES_UPLOAD_FAILED) {
      }

      if (error === KvalifikaSDKError.DOCUMENT_IMAGES_UPLOAD_FAILED) {
      }
      
      if (error === KvalifikaSDKError.NO_MORE_ATTEMPTS) {
      }

      if (error === KvalifikaSDKError.UNKNOWN_INTERNAL_ERROR) {
      }
    });

    return () => {
      // Remove callbacks to avoid duplicate listeners if useEffect runs multiple times or remounts
      KvalifikaSDK.removeCallbacks();
    };
  }, []);

  useEffect(() => {
    KvalifikaSDK.initialize({
      appId: 'YOUR APP ID',
      locale: KvalifikaSDKLocale.EN,
    });
  }, []);

  return (
    <View>
      <Button
        onPress={() => KvalifikaSDK.startSession()}
        title="Start Session"
      />
    </View>
  );
};

Error Codes

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.

KvalifikaSDK.initialize({
  appId: 'YOUR APP ID',
  locale: KvalifikaSDKLocale.EN,
  logo: 'logo',
  documentIcon: 'document_icon',
  cancelIcon: 'cancel_icon',
  activeFlashIcon: 'active_flash_icon',
  inactiveFlashIcon: 'inactive_flash_icon',
});

Language

It is possible to set locale when initializing SDK. Supported locales are:

KvalifikaSDK.initialize({
  appId: 'YOUR APP ID',
  locale: KvalifikaSDKLocale.EN,
});

Development Mode

Without specifying mode SDK uses https://api.kvalifika.com

With development mode ON SDK uses https://apistaging.kvalifika.com

KvalifikaSDK.initialize({
  appId: 'YOUR APP ID',
  development: true,
});

ProGuard (Android)

If ProGuard is used in Android release build, it is possible to add the following options to ProGuard file:

-keep class com.facetec.sdk.** { *; }

Last updated