> ## Documentation Index
> Fetch the complete documentation index at: https://docs.truv.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native SDK

> Truv Bridge SDK for React Native

**Package:** `@truv/react-native` | [npm](https://www.npmjs.com/package/@truv/react-native) | [Demo app](https://github.com/truvhq/demo-react-native)

## Install

```bash theme={null}
npm install @truv/react-native
```

Or with yarn:

```bash theme={null}
yarn add @truv/react-native
```

Run CocoaPods install for iOS after adding the package:

```bash theme={null}
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.

```typescript theme={null}
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.

```typescript theme={null}
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](/developers/sdks/bridge-events) for all event types, payloads, and error codes.

***

## Sample app

<Card title="React Native Demo" icon="react" href="https://github.com/truvhq/demo-react-native">
  Cross-platform demo for iOS and Android
</Card>

<Steps>
  <Step title="Clone the repo">
    Clone the demo app from GitHub and install dependencies.
  </Step>

  <Step title="Add your API keys">
    Copy your **Client ID** and **Access Secret** from the [Dashboard](https://dashboard.truv.com) into the app's configuration file.
  </Step>

  <Step title="Run in sandbox mode">
    Use [sandbox test credentials](/developers/testing/test-credentials) to simulate a full verification flow. Use the demo app as a reference to understand how the SDK works.
  </Step>

  <Step title="Integrate the SDK into your app">
    Follow the implementation guide above to add Truv Bridge to your own application.
  </Step>

  <Step title="Go live">
    Swap in production credentials in your app when ready.
  </Step>
</Steps>