React Native implementation

Example React Native implementation


Install

  1. Download the React Native Sample App folder: React Native Sample App - Google Drive link
  2. Run the following commands in the terminal
cd react-native-app
npm install @canopyconnect/react-native-sdk react-native-webview

Modal 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>