Quiltt Logo

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.

Documentation

For full documentation, additional examples and the source code, see the Quiltt React Native SDK on Github.

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.

$ npm install base-64 react-native-webview react-native-url-polyfill
$ npm install @quiltt/react-native

Link to this section#Setting up OAuth

For production Environments, you must pass a https:// URL to oauthRedirectUrl. This URL must be a valid deep link to launch your app.

To set up a deep link to your app, please see the Expo deep linking guide.

If you are bringing your own Plaid credentials, you must register the Quiltt callback URL as an allowed redirect URI in the Plaid Dashboard. See the Plaid OAuth guide for more information.
https://*.callback.quiltt.io

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.

$ npm install @react-navigation/native @react-navigation/native-stack

import { QuilttProvider } from '@quiltt/react'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

// Your App HomeScreen
import { ConnectorScreen } from './screens/ConnectorScreen'
import { HomeScreen } from './screens/HomeScreen'

// Screen for Quiltt Connector

const Stack = createNativeStackNavigator()

export const App = () => {
  return (
    <QuilttProvider token={'{SESSION_TOKEN}'}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen
            options={{ headerShown: false }}
            name="Connector"
            component={ConnectorScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </QuilttProvider>
  )
}

export default App

Link to this section#Implementing the ConnectorScreen component

import { QuilttConnector } from '@quiltt/react-native'
import type { NavigationProp } from '@react-navigation/native'

type ConnectorScreenProps = {
  navigation: NavigationProp<any, any>
}

export const ConnectorScreen = ({ navigation }) => {
  return (
    <QuilttConnector
      connectorId="<CONNECTOR_ID>"
      oauthRedirectUrl="<YOUR_HTTPS_APP_LINK>"
      // 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')}
    />
  )
}

import { QuilttConnector } from '@quiltt/react-native'
import type { NavigationProp } from '@react-navigation/native'

type ConnectorScreenProps = {
  navigation: NavigationProp<any, any>
}

export const ConnectorScreen = ({ navigation }) => {
  return (
    <QuilttConnector
      connectorId="<CONNECTOR_ID>"
      oauthRedirectUrl="<YOUR_HTTPS_APP_LINK>"
      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')}
    />
  )
}

Link to this section#Implementing Reconnect Flow

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

import { QuilttConnector } from '@quiltt/react-native'
import type { ConnectorSDKCallbackMetadata } from '@quiltt/core'
import type { NavigationProp } from '@react-navigation/native'

type ConnectorScreenProps = {
  navigation: NavigationProp<any, any>
}

export const ConnectorScreen = ({ navigation }: ConnectorScreenProps) => {
  return (
    <QuilttConnector
      connectorId="<CONNECTOR_ID>"
      connectionId="<CONNECTION_ID>"
      oauthRedirectUrl="<YOUR_HTTPS_APP_LINK>"
      // See the JavaScript API for the full list of available callbacks
      onExitSuccess={(metadata: ConnectorSDKCallbackMetadata) => {
        console.log('Successfully reconnected ' + metadata.connectionId)
        navigation.navigate('Home')
      }}
      onExitAbort={() => navigation.navigate('Home')}
    />
  )
}

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

Flutter →