React Native (Legacy)

📘

Sample Project

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

1. Requirements

1.1 iOS Requirements

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.
On your development machine, you need to have XCode and CocoaPods installed. Both Intel and M1 (Apple Silicon) based machines are supported. When working with Cocoapods you might have to run some commands through Rosetta Stone compatibility mode.

If you are building an iOS project on VSCode and using an M1 machine then It's recommended to use Xcode for iOS builds because VSCode does not support Rosetta mode and we need the Rosetta option on both terminal and Xcode to run our project without any Issues of linking architecture.

1.2 Android Requirements

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.

2. Installation

Please go through the following steps in order to the SDK available inside your React-Native application.

2.1 iOS Installation

To install pods in your React-Native project, first, go to projectfolder/ios. You can create a podfile If does not exist already by running the command "pod init" on the terminal by going into this iOS directory. If you already have a podfile, you can follow the following steps.

IDWiseSDK is available to install via CocoaPods package manager from the IDWise private Cocoapods repository.
To add IDWise SDK to your project, first, ensure you have these two lines at the top of your Podfile file:

source 'https://cdn.cocoapods.org/'
source 'https://github.com/idwise/ios-sdk'

This adds IDWise private Cocoapods repository as a source to install packages from

Next, add this line to your Podfile but this time underneath your target node for your project:

pod 'IDWise'

You can have a look at the example Podfile provided in the root of this repository to see an example Podfile with both the changes above completed

After adding our dependency in your Podfile run:

pod install

Linking

In order to Link the React Code with iOS, we need to create a swift class with objective-c bridging, let's call it IDWiseModule. You can find the sample IDWiseModule.swift for sample code. This class will act as a bridge between Swift and react native because react native's ios bridging code is written in objective-c so we have to mark our Swift class with @objc annotation.

We also need to create a header (.h) and an implementation file (.m) for our swift class with the same name as our swift class. In the header file, we do some native module imports and in the implementation file, we export our swift class and Its methods as module and methods respectively. You can find the sample of both of these files IDWiseModule.h and IDWiseModule.m respectively.

2.2 Android Installation

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
    }
  }

Finally, Add the following dependency in your app level build.gradle file located at projectRoot/android/app/build.gradle.
Replace the x.y.z with the Latest IDWise SDK version

dependencies {
 ...
 implementation 'com.idwise:android-sdk:x.y.z'
}

To support RTL

Add the following attribute in the application tag in your project’s AndroidManifest.xml file located at projectRoot/android/app/src/main/AndroidManifest.xml

android:supportsRtl="true"

Linking React Packages

In order to Link the React code with Android, we need to create a Module class, let’s call it IDWiseModule. You can find the sample IDWiseModule.java for sample code.

In order to use IDWiseModule we need to create a React Package class, let’s call it IDWisePackage. You can find the sample IDWisePackage.java for sample code.

Add both classes to your android application module. Now we can add IDWisePackage to our packages, to do this, we need to edit the MainApplication.java, located at projectRoot/android/your/package/name/../MainApplication.java. In getPackages() method, we need to add our Package like below. You can find the sample MainApplication.java for sample code.

@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();

  //add IDWisePackage here
  packages.add(new IDWisePackage());

  return packages;
}

3. React-Native Usage

Invoking IDWise SDK is very simple. First reterieve IDWiseModule from NativeModules in your .js file from where you want to invoke IDWise SDK:

const { IDWiseModule } = NativeModules;

3.1 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 = 'SYSTEM_DEFAULT'; //[ LIGHT, DARK, SYSTEM_DEFAULT ]
IDWiseModule.initialize("<CLIENT_KEY>", theme);

3.2 Starting the Journey

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

IDWiseModule.startJourney("<JOURNEY_DEFINITION_ID>","<REFERENCE_NO>","<LOCALE>");

3.3 Events (Callbacks)

Throughout the journey, IDWise SDK sends back some events to your app. Here are examples how to listen to these events:

These are the supported events:

• onJourneyStarted: Triggered when the journey is started and the Journey ID is assigned.
• onJourneyFinished: Triggered when the journey is completed by the user.
• onJourneyCancelled: Triggered when the user cancels the journey and doesn't finish it.
• onJourneyResumed: Triggered when an existing journey is resumed.
• onError: Triggered when an error occurs for example a network connectivity error and lack of permission to access the camera.

useEffect(() => {
  const eventEmitter = new NativeEventEmitter(NativeModules.IDWiseModule);

  eventEmitter.addListener("onError", (event) => {
    console.log(
      `An Error has occured  ${event.errorCode} : ${event.errorMessage}`
    );
  });

  eventEmitter.addListener("onJourneyStarted", (event) => {
    console.log(`Journey Started with id ${event.journeyId}`);
  });

  eventEmitter.addListener('onJourneyResumed', event => {
    console.log(`Journey Resumed with id ${event.journeyId}`);
  });

  eventEmitter.addListener("onJourneyFinished", (event) => {
    console.log(`Journey Completed with id ${event.journeyId}`);
  });

  eventEmitter.addListener("onJourneyCancelled", (event) => {
    console.log(`Journey Cancelled with id ${event.journeyId}`);
  });
}, []);