QoreID React Native SDK

📘
Note
With this release (v1.1.0), customers can perform all Collection services like VeriFind (digital address verification), Passport, Driver's License and other QoreID services on both Android iOS platforms.
npm Here is a RN bare example app

Installation

npm install --save  @qore-id/react-native-qoreid-sdk

yarn add @qore-id/react-native-qoreid-sdk

//in your project directory

cd ios
pod install

Android

Add the following to your app/build.gradle

    //before your dependencies
repositories {
  mavenCentral()
  google()
  maven {
    url "https://repo.qoreid.com/repository/maven-releases/"
  }
}

Add this snippet of code to your app/proguard-rules.pro

-keep class com.qoreid.sdk.** { *; }
-dontshrink
-dontobfuscate
-dontoptimize

If you do not have the file in your ~/app/ directory, create one and reference it in the ~/app/gradle.build release configuration as shown below

...
buildTypes {
        release {
            ...
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
...

Add this snippet of code to your ~/java/com.<app name>/MainActivity

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        QoreidSdkModule.initialize(this);
    }

Remember to import the library in MainActivity

import com.qoreidsdk.QoreidSdkModule;

Permissions

Certain services on QoreID require device permissions to work properly. Follow the instructions here to add the required permissions to your ~/android/app/src/main/AndroidManifest.xml file.

Verifind required permissions

...
<!-- Required for Verifind --> 
<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
...

iOS

Update your AppDelegate.m

QoreidSdK requires the UINavigationController to push a new ViewController to your app. To wrap your app's rootViewController in a UINavigationController, add the following code to your AppDelegate.m file.

//AppDelegate.m

// 1. Import necessary headers
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  
  // 2. Create an instance of UIWindow
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  
  // 3. Set up the UINavigationController with a UIViewController
  UIViewController *viewController = [UIViewController new];
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:viewController];
  [navigationController setNavigationBarHidden:YES animated:NO];
  
  // 4. Set the RN bridge to use the UIWindow as the root view controller
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:self.moduleName
                                            initialProperties:self.initialProps];
  viewController.view = rootView;
  self.window.rootViewController = navigationController; // Use the UINavigationController as the root
  
  [self.window makeKeyAndVisible];
  
  return YES;
}

...
@end

Permissions

Added the following to your ~/ios/<app name>/Info.plist file

...
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>We need access to your location to provide you with location-based services, even when the app is in the background.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need access to your location while you are using the app to provide you with location-based services.</string>
<key>NSCameraUsageDescription</key>
<string>We need access to your camera to take photos for profile pictures.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library to allow you to select and upload images.</string>
...

Usage

//verify.tsx
import React from 'react';
import { Button, View } from 'react-native';
import { QoreIdSdk } from '@qore-id/react-native-qoreid-sdk';

function App() {
    
  const onError = (data) => {
    console.error(data);
    Alert.alert('Error', data);
  };

  const onSuccess = (data) => {
    console.debug(data);
    Alert.alert('Sumitted', data);
  };

  QoreIdSdk.events(onSuccess, onError);

  function onSubmit() {
    const formData = {
      flowId: 0, /* Required for workflow */
      clientId: "", /* Required */
      productCode: "", /* Required for collection */
      customerReference: "", /* Required */
      applicantData: {
        firstName: "",
        middleName: "",
        lastName: "",
        gender: "",
        phoneNumber: "",
        email: "",
      },
      identityData: {
        idType: "",
        idNumber: "",
      },
      addressData: {
        address: "",
        city: "",
        lga: "",
      },
      ocrAcceptedDocuments:
        'DRIVERS_LICENSE_NGA,VOTERS_CARD_NGA,NIN_SLIP_NGA,PASSPORT_NGA',
    };

    QoreIdSdk.launchQoreId(formData);
  }

  return (
    <View>
      <Button title="Launch QoreIdSdk" onPress={onSubmit} />
    </View>
  );
}

Utilities

QoreId SDK exposes utilities that you can easily use


import React, {useRef} from 'react'
import { QoreIdButton, utils } from '@qore-id/react-native-qoreid-sdk';

function App() {

   // Array of string
   //For more information check -> https://docs.qoreid.com/docs/product-codes
   const productIds = utils.productCodes; 


   //An array of accepted documents in a specific country
   //For more information check -> https://docs.qoreid.com/docs/ocr-accepted-documents#accepted-documents-for-ocr-verifications
   const ocrLists = utils.acceptedDocuments["Nigeria"]
    ...
}