@quiltt/react-native provides React Native Components for integrating Quiltt Connector into React Native and Expo applications.
@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
# or
$ yarn add base-64 react-native-webview react-native-url-polyfill
$ yarn add @quiltt/react-native
# or
# Please note that you will need to add `node-linker=hoisted` in `.npmrc` if you are using pnpm in expo app.`
$ pnpm add base-64 react-native-webview react-native-url-polyfill
$ pnpm add @quiltt/react-nativeLaunch the Quiltt Connector in a webview.
@quiltt/react-native does not include any navigation library, you might want to navigate to a new "page" when using QuilttConnector to get the best result.
For simple usage of react-navigation, please see App.tsx and ConnectorScreen.tsx.
import { useState } from 'react'
import { QuilttProvider } from '@quiltt/react'
import { QuilttConnector } from '@quiltt/react-native'
export const App = () => {
// See: https://www.quiltt.dev/authentication/issuing-session-tokens
const token = 'GET_THIS_TOKEN_FROM_YOUR_SERVER'
const [connectionId, setConnectionId] = useState<string>()
const oAuthRedirectUrl = 'quilttexample://open.reactnative.app'
const handleExitSuccess = (metadata) => {
setConnectionId(metadata?.connectionId)
}
return (
<QuilttProvider token={token}>
<QuilttConnector
connectorId="<CONNECTOR_ID>"
oAuthRedirectUrl={oAuthRedirectUrl}
onExitSuccess={handleExitSuccess}
/>
</QuilttProvider>
)
}
export default App