# React Native SDK
URL: https://www.quiltt.dev/connector/sdk/react-native
Description: Integrate Quiltt Connector into your React Native application with our React Native SDK. Learn how to install the package and get started with quick examples.
Navigation: connector → sdk → react-native
Tags: Connector, SDKs
Content Length: 11k characters

The [Quiltt React Native SDK](https://www.npmjs.com/package/@quiltt/react-native) provides Components for seamless integration of the Quiltt Connector into your React Native app.

This SDK currently supports iOS and Android.

Info - Documentation:
For full documentation, additional examples and the source code, see the [Quiltt React Native SDK
  on GitHub](https://github.com/quiltt/quiltt-sdks/tree/main/packages/react-native#readme).

## Installation

`@quiltt/react-native` expects `react`, `react-native`,`react-native-webview`, `base-64`, `react-native-url-polyfill` and `react-native-safe-area-context` as peer dependencies.

Code Examples:

  ```sh
    $ npm install base-64 react-native-webview react-native-url-polyfill react-native-safe-area-context
    $ npm install @quiltt/react-native
    ```
  ```sh
    $ pnpm add base-64 react-native-webview react-native-url-polyfill react-native-safe-area-context
    $ pnpm add @quiltt/react-native
    # If you're using pnpm with an Expo app, make sure to add `node-linker=hoisted` to your `.npmrc` file
    ```
  ```sh
    $ yarn add base-64 react-native-webview react-native-url-polyfill react-native-safe-area-context
    $ yarn add @quiltt/react-native
    ```

## Setting up OAuth

Quiltt always prioritizes OAuth-based connections, which require your user to provide consent on their institution's website or app, and then be redirected back to your app. This means that your application needs to be able to gracefully handle this redirect by returning them to the Connector flow in your app.

For production Environments, you must always pass a `https://` URL to `appLauncherUrl`. This URL must be a valid App Link (Android) or Universal Link (iOS) that can launch your app, like `https://app.mydomain.com/connect_bank`.

For more information, see Expo's guides on [Android App Links](https://docs.expo.dev/linking/overview/#android-app-links) and [iOS Universal Links](https://docs.expo.dev/linking/overview/#ios-universal-links).

For local development, you can use `http://`. If you're using Expo, we recommend running your dev server with [the `--tunnel` option](https://docs.expo.dev/more/expo-cli/#tunneling), which will give you a publicly-accessible URL that you can use as your `appLauncherUrl`.

```sh
npx expo start --tunnel
```

This will serve your app from a public URL like: `http://xxxxxxx.purple.19000.exp.direct:80`.

Plaid OAuth Note:

### Handling OAuth Deep Links (Android)

When users authenticate with financial institutions, they'll be redirected back to your app via a deep link. You need to listen for these deep links and pass them to the `QuilttConnector` to complete the OAuth flow.

Info - Platform Note:
This deep link handling is primarily needed for **Android**, where OAuth flows typically open in an external browser. On **iOS**, the OAuth flow usually stays within the app's web view, so this fallback mechanism may not be necessary. However, implementing it ensures consistent behavior across both platforms.

Some Android users may occasionally experience OAuth flows that never complete—they authenticate successfully with their bank but get stuck when redirecting back to your app. This happens because Android opens OAuth pages in an external browser (typically Chrome), and recent changes in how Chrome Custom Tabs and intents handle navigation have made it harder for the WebView to maintain state across this boundary.

To handle this, use the connector's `ref` API to forward OAuth callbacks:

```tsx

  // Create a ref to the connector
  const connectorRef = useRef<QuilttConnectorHandle>(null)

  const appLauncherUrl = 'https://myapp.com/quiltt/callback'

  // Listen for deep links and forward OAuth callbacks
  useEffect(() => {
    const subscription = Linking.addEventListener('url', (event) => {
      console.log('Deep link received:', event.url)

      // Check if this is an OAuth callback for Quiltt
      if (event.url.includes('quiltt/callback')) [console.log('Processing Quiltt OAuth callback')
        connectorRef.current?.handleOAuthCallback(event.url)]
    })

    return () => subscription.remove()
  }, [])

  return (
    

View:
<QuilttConnector
        ref={connectorRef}
        connectorId="<CONNECTOR_ID>"
        appLauncherUrl={appLauncherUrl}
        onExitSuccess={handleExitSuccess}
      />

  )
}
```

**Important Notes:**

- The `ref` prop is required when handling OAuth callbacks
- The deep link URL pattern should match your `appLauncherUrl` configuration

## Handling Authentication

To load the Connector for use by a pre-existing end-user, you'll need to pass a valid Session token. See the [Authentication guide](/authentication) for more information on generating Session tokens.

## Quickstart Example

The below example shows how to set up a `ConnectorScreen` component, using [React Navigation](https://reactnavigation.org/) to handle Connector callbacks.

### Set up the Provider Component

The `QuilttProvider` component is the easiest way to pass a Session token to your application. We recommend putting the component into its own screen so it can use up the entire mobile viewport.

Below is a simple example using [React Navigation](https://reactnavigation.org/), with a `HomeScreen` and `ConnectorScreen`.

Code Examples:

  ```sh
    $ npm install @react-navigation/native @react-navigation/native-stack
    ```
  ```sh
    $ pnpm add @react-navigation/native @react-navigation/native-stack
    ```
  ```sh
    $ yarn add @react-navigation/native @react-navigation/native-stack
    ```

---

```tsx

// Your App HomeScreen

// Screen for Quiltt Connector
const Stack = createNativeStackNavigator()

  const sessionToken = '<SESSION_TOKEN_FROM_SERVER>'

  return (
    

QuilttProvider:

NavigationContainer:
<Stack.Navigator>
          [Stack]
          [Stack]
        </Stack.Navigator>

  )]

```

### Implementing the `ConnectorScreen` component

```tsx

type ConnectorScreenProps = [navigation: NavigationProp<any, any>]

  const connectorRef = useRef<QuilttConnectorHandle>(null)
  const appLauncherUrl = '<YOUR_HTTPS_APP_LINK>'

  // Handle OAuth deep links (primarily needed for Android)
  useEffect(() => {
    const subscription = Linking.addEventListener('url', (event) => {
      if (event.url.includes('quiltt/callback')) [connectorRef.current?.handleOAuthCallback(event.url)]
    })

    return () => subscription.remove()
  }, [])

  return (
    

View:
<QuilttConnector
        ref={connectorRef}
        connectorId="<CONNECTOR_ID>"
        appLauncherUrl={appLauncherUrl}        
        themeMode="auto"       
        // See the JavaScript API for the full list of available callbacks
        onExitSuccess={(metadata: ConnectorSDKCallbackMetadata) => [console.log('Successfully connected ' + metadata.connectionId)
          navigation.navigate('Home')]}
        onExitAbort=[() => navigation.navigate('Home')]
      />

  )
}
```

### Pre-filled Institution Search

```tsx

  const connectorRef = useRef<QuilttConnectorHandle>(null)
  const appLauncherUrl = '<YOUR_HTTPS_APP_LINK>'

  useEffect(() => {
    const subscription = Linking.addEventListener('url', (event) => {
      if (event.url.includes('quiltt/callback')) [connectorRef.current?.handleOAuthCallback(event.url)]
    })

    return () => subscription.remove()
  }, [])

  return (
    

View:
<QuilttConnector
        ref={connectorRef}
        connectorId="<CONNECTOR_ID>"
        appLauncherUrl={appLauncherUrl}
        institution="<SEARCH_TERM>"
        // See the JavaScript API for the full list of available callbacks
        onExitSuccess={(metadata) => [console.log('Successfully connected ' + metadata.connectionId)
          navigation.navigate('Home')]}
        onExitAbort=[() => navigation.navigate('Home')]
      />

  )
}
```

### Implementing Reconnect Flow

To use the [Reconnect Flow](/connector/reconnect), simply supply a `connectionId` to the `QuilttConnector` component.

```tsx

  const connectorRef = useRef<QuilttConnectorHandle>(null)
  const appLauncherUrl = '<YOUR_HTTPS_APP_LINK>'

  useEffect(() => {
    const subscription = Linking.addEventListener('url', (event) => {
      if (event.url.includes('quiltt/callback')) [connectorRef.current?.handleOAuthCallback(event.url)]
    })

    return () => subscription.remove()
  }, [])

  return (
    

View:
<QuilttConnector
        ref={connectorRef}
        connectorId="<CONNECTOR_ID>"
        connectionId="<CONNECTION_ID>"
        appLauncherUrl={appLauncherUrl}
        // See the JavaScript API for the full list of available callbacks
        onExitSuccess={(metadata) => [console.log('Successfully reconnected ' + metadata.connectionId)
          navigation.navigate('Home')]}
        onExitAbort=[() => navigation.navigate('Home')]
      />

  )
}
```

### Checking Provider Institution Compatibility

Use the `useQuilttResolvable` hook to check if external provider institution IDs (e.g., Plaid) are supported to your connector.

Info:
Contact Quiltt Support to enable access to this feature.

```tsx

function ResolvableConnector([content]) {
  const [checkResolvable, isResolvable, isLoading] = useQuilttResolvable('my-connector-id')

  useEffect(() => {
    checkResolvable([plaid: plaidInstitutionId])
  }, [plaidInstitutionId])

  if (isLoading) return 

Text:
Checking...

  if (!isResolvable) return null

  return <>[content]</>
}

// Usage

ResolvableConnector:
[QuilttConnector]

```

The example above will only render the Quiltt launcher button if your Plaid-enabled Connector supports connecting to Chase.

### TypeScript

The React Native package comes bundled with the `@quiltt/core` package, which contains type definitions for all components and hooks.

See the [definition file on GitHub](https://github.com/quiltt/quiltt-sdks/blob/main/packages/core/src/api/browser.ts)