React Native SDK

@pruva/react-native brings the verification widget into a React Native app. You get the same flow as the web widget, liveness, capture, and submission, presented in a full screen modal, with the result delivered to native callbacks. The widget runs inside a secure WebView served from Pruva. The camera, the liveness detection, and the capture all happen in that WebView, so nothing sensitive is reimplemented in your app, and improvements to the widget reach your app without an SDK update.

Works in Expo (development and EAS builds) and bare React Native. It does not run in Expo Go, which cannot grant the native camera access a WebView needs. Use a development build.

Install

npm install @pruva/react-native react-native-webview

react-native-webview is a peer dependency; install it in your app. On bare React Native iOS, run pod install afterwards:

cd ios && pod install

Camera permission

The widget needs the camera. The SDK grants the in-WebView camera request for you, but your app must hold the OS camera permission. This is the one platform step you cannot skip.

Bare React Native
Expo

iOS, in ios/YourApp/Info.plist:

<key>NSCameraUsageDescription</key>
<string>We use the camera to verify your identity.</string>

Android, in android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

In app.json:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "We use the camera to verify your identity."
      }
    },
    "android": { "permissions": ["CAMERA"] }
  }
}

On managed Expo, request the OS permission before opening the widget (for example with expo-camera’s requestCameraPermissionsAsync()), then use a development build rather than Expo Go.

Usage

The SDK offers two equivalent ways to open the widget: a hook, or a component.

import { usePruvaVerify } from '@pruva/react-native';
import { Button, View } from 'react-native';

export default function Onboarding() {
  const { open, PruvaModal } = usePruvaVerify({
    widgetKey: 'pub_your_widget_key',
    user: { firstName: 'Ada', lastName: 'Okafor', email: 'ada@example.com' },
    onComplete: ({ reference, result }) => {
      // Confirm the outcome on your server using reference.
    },
    onClose: ({ completed }) => {
      if (!completed) {
        // user backed out before finishing
      }
    },
  });

  return (
    <View>
      <Button title="Verify your identity" onPress={open} />
      <PruvaModal />
    </View>
  );
}

import { useState } from 'react';
import { Button, View } from 'react-native';
import { PruvaVerify } from '@pruva/react-native';

export default function Onboarding() {
  const [visible, setVisible] = useState(false);

  return (
    <View>
      <Button title="Verify your identity" onPress={() => setVisible(true)} />
      <PruvaVerify
        visible={visible}
        widgetKey="pub_your_widget_key"
        user={{ firstName: 'Ada', lastName: 'Okafor', email: 'ada@example.com' }}
        onComplete={({ reference, result }) => {
          // Confirm on your server using reference.
        }}
        onClose={() => setVisible(false)}
      />
    </View>
  );
}

The hook manages the modal’s visibility for you and returns open(), close(), and a PruvaModal component to render once. The component version is controlled: you own the visible state.

Props

Your public widget key (pub_...). Safe to ship in an app binary.

boolean

Controls the modal. Component only; the hook manages this.

object

{ firstName, lastName, email }. Optional; prefills the flow and attaches to the result.

string

Override the widget origin. Defaults to your Pruva app origin.

string

Override the API base the widget calls. Defaults to https://api.pruva.africa.

string

Hex color for the loading spinner, so it matches your brand from the first frame.

boolean

Show the live liveness numbers on screen, for testing.

Callbacks

function

({ widgetType }) when the widget has loaded and is ready.

function

() when the user begins the flow.

function

({ reference, result }) when a check finishes. reference is the verification id; result is passed, failed, or redirect.

function

({ message }) on an error.

function

({ completed }) once, when the modal dismisses. completed is true if a check finished, false if the user backed out.

Confirm the result on your server

onComplete gives you a reference and a client side result. Treat your server as the source of truth: before you grant access or mark a user verified, confirm the outcome from your backend with the reference.

curl https://api.pruva.africa/v1/verifications/THE_REFERENCE \
  -H "X-Pruva-Key: pruva_live_YOUR_KEY"

Do not trust the client result alone to make a security decision. The X-Pruva-Key call above runs on your server with your secret key and cannot be tampered with; the in app callback can. See Get a verification.

Public key, not API key

The widgetKey is a public key, built to live in a browser or an app binary. Never put a pruva_live_... API key in your app; that belongs on your server only. See Authentication.

Troubleshooting

Symptom	Cause and fix
Black screen where the camera should be	OS camera permission not granted. Check the Info.plist / manifest entries, and on Expo request permission before opening and use a development build, not Expo Go.
`react-native-webview is not installed`	Add the peer dependency, and on iOS run `pod install`.
Nothing happens on open	Confirm `widgetKey` is a valid `pub_...` key and the widget is active in your dashboard.

Get started

Core concepts

Verification scopes

Widgets & SDK

Guides

Reference

React Native SDK

Install

Camera permission

Usage

Props

Callbacks

Confirm the result on your server

Public key, not API key

Troubleshooting

​Install

​Camera permission

​Usage

​Props

​Callbacks

​Confirm the result on your server

​Public key, not API key

​Troubleshooting

Install

Camera permission

Usage

Props

Callbacks

Confirm the result on your server

Public key, not API key

Troubleshooting