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:

{
  "expo": {
    "plugins": [
      [
        "react-native-vision-camera",
        {
          "cameraPermissionText": "Camera is required for identity verification"
        }
      ]
    ]
  }
}

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:

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

Quick start

import React, { useState } from 'react';
import { VLensView } from '@dev_vlens/react-native-vlens';
export default function VerificationScreen() {
  return (
    <VLensView
      transactionId="YOUR_TRANSACTION_ID"
      isLivenessOnly={false}
      env={{
        apiBaseUrl: 'https://api.vlenseg.com',
        accessToken: 'USER_ACCESS_TOKEN',
        refreshToken: 'USER_REFRESH_TOKEN',
        apiKey: 'YOUR_API_KEY',
        tenancyName: 'YOUR_TENANT',
      }}
      defaultLocale="en"
      getExtractedData={true}
      onSuccess={(extractedData) => {
        console.log('Verified:', extractedData?.idFrontData?.name);
      }}
      onFaild={(errorCode, errorMsg) => {
        console.error(`Error ${errorCode}: ${errorMsg}`);
      }}
    />
  );
}

Configuration

env — environment credentials

VLensView — all props

colors — custom branding

colors={{
  accent: '#4E5A78',
  primary: '#397374',
  secondary: '#FF4081',
  background: '#FEFEFE',
  dark: '#000000',
  light: '#FFFFFF',
}}

Verification modes

<VLensView
  transactionId={transactionId}
  isLivenessOnly={false}
  isNationalIdOnly={false}
  getExtractedData={true}
  env={envConfig}
  defaultLocale="ar"
  onSuccess={(data) => console.log('Done', data)}
  onFaild={(code, msg) => console.error(code, msg)}
/>

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.