React Native SDK
Loading...
Loading...
Loading...
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.
@quiltt/react-native expects react, react-native,react-native-webview, base-64 and react-native-url-polyfill as peer dependencies.
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.
https://*.callback.quiltt.ioWhen 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.
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 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:
Important Notes:
ref prop is required when handling OAuth callbacksoauthRedirectUrl configurationTo 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.
The below example shows how to set up a ConnectorScreen component, using React Navigation to handle Connector callbacks.
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.
ConnectorScreen componentTo use the Reconnect Flow, simply supply a connectionId to the QuilttConnector component.
Use the useQuilttResolvable hook to check if external provider institution IDs (e.g., Plaid) are supported to your connector.
The example above will only render the Quiltt launcher button if your Plaid-enabled Connector supports connecting to Chase.
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