React Native SDK

The Quiltt React Native SDK provides Components for seamless integration of the Quiltt Connector into your React Native app.

This SDK currently supports iOS and Android.

Link to this section#Installation

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

Link to this section#Setting up OAuth

Quiltt always prioritizes OAuth-based connections, which require your user to be 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 Connector flow in your app.

For production Environments, you must always pass a https:// URL to oauthRedirectUrl. 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.

More more information see Expo's guides on Android App Links and 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, which will give you a publicly-accessible URL that you can use to construct your oauthRedirectUrl.

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

Link to this section#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 for more information on generating Session tokens.

Link to this section#Quickstart Example

The below example shows how to set up a ConnectorScreen component, using React Navigation to handle Connector callbacks.

Link to this section#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, with a HomeScreen and ConnectorScreen.

Link to this section#Implementing the ConnectorScreen component

Link to this section#Pre-filled Institution Search

Link to this section#Implementing Reconnect Flow

To use the Reconnect Flow, simply supply a connectionId to the QuilttConnector component.

Link to this section#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