Overview

Installation — npm/yarn setup for iOS and Android
Bridge — embed Truv Bridge and handle events
Order — embed a Truv Order and handle events

Installation

Install the package with npm:

npm install @truv/react-native

Or with yarn:

yarn add @truv/react-native

iOS

Run CocoaPods install after adding the package:

cd ios && pod install

Bridge

Use TruvBridge to embed Truv Bridge as a full-screen verification flow.

Usage

import { FC } from 'react';
import { StyleSheet, View } from 'react-native';
import TruvBridge, { TruvEventPayload, TruvSuccessPayload } from '@truv/react-native';

const BridgeScreen: FC<{ bridgeToken: string }> = ({ bridgeToken }) => {
  return (
    <TruvBridge
      bridgeToken={bridgeToken}
      style={styles.bridge}
      onLoad={() => {
        // Bridge finished loading
      }}
      onClose={() => {
        // User closed the Bridge
      }}
      onSuccess={(payload: TruvSuccessPayload) => {
        // Called when the Bridge closes after a successful task.
        // payload.publicToken — use this to retrieve data server-side.
        // payload.metadata.taskId — the task identifier.
      }}
      onEvent={(payload: TruvEventPayload) => {
        // Lifecycle event. For the full list of event types and
        // their payloads, see:
        // https://docs.truv.com/docs/event-reference-for-truv-bridge#onevent-types
        // payload.eventType — one of TruvEventType enum values
      }}
    />
  );
};

const styles = StyleSheet.create({
  bridge: { flex: 1 },
});

Order

Use TruvOrder to embed an Order — a customizable verification workflow that supports multiple data sources and product types.

Usage

import { FC } from 'react';
import { StyleSheet, View } from 'react-native';
import { TruvOrder, TruvEventPayload, TruvOrderEventPayload } from '@truv/react-native';

const OrderScreen: FC<{ bridgeToken: string }> = ({ bridgeToken }) => {
  return (
    <TruvOrder
      bridgeToken={bridgeToken}
      style={styles.order}
      onOrderEvent={(payload: TruvOrderEventPayload) => {
        switch (payload.eventType) {
          case "LOAD":
            // Order page finished loading
            break;

          case "CLOSE":
            // User closed the Order
            break;

          case "SUCCESS":
            // A task within the Order completed successfully.
            // The Order is still open at this point — it may show
            // a success screen or a self-certification screen
            // depending on the configuration.
            break;

          case "COMPLETED":
            // The entire Order is complete (all tasks finished)
            break;
        }
      }}
      onWidgetEvent={(payload: TruvEventPayload) => {
        // Fired when the user interacts with the Bridge for a
        // sub-order (task) within the Order.
        // Equivalent to TruvBridge onEvent.
        // See: https://docs.truv.com/docs/event-reference-for-truv-bridge#onevent-types
      }}
    />
  );
};

const styles = StyleSheet.create({
  order: { flex: 1 },
});