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