QoreID React Native SDK
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"]
...
}
Updated about 2 months ago