@shekhar.gupta/wrapper-rn v3.2.0-ga-1

Predictive DocV SDK v3 React Native

The Predictive Document Verification (DocV) SDK v3 for React Native is a React Native wrapper that allows you to use the DocV SDK for Android and iOS in your React Native application.

Minimum Requirements

React Native

• React Native CLI. See the React Native docs for instructions on how to set up your development environment.

iOS

• Support for iOS 13 and later
• Xcode version 13+

Android

• Android SDK Version 22 (OS Version 5.1) and later
• Android SDK is compiled with compileSdkVersion 32 and Java 11

Getting started

To get started, complete the steps in the following sections:

• Install the React Native wrapper with NPM
• Configure your iOS or Android app
• Import and launch the SDK

Install the React Native wrapper with NPM

In your React Native project, install the DocV React Native wrapper by running the following NPM command:

npm install @socure-inc/docv-react-native

Configure your iOS or Android app

Your React Native project needs to access the DocV iOS or Android SDKs through the React Native wrapper. Follow the instructions in the drop down menus below to integrate the DocV SDK into your iOS or Android app.

Configure your iOS app

For the iOS app, you can install the DocV iOS SDK into your project using Cocoapods. If you do not already have the CocoaPods tool installed, see the CocoaPods Getting Started guide.

Add project dependencies

In your root project folder, open your Podfile with a text editor and specify the following project dependencies:

• Replace the deployment target with platform :ios, '13.0'.
• Add the line pod 'socure-docv-react-native', :path => '../node_modules/@socure-inc/docv-react-native'

Once completed, your Podfile should look like the following example:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '13.0'
install! 'cocoapods', :deterministic_uuids => false

production = ENV["PRODUCTION"] == "1"

target 'SocureDocVDemo' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :production => production,
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    :flipper_configuration => FlipperConfiguration.enabled,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'SocureDocVDemoTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end

pod 'socure-docv-react-native', :path => '../node_modules/@socure-inc/docv-react-native'

end

Install the dependencies

Change the location of your working directory to the iOS folder:

cd ios

Install the Cocoapods dependencies by running the following command:

pod install

Use the CocoaPods-generated .xcworkspace file

The CocoaPods installation command generates a .xcworkspace file with all the dependencies configured. To continue with the installation, complete the following:

• Close Xcode and then open your project's .xcworkspace file to launch Xcode. From now on, use the .xcworkspace to open your project.
• Check that your deployment target is set to iOS 13 or later.

Request camera permissions

The DocV iOS SDK requires a device's camera permission to capture identity documents. Upon the first invocation of the SDK, the app will request camera permission from the consumer. If the app does not already use the camera, you must add the following to the app’s Info.plist file:

Note: We recommend you check for camera permission before calling the SocureDocV SDK’s launch API. 

Run the app

Using the command line, go to your root project folder and enter the following command to run the app:

"react-native run-ios"

For the Android app, add your project dependencies by going to the module level build.gradle file and making sure the minSdkVersion is set to at least 22 and the compileSdkVersion is set to at least 32.

buildscript {
              .....
            ext {
                 ....
                minSdkVersion = 22 
                compileSdkVersion = 32
                .....
            }
}

Camera permissions

The DocV Android SDK requires camera permission to capture identity documents. Upon the first invocation of the SDK, your app will request camera permission from the user.

Note: We recommend you check for camera permissions before calling the Socure DocV SDK’s launch API.

Required permissions

Ensure that your app manifest has been set up properly to request the following required permissions:

<uses-feature android:name="android.hardware.camera" />

<!-- Declare permissions -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Run the app

From the command line, go to your root project folder and enter the following command to run the app:

react-native run-android

Import and launch the SDK

After you have installed the DocV SDK React Native wrapper using NPM and configured your iOS or Android app, add the following code to your App.js file to import launchSocureDocV:

import { launchSocureDocV } from "@socure-inc/docv-react-native"

To launch the Socure DocV SDK, specify your SDK key and call the launchSocureDocV launch function:

launchSocureDocV("SOCURE_SDK_KEY", flow, onSuccess, onError);

How it works

Your React Native application initializes and communicates with the DocV SDK through the React Native wrapper using the launchSocureDocV instance. The launchSocureDocV function also includes two callback functions, one for onSuccess and one for onError. See Response callbacks below for more information.

The following table lists the available launchSocureDocV properties:

Response callbacks

Your app can receive a response callback from the Socure DocV SDK when the flow completes successfully or returns with an error using the onSuccess and onError callback functions.

onSuccess response

When the consumer successfully completes the flow and the captured images are uploaded, the onSuccess callback receives the ScannedData object which contains session information and the extracted data. The table below lists the available ScannedData properties.

Sample onSuccess response

{
  "docUUID": "UUID for the uploaded scanned images",
  "sessionId": "Session ID for the particular scan session",
  "extractedData": {
    "address": "123 TAYLOR AVE",
    "issueDate": "09282007",
    "parsedAddress": {
      "city": "SAN BRUNO",
      "country": "USA",
      "physicalAddress": "123 TAYLOR AVE",
      "physicalAddress2": "SAN BRUNO",
      "postalCode": "940660000",
      "state": "CA"
    },
    "dob": "07221977",
    "documentNumber": "D12345",
    "expirationDate": "07222022",
    "firstName": "SAM",
    "fullName": "SAM SOTO",
    "type": "barcode"
  },
  "captureData": {
    "lic_front": "auto",
    "lic_back": "auto",
    "passport": "auto",
    "selfie": "manual"
  },
  "capturedImages": {
    "lic_front": "base64 Image as String",
    "lic_back": "base64 Image as String",
    "selfie": "base64 Image as String"
  }
}

onError response

If the consumer exits the flow without completing it or the SDK encounters an error, the onError callback receives the ScanError object which contains session information and the error. The table below lists the available ScanError properties.

Sample onError response

{
  "capturedImages": {
    "passport": "base64 Image as String"
  },
  "errorMessage": "Scan canceled by the user",
  "sessionId": "2a55f9-42bgfa-4fb3-9gf32e-6a6fec5",
  "statusCode": "7104"
}

Error codes

The following table lists the errors that can be returned by Socure DocV SDK: