Example React Native implementation
Install
- Download the React Native Sample App folder: React Native Sample App - Google Drive link
- Run the following commands in the terminal
cd react-native-app
npm install @canopyconnect/react-native-sdk react-native-webviewModal Usage
import { ModalLinkView } from '@canopyconnect/react-native-sdk';
const linkViewRef = useRef(null)
<ModalLinkView
ref={linkViewRef}
publicAlias={'demo'}
onAuthenticationSuccess={(data) => {
// Close here if you want to exit after authentication
// this.setState({ isOpen: false });
// use data to setup listening for webhook
}}
onExit={(err, data) => {
this.setState({ isOpen: false });
if (err) {
// reprompt to submit data if err exists
} else {
// use data to setup listening for webhook
}
}}
pullMetaData={{
"custom-data-id": "123-456"
}}
consentToken={'xxx'}
/>
<Button onPress={() => linkViewRef.current?.open()}>Open Modal</Button>
<Button onPress={() => linkViewRef.current?.close()}>Request Close</Button>Embedded Usage
import { EmbeddedLinkView } from '@canopyconnect/react-native-sdk';
const embeddedViewRef = useRef(null)
<EmbeddedLinkView
ref={embeddedViewRef}
publicAlias={'demo'}
onAuthenticationSuccess={(data) => {
// Close here if you want to exit after authentication
// this.setState({ isOpen: false });
// use data to setup listening for webhook
}}
onExit={(err, data) => {
this.setState({ isOpen: false });
if (err) {
// reprompt to submit data if err exists
} else {
// use data to setup listening for webhook
}
}}
pullMetaData={{
"custom-data-id": "123-456"
}}
consentToken={'xxx'}
webViewStyle={{height: 608, width: '100%'}}
/>
<Button onPress={() => linkViewRef.current?.requestClose()}>Request Close</Button>