@quiltt/react-native
v3.6.5
Published
React Native components for Quiltt Connector
Downloads
497
Readme
@quiltt/react-native
@quiltt/react-native
provides React Native Components for integrating Quiltt Connector into React Native and Expo applications.
Installation
@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-native
QuilttConnector
Launch 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.
Example
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