React Native Components for Quiltt Connector
npm install @quiltt/react-native
@quiltt/react-native provides React Native Components for integrating Quiltt Connector into React Native and Expo applications.
For general project information and contributing guidelines, see the main repository README.
@quiltt/react-native expects react, react-native, react-native-webview, base-64 and react-native-url-polyfill as peer dependencies.
With npm:
``shell`
npm install base-64 react-native-webview react-native-url-polyfill
npm install @quiltt/react-native
With yarn:
`shell`
yarn add base-64 react-native-webview react-native-url-polyfill
yarn add @quiltt/react-native
With pnpm:
`shellnode-linker=hoistedMake sure to add
to your .npmrc when using pnpm in an Expo app.`
$ pnpm add base-64 react-native-webview react-native-url-polyfill
$ pnpm add @quiltt/react-native
For full SDK documentation and more code examples, see the Connector React Native guide.
Launch the Quiltt Connector in a webview.
@quiltt/react-native does not ship with a navigation library, so you might want to navigate to a new "page" when using QuilttConnector.
For better tree-shaking, you can import components from subpaths:
`tsx`
import { QuilttConnector } from '@quiltt/react-native/components'
#### Example
`tsx
import { QuilttProvider } from '@quiltt/react'
import { QuilttConnector } from '@quiltt/react-native'
import type { ConnectorSDKCallbackMetadata } from '@quiltt/react'
export const App = () => {
// See: https://www.quiltt.dev/authentication/issuing-session-tokens
const sessionToken = '
// Use a universal link or deep link to redirect back to your app
const oauthRedirectUrl = 'https://myapp.com/my_universal_link'
const handleExitSuccess = (metadata: ConnectorSDKCallbackMetadata) => {
console.log('Successfully created connection!', {
connectionId: metadata.connectionId,
})
}
return (
oauthRedirectUrl={oauthRedirectUrl}
// See the JavaScript API docs for the full list of available callbacks...
onExitSuccess={handleExitSuccess}
/>
)
}
export default App
`
When 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.
#### Example with Deep Link Handling
`tsx
import { useEffect, useRef } from 'react'
import { Linking, View } from 'react-native'
import { QuilttProvider } from '@quiltt/react'
import { QuilttConnector } from '@quiltt/react-native'
import type { ConnectorSDKCallbackMetadata, QuilttConnectorHandle } from '@quiltt/react-native'
export const ConnectorScreen = () => {
const connectorRef = useRef
const sessionToken = '
const oauthRedirectUrl = 'https://myapp.com/quiltt/callback'
// Listen for deep links and handle OAuth callbacks
useEffect(() => {
const subscription = Linking.addEventListener('url', (event) => {
console.log('Deep link received:', event.url)
// Check if this is an OAuth callback for Quiltt
if (event.url.includes('quiltt-connect/callback') || event.url.includes('quiltt/callback')) {
console.log('Processing Quiltt OAuth callback')
connectorRef.current?.handleOAuthCallback(event.url)
}
})
return () => subscription.remove()
}, [])
const handleExitSuccess = (metadata: ConnectorSDKCallbackMetadata) => {
console.log('Successfully created connection!', {
connectionId: metadata.connectionId,
})
}
return (
connectorId="
oauthRedirectUrl={oauthRedirectUrl}
onExitSuccess={handleExitSuccess}
/>
)
}
export default ConnectorScreen
`
Important Notes:
- The ref prop is required when handling OAuth callbacksoauthRedirectUrl
- The deep link URL pattern should match your configuration
- Make sure your app is properly configured to handle deep links (see React Native Linking documentation)
@quiltt/react-native is written in Typescript and ships with its own type definitions, as well as the type definitions from @quiltt/core.
This project is licensed under the terms of the MIT license. See the LICENSE file for more information.
For information on how to contribute to this project, please refer to the repository contributing guidelines.
- @quiltt/core - Essential functionality and types
- @quiltt/react` - React components and hooks