React Native

The Vrtx React Native wrapper allows a React Native application to launch Vrtx SDK flows from a JavaScript interface.

The wrapper relies on the native Vrtx iOS and Android SDKs. Regulated wallet flows, onboarding, authentication, compliance controls, and financial operations continue to be handled by the native SDK layer and Vrtx backend.

Official GitHub repository

The React Native wrapper is available in the official Vrtx GitHub repository: https://github.com/vrtx-fintech/vrtx-react-native

Requirements

The React Native wrapper requires the native iOS and Android SDK requirements to be met.

iOS

Requirement	Version
iOS	15.6+
Xcode	16+
Swift	5.9+

Android

Requirement	Version
Android `minSdk`	29
Android `compileSdk`	36
Android Gradle Plugin	8.13
Kotlin	2.1
JVM target	17

Installation

Install the package using npm.

bash

npm install vrtx-react-native

Public API Contract

The React Native API mirrors the Android SDK public enums.

Parameter	Enum	Values
`environment`	`Environment`	`Environment.Sandbox`, `Environment.Staging`
`language`	`Language`	`Language.English`, `Language.Arabic`
`mode`	`Mode`	`Mode.LIGHT`, `Mode.DARK`
`externalReference`	`String`	Omit when no external reference is needed

fontFamily may be passed with the name of a font already bundled in the host app.

Quick Start

Import the setup method, public enums, and event helpers from the package.

typescript

import {
  Environment,
  Language,
  Mode,
  onError,
  onSuccess,
  setup,
} from 'vrtx-react-native';

const successSubscription = onSuccess(() => {
  console.log('Vrtx screen opened');
});

const errorSubscription = onError((error) => {
  console.error('Vrtx error:', error.code, error.message);
});

await setup({
  clientId: 'your-client-id',
  clientSecret: 'your-client-secret',
  environment: Environment.Sandbox,
  language: Language.English,
  mode: Mode.LIGHT,
  externalReference: 'your-external-reference',
});

// Remove listeners when they are no longer needed.
successSubscription.remove();
errorSubscription.remove();

The externalReference is your own identifier for your SDK user. It can be your users employee_id for instance. It is optional and can be omitted if not used.

Security note

Never hard-code clientSecret or real production credentials in source control.

Font customization

If your app already bundles a supported font, pass the font family name in fontFamily. The SDK applies the font where supported.

Events

The wrapper exposes helper methods for success and error events.

Helper	Callback Payload
`onSuccess`	`() => void`
`onError`	`(error: { code: string; message: string }) => void`

Both helpers return a subscription with a remove() method.

Best practice

How It Works

Install Package

Install the Vrtx React Native package in your app.

Configure App

Pass your client credentials, environment, language, and display mode.

Launch SDK

Call setup from your React Native app.

Handle Events

Listen for success and error events returned by the SDK.

Native Layer

The React Native wrapper bridges into the native Vrtx SDKs.

iOS SDK

Review iOS requirements, framework setup, Info.plist, Nafath, Face ID, and NFC configuration.

Android SDK

Review Android requirements, Maven Central setup, Gradle dependency, and Kotlin configuration.

Native setup still applies

Because this package wraps the native SDKs, the host app must still satisfy the required iOS and Android setup for the flows it enables.

Support

For credentials, license keys, or integration support, contact your Vrtx account manager or email support@vrtx.sa.