React Native SDK guide

Requirements and prerequisites

Requirements

Integration with Veriff React Native SDK requires the project to target:

• iOS minimum version 13.4 or higher

• Android minimum version 8.0 (api 26) or higher

When using Expo

If you have created your react native app using Expo, you will have to eject out of Expo at this point (if you have not ejected out already) since Expo does not support native modules.

See the React Native’s Get Started with React Native[↗] for more info.

Add SDK to the project

Step 1: Add the Veriff React Native SDK

Either to your package.json file:

npx yarn add @veriff/react-native-sdk

Or if using npm:

npm install @veriff/react-native-sdk --save

Step 2: Update Android build.gradle file

Open the root build.gradle file in the android folder and add a new Maven destination to the repositories in the allprojects section. The best place is right after the local node_modules repositories and before the google() repository.

allprojects {
    repositories {
        // ... local react native repos
        maven { url = uri("https://cdn.veriff.me/android/") } //veriff
        google()
        jcenter()
    }
}

allprojects {
    repositories {
        // ... local react native repos
        maven { url "https://cdn.veriff.me/android/" } //veriff
        google()
        jcenter()
    }
}

Add permissions

iOS specific configuration

Add Swift to the ios module

Veriff SDK requires your ios module to have some Swift code. If you do not have any Swift code yet then add a new empty.swift file in Xcode. If Xcode offers to add a bridging header then add it.

Update iOS Podfile

Open Podfile in the ios folder and make sure that platform is 13.4 or higher:

platform :ios, '13.4'

Also make sure your main target in the Podfile contains use_native_modules! directive:

target 'MyApp' do
  # pod 'foo'...

  config = use_native_modules!
end

Not adding these permissions will cause the system to shut down the application when it requests the permissions.

<key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
<array>
	<string>D23300000045737445494420763335</string>
	<string>A0000002471001</string>
	<string>A0000002472001</string>
	<string>00000000000000</string>
</array>

<key>com.apple.developer.nfc.readersession.formats</key>
<array>
    <string>TAG</string>
</array>

Set the iOS target in Xcode

Make sure that the iOS Deployment Target in Xcode (under Project > target > Info > Deployment Target) is set to iOS 13.0 or later.

Start a verification flow

Step 1: Import Veriff in your code

Import it to the file that will use the React Native SDK.

import VeriffSdk from '@veriff/react-native-sdk';

Step 2: Start the verification flow

Launch Veriff using the defined parameters below:

import VeriffSdk from '@veriff/react-native-sdk';

What happens after the end-user leaves the flow?

When the end-user leaves the verification flow, i.e. a session is canceled or finished, the Veriff SDK is closed. The end-user is taken back to your application. The end-user flow completion status is returned to the host application, see Verification session status explanation below for more info.

Verification session status

The result returned by launchVeriff will have a status field that is one of either VeriffSdk.statusDone, VeriffSdk.statusCanceled or VeriffSdk.statusError.

In case of statusError there will be a error code (not human-readable) in the error field.

This is not the verification session decision.

This indicates whether the end-user was able to complete all the steps in the verification flow or not.

var result = await VeriffSdk.launchVeriff({ sessionUrl: SESSION_URL });
switch (result.status) {
  case VeriffSdk.statusDone:
    // end-user submitted the images and completed the flow
    // note that this does not mean a final decision yet
    break;
  case VeriffSdk.statusCanceled:
    // end-user canceled the flow before completing
    break;
  case VeriffSdk.statusError:
    // the flow could not be completed due to an error
    console.log("Veriff verification failed with error=" + result.error);
    break;
}

Verification session decision

Veriff returns info about the verification session decision, extracted data, registries checks etc via webhooks. You need to set up webhooks and tie them to your system.

Customize the SDK

SDK customization is optional

It is possible to customize the look and feel of the UI to match your branding. You can change primitives such as colors and fonts, set the language settings for the SDK, and change if/how an intro screen is displayed.

Match the brand

Veriff React Native SDK allows the customization of your brand's colors, font and logo in the SDK flow.

Note: all custom values for branding are optional. If a value is not provided for them, the default Veriff color and logo will be used.

Pass the optional parameters when launching Veriff:

var result = await VeriffSdk.launchVeriff({
    sessionUrl: SESSION_URL,
    branding: {
      logo: 'parrot', // see alternative options for logo below
      background: '#ff00ff',
      onBackground: '#ffffff',
      onBackgroundSecondary: '#ff00ff',
      onBackgroundTertiary: '#000000',
      primary: '#333333',
      onPrimary: '#444444',
      secondary: '#333333',
      onSecondary: '#444444',
      outline: '#444444',
      cameraOverlay: '#59496a',
      onCameraOverlay: '#e27e23',
      error: '#333333',
      success: '#444444',
      buttonRadius: 28,
      iOSFont: {
        regular: 'Font-Regular',
        medium: 'Font-Medium',
        bold: 'Font-Bold',
      },
      androidFont: {
        regular: 'font_regular',
        medium: 'font-medium',
        bold: 'font_bold',
      }
    },
  });

For logo, the image assets need to be added into:

• Xcode assets in the iOS project, and

• drawable folders in the Android project

In the example above you would need to add an image asset named 'parrot' into Xcode assets and 'parrot.png' to Android drawable folder android/src/main/res.

Alternative ways to provide the logo

Instead of using platform-specific image assets, you can provide a URI to an image which will then be used:

var result = await VeriffSdk.launchVeriff({
    sessionUrl: SESSION_URL,
    branding: {
      logo: { uri: 'http://example.com/logo/parrot.jpg' },
    },
  });

React Native assets are also supported through resolveAssetSource:

const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
const parrot = require('./img/parrot.png');

var result = await VeriffSdk.launchVeriff({
    sessionUrl: SESSION_URL,
    branding: {
      logo: resolveAssetSource(parrot),
    },
  });

Intro screen

In some cases, it is possible to replace the Veriff’s generic introduction screen with a custom intro screen.

Check with your Solutions Engineer to confirm if this feature can be enabled for your integration

If it is possible, the the following will happen:

• You agree your own introduction screen visuals and copy with our Solutions Engineer and get relevant legal documents signed in case they are needed

• After that Veriff will enable custom introduction screen from backend for your integrations

• After you have implemented your own introduction screen you can change the configuration option specified below

var result = await VeriffSdk.launchVeriff({
    sessionUrl: SESSION_URL,
    locale: 'et',
    customIntroScreen: true
  });

Adding the configuration alone in your app is not enough to enable the custom intro screen. Make sure to contact your solutions engineer so they can enable the feature for your integration.

User interface language settings

The Veriff RN SDK allows setting the language of the SDK. In order to use this language, pass the locale as in example below.

var result = await VeriffSdk.launchVeriff({
    sessionUrl: SESSION_URL,
    locale: 'et'
  });