> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.vlenseg.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.vlenseg.com/_mcp/server.

# 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.

#### [npm](https://www.npmjs.com/package/@dev_vlens/react-native-vlens)

react-native-vlens · v1.0.0

#### React Native

RN 0.73+, Expo SDK 50+

#### Platforms

Android (API 26+), iOS 14+

---

## 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:

```bash
npm install @dev_vlens/react-native-vlens
```

Then install required peer dependencies:

```bash
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`:

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

Then rebuild your native project:

```bash
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:

```bash
cd ios && pod install
```

Add the camera permission to your `Info.plist`:

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

---

## Quick start

```tsx
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

| Parameter      | Type     | Description                                        |
| -------------- | -------- | -------------------------------------------------- |
| `apiBaseUrl`   | `string` | Vlens API base URL — use `https://api.vlenseg.com` |
| `accessToken`  | `string` | User JWT from registration or login                |
| `refreshToken` | `string` | Token used to refresh the access token             |
| `apiKey`       | `string` | Your tenant API key                                |
| `tenancyName`  | `string` | Your tenant name                                   |

### `VLensView` — all props

| Prop               | Type                  | Required | Default | Description                                     |
| ------------------ | --------------------- | -------- | ------- | ----------------------------------------------- |
| `transactionId`    | `string`              | Yes      | —       | Unique identifier for the transaction           |
| `env`              | `EnvironmentConfig`   | Yes      | —       | API credentials and endpoint                    |
| `isLivenessOnly`   | `boolean`             | Yes      | —       | Run liveness check only, skipping ID scan       |
| `onSuccess`        | `(data) => void`      | Yes      | —       | Called when verification completes successfully |
| `onFaild`          | `(code, msg) => void` | Yes      | —       | Called when verification fails                  |
| `isNationalIdOnly` | `boolean`             | No       | `false` | Run ID scan only, skipping liveness             |
| `defaultLocale`    | `string`              | No       | `"en"`  | UI language — `"en"` or `"ar"`                  |
| `getExtractedData` | `boolean`             | No       | `false` | Return OCR-extracted fields in `onSuccess`      |
| `colors`           | `ColorsConfig`        | No       | —       | Custom colour theme                             |
| `errorMessages`    | `array`               | No       | `[]`    | Override default error messages                 |

### `colors` — custom branding

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

---

## Verification modes

#### Full verification (default)

```tsx
<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)}
/>
```

#### Liveness only

```tsx
<VLensView
  transactionId={transactionId}
  isLivenessOnly={true}
  env={envConfig}
  onSuccess={() => console.log('Liveness passed')}
  onFaild={(code, msg) => console.error(code, msg)}
/>
```

#### ID scan only

```tsx
<VLensView
  transactionId={transactionId}
  isLivenessOnly={false}
  isNationalIdOnly={true}
  getExtractedData={true}
  env={envConfig}
  onSuccess={(data) => {
    const name = data?.idFrontData?.name;
    const idNumber = data?.idFrontData?.idNumber;
  }}
  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](/digital-identity):

| SDK mode          | REST flow                                                      |
| ----------------- | -------------------------------------------------------------- |
| Full verification | `verify/id/front` → `verify/id/back` → `verify/liveness/multi` |
| Liveness only     | `verify/liveness/multi`                                        |
| ID scan only      | `verify/id/front` → `verify/id/back`                           |

---

## Support

For issues or inquiries, contact [support@vlenseg.com](mailto:support@vlenseg.com) with your tenant name, the error code and message, and the SDK version.