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 Quiltt React Native SDK on Github.

Link to this section#Installation

$ npm install @quiltt/react
$ npm install @quiltt/react-native
# or
$ yarn add @quiltt/react
$ yarn install @quiltt/react-native

Link to this section#Setting up OAuth

To enable OAuth support, you will need to provide an https: URL that can open your application, using the oauthRedirectUrl prop. Make sure to register this URL with Quiltt.

To set up a deep link to your app, please see Expo Linking to your app.

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
# or
$ yarn add @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'

import { HomeScreen } from './screens/HomeScreen' // Your App HomeScreen
import { ConnectorScreen } from './screens/ConnectorScreen' // 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 { NavigationProp } from '@react-navigation/native'

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

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

export const ConnectorScreen = ({ navigation }: ConnectorScreenProps) => {
  return (
    <QuilttConnector
      connectorId="<CONNECTOR_ID>"
      oauthRedirectUrl="<YOUR_HTTPS_APP_LINK>"

      // 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')
      }}
    />
  )
}

Link to this section#Implementing Reconnect Flow

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

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

import type { ConnectorSDKCallbackMetadata } from '@quiltt/core'
import { QuilttConnector } from '@quiltt/react-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')
      }}
    />
  )
}
Flutter SDK →