React Native
Check out some examples of how to set up deeplinks and listen for webview redirects in React Native 📱.
Prerequisites
In order to be able to use the hosted widget in your React Native app, make sure that you:
- Can create access_tokens in your server-side.
- Know how to implement webviews for your platform. For more information, see the webview articles from React Native's github page.
Handle events in your webview
In the code sample below you can see an example of how to listen and handle for events within your webview.
import React, {useState, useEffect} from 'react';
import {WebView} from 'react-native-webview';
import {URL} from 'react-native-url-polyfill';
export default function BelvoWidget({token, payload}) {
const [belvoURI, setBelvoURI] = useState('');
let belvoWidgetURL = `https://widget.belvo.io/?access_token=${token}`;
useEffect(() => {
setBelvoURI(`${belvoWidgetURL}&${buildPayload(payload)}`);
}, [belvoWidgetURL, payload]);
const buildPayload = rawPayload => {
return Object.keys(rawPayload)
.map(key => key + '=' + rawPayload[key])
.join('&');
};
const handleBelvoEvent = event => {
console.log({event});
const webviewEvent = new URL(event.url);
if (webviewEvent.protocol === 'belvowidget:') {
const parseParams = Object.fromEntries(webviewEvent.searchParams);
switch (webviewEvent.hostname) {
case 'success':
const {link, institution} = parseParams;
// Do something with the link and institution.
return false;
case 'exit':
// If the redirect starts with "exit",
// Do something with the data.
return false;
case 'error':
const {error, error_message} = parseParams;
// If the redirect starts with "error",
// Do something with the error data.
return false;
}
return false;
}
return true;
};
return (
<WebView
source={{
uri: belvoURI,
}}
originWhitelist={['belvowidget://*']}
onShouldStartLoadWithRequest={handleBelvoEvent}
/>
);
Updated 10 months ago