QoreID React Native SDK
QoreID React Native SDK
Note
With this release (v1.2.2), 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
Using Expo?
If you are working with an Expo managed project perform the following tasks to generate android
and ios
folders to continue with the QoreID SDK integration.
npx expo prebuild
Install pod dependencies
//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/"
}
maven { url 'https://jitpack.io' }
}
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
import com.qoreidsdk.QoreidSdkModule;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
QoreidSdkModule.initialize(this);
}
override fun onCreate(savedInstanceState: Bundle) {
super.onCreate(savedInstanceState);
QoreidSdkModule.initialize(this);
}
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 { useQoreIdSdk } from '@qore-id/react-native-qoreid-sdk';
function App(){
const callback = (data: any) => {
console.debug(data);
};
const { launchQoreId } = useQoreIdSdk({
onResult: callback,
});
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'],
};
launchQoreId(formData);
}
return (
<View>
<Button title="Launch QoreIdSdk" onPress={onSubmit} />
</View>
);
}
Usage without hook
//verify.tsx
import React from 'react';
import { Button, View } from 'react-native';
import { QoreIdSdk } from '@qore-id/react-native-qoreid-sdk';
function App() {
const callback = (data) => {
console.debug(data);
};
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.launch(formData);
}
useEffect(() => {
const unsubscribe = QoreIdSdk.events(callback);
return () => {
unsubscribe();
};
}, []);
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"]
...
}
CHANGE LOGS
1.0.9
- We've added QoreID initialization function. You can now launch the SDK in your code implementation - offering you more control.
- Addition of event listener
QoreIdSdk.events
to listen to events from the SDK. - The QoreIdButton component will be deprecated in the next major release. Use
QoreIdSdk.launchQoreId
instead.
1.1.0 Breaking Changes
- Removed
QoreIdButton
component. UseQoreIdSdk.launch
instead. - QoreIdSdk is now available on iOS.
1.1.1 Changes to Event Handling in QoreIdSdk
To simplify event handling and improve code readability, we have refactored QoreID event listener to use useEffect
hook.
Previous Implementation:
QoreIdSdk.events(onSuccess, onError);
Updated Implementation:
useEffect(() => {
const unsubscribe = QoreIdSdk.events(callback);
return () => {
unsubscribe();
};
}, []);
1.2.0 Migrate to Android version 14 (breaking changes)
Requires app migration to the latest Android and react-native versions.
1.2.2 SDK update
Improve DX with hook provision.
Updated 13 days ago