Skip to main content
Package: @truv/react-native | npm | Demo app

​
Install

npm install @truv/react-native
Or with yarn: 
yarn add @truv/react-native
Run CocoaPods install for iOS after adding the package: 
cd ios && pod install

​
Embedded Orders

Use TruvOrder to embed an Order, a multi-connection verification workflow that supports multiple data sources and product types. 
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.
      }}
    />
  );
};

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

​
Bridge Widget

Use TruvBridge for single-connection flows like Direct Deposit Switch and Paycheck Linked Lending. 
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 — see Bridge Events for all types.
        // payload.eventType — one of TruvEventType enum values
      }}
    />
  );
};

const styles = StyleSheet.create({
  bridge: { flex: 1 },
});
See Bridge Events for all event types, payloads, and error codes.

​
Sample app

React Native Demo

Cross-platform demo for iOS and Android
1

Clone the repo

Clone the demo app from GitHub and install dependencies.
2

Add your API keys

Copy your Client ID and Access Secret from the Dashboard into the app’s configuration file.
3

Run in sandbox mode

Use sandbox test credentials to simulate a full verification flow. Use the demo app as a reference to understand how the SDK works.
4

Integrate the SDK into your app

Follow the implementation guide above to add Truv Bridge to your own application.
5

Go live

Swap in production credentials in your app when ready.