React Native

📘

Sample Project

You can find the sample project for sample code for React-Native Integration.

1. Prerequisite

1.1 Android

The minSdkVersion is 21 and targetSdkVersion is set to 31 in IDWise Android SDK. It is recommended to install the Latest Android Studio on your development machine.

Build Setup

Add the following to your app-level build.gradle file located at projectRoot/android/app/build.gradle

android {
  ...
  defaultConfig {
    ...
    multiDexEnabled true
  }
  buildFeatures {
    ...
    dataBinding true
  }
}

Please Double check that mavenCentral() is added in your repositories, which is added by default if you create the new React-native Project.

repositories {
  ...
  mavenCentral()
}

To support Right-to-Left (Android)

Add the following attribute in the application tag in your project’s AndroidManifest.xml file located at /app/src/main/AndroidManifest.xml for the right-to-left language such as Arabic, Urdu and etc.

android:supportsRtl="true"

1.2 iOS

The minimum deployment target for IDWiseSDK is iOS 12.0. In order to use the SDK your application's minimum deployment target should be iOS 12.0 or higher.

2. Installation

Add the IDWiseSDK Plugin to your React Native project by running the following command in the root project

npm install idwise-react-native-sdk

yarn add idwise-react-native-sdk

3. React-Native Usage

Invoking IDWise SDK is very simple. First import IDWise package in your .js file from where you want to invoke IDWise SDK:

3.1 Required Imports

import {IDWise} from 'idwise-react-native-sdk/src/IDWise';
import {IDWiseSDKTheme} from 'idwise-react-native-sdk/src/IDWiseConstants';

3.2 Initializing the SDK

In order to use the SDK, we need to initialize it first with the <CLIENT_KEY> provided by IDWise. You can pre-load this on componentDidMount() if you want to. Here is how we can initialize the SDK.

const theme = IDWiseSDKTheme.SYSTEM_DEFAULT; //[LIGHT, DARK]
IDWise.initialize("<CLIENT_KEY>", theme, {
  onError(error) {
      console.log(' onInitializeError: ', error);
  }
});

initializeSDK method takes two parameters and one callback:

• clientKey: is a key provided to you by IDWise to authenticate your app with IDWise backend.
• theme: Theme of the IDWise's UI, Available options are "DARK", "LIGHT", and "SYSTEM_DEFAULT"

3.3 Starting the Journey

Now we can start the verification journey by calling startJourney(..) of the SDK like below. This will start the verification process and that's it.

IDWise.startJourney("<FLOW_ID>","<REFERENCE_NO>","<LOCALE>", journeyCallback);

This method takes the following parameters:

• flowId: (also called Journey Definition ID) This is a unique identifier that identifies your journey flow. IDWise shares this with you when you register to use IDWise system.
• referenceNo: (Optional) This parameter allows you to attach a unique identifier (such as a reference number) with the user undergoing the current journey. It's beneficial for connecting the journey to the user and/or the application that initiated it. You will receive this reference number in the webhook request.
• locale: (Optional)This refers to the ISO code representing the desired language for the user interface components. Please reach out to IDWise IDWise Support for the list of available languages.
• IDWiseSDKJourneyCallback: This is an implementation of an interface that consists of various step callback events.

3.4 Journey (Callbacks)

Throughout the journey, IDWise SDK sends back some events to the Hosting app. Here we can listen to those events:

const journeyCallback = {
  onJourneyStarted(data) {
    console.log('onJourneyStarted:', data);
  },
  onJourneyResumed(data) {
    console.log('onJourneyResumed:', data);
  },
  onJourneyFinished(data) {
    console.log('onJourneyFinished:', data);
  },
  onJourneyCancelled(data) {
    console.log('onJourneyCancelled:', data);
  },
  onError(data) {
    console.log('onError:', data);
  },
};

The journeyId, received in onJourneyStarted, can then be used by your backend code to securely get the result of the ID verification.