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:

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}
    />
  );

Did this page help you?