React Native SDK

The VLens React Native SDK wraps the full identity verification flow — national ID scanning, ID review, and liveness detection — in a single VLensView component with support for Arabic and English.

Requirements

• React Native 0.73+ or Expo SDK 50+
• Node 18+
• Android NDK 27.3.13750724
• iOS 14+

Installation

Install the SDK and its peer dependencies:

$
npm install @dev_vlens/react-native-vlens

Then install required peer dependencies:

$
npm install react-native-vision-camera \
>
  react-native-vision-camera-face-detector \
>
  react-native-worklets-core \
>
  react-native-reanimated \
>
  react-native-fs \
>
  react-native-image-resizer \
>
  react-native-sound-player

Platform setup

Expo

Add the VisionCamera plugin to your app.json:

1
{
2
  "expo": {
3
    "plugins": [
4
      [
5
        "react-native-vision-camera",
6
        {
7
          "cameraPermissionText": "Camera is required for identity verification"
8
        }
9
      ]
10
    ]
11
  }
12
}

Then rebuild your native project:

$
npx expo prebuild

Android

The v1.0.0 release includes full support for Google Play’s 16 KB page alignment requirement (mandatory from May 2025). A postinstall patch is applied automatically.

Ensure your project uses NDK 27.3.13750724 in android/local.properties or your build.gradle.

iOS

Run pod install after adding the peer dependencies:

$
cd ios && pod install

Add the camera permission to your Info.plist:

1
<key>NSCameraUsageDescription</key>
2
<string>Camera is required for identity verification</string>

Quick start

1
import React, { useState } from 'react';
2
import { VLensView } from '@dev_vlens/react-native-vlens';
3
4
export default function VerificationScreen() {
5
  return (
6
    <VLensView
7
      transactionId="YOUR_TRANSACTION_ID"
8
      isLivenessOnly={false}
9
      env={{
10
        apiBaseUrl: 'https://api.vlenseg.com',
11
        accessToken: 'USER_ACCESS_TOKEN',
12
        refreshToken: 'USER_REFRESH_TOKEN',
13
        apiKey: 'YOUR_API_KEY',
14
        tenancyName: 'YOUR_TENANT',
15
      }}
16
      defaultLocale="en"
17
      getExtractedData={true}
18
      onSuccess={(extractedData) => {
19
        console.log('Verified:', extractedData?.idFrontData?.name);
20
      }}
21
      onFaild={(errorCode, errorMsg) => {
22
        console.error(`Error ${errorCode}: ${errorMsg}`);
23
      }}
24
    />
25
  );
26
}

Configuration

env — environment credentials

VLensView — all props

colors — custom branding

1
colors={{
2
  accent: '#4E5A78',
3
  primary: '#397374',
4
  secondary: '#FF4081',
5
  background: '#FEFEFE',
6
  dark: '#000000',
7
  light: '#FFFFFF',
8
}}

Verification modes

1
<VLensView
2
  transactionId={transactionId}
3
  isLivenessOnly={false}
4
  isNationalIdOnly={false}
5
  getExtractedData={true}
6
  env={envConfig}
7
  defaultLocale="ar"
8
  onSuccess={(data) => console.log('Done', data)}
9
  onFaild={(code, msg) => console.error(code, msg)}
10
/>

Relation to the REST API

The SDK wraps the same REST endpoints documented in the Digital Identity guide:

Support

For issues or inquiries, contact support@vlenseg.com with your tenant name, the error code and message, and the SDK version.