React Native integration

3min

Accessing Link using webview
Use react-native-webview as WebView component to load Link for authorization and data sharing.
JS
const urlWhiteList = [
  'https://open-sandbox.klavi.ai',
  'https://open-testing.klavi.ai',
  'https://open.klavi.ai',
  'https://www.google.com/recaptcha',
  'https://recaptcha.google.com/recaptcha',
];

const isInWhitelistFn = (urlString: string) => {
  return urlWhiteList.some(item => urlString.startsWith(item));
};

<WebView
  source={{
    uri: 'https://open-testing.klavi.ai/data/v1/basic-links/ofpfdemo?redirect_url=klavilinkdemorn%3A%2F%2Fredirect',
  }}
  webviewDebuggingEnabled
  startInLoadingState
  originWhitelist={['*']}
  onShouldStartLoadWithRequest={(event: ShouldStartLoadRequest) => {
    if (event.url === 'about:blank') {
      return false;
    }
    try {
      if (isInWhitelistFn(event.url)) {
        return true;
      }
      Linking.openURL(event.url);
      return false;
    } catch (error) {
      console.warn(error);
      return false;
    }
  }}
/>

const urlWhiteList = [
  'https://open-sandbox.klavi.ai',
  'https://open-testing.klavi.ai',
  'https://open.klavi.ai',
  'https://www.google.com/recaptcha',
  'https://recaptcha.google.com/recaptcha',
];

const isInWhitelistFn = (urlString: string) => {
  return urlWhiteList.some(item => urlString.startsWith(item));
};

<WebView
  source={{
    uri: 'https://open-testing.klavi.ai/data/v1/basic-links/ofpfdemo?redirect_url=klavilinkdemorn%3A%2F%2Fredirect',
  }}
  webviewDebuggingEnabled
  startInLoadingState
  originWhitelist={['*']}
  onShouldStartLoadWithRequest={(event: ShouldStartLoadRequest) => {
    if (event.url === 'about:blank') {
      return false;
    }
    try {
      if (isInWhitelistFn(event.url)) {
        return true;
      }
      Linking.openURL(event.url);
      return false;
    } catch (error) {
      console.warn(error);
      return false;
    }
  }}
/>
﻿
WebView needs to set originWhitelist to '*', then the method onShouldStartLoadWithRequest can intercept all requests.
It is necessary to set up a whitelist containing the domain name of klavi. Otherwise the klavi link will be opened with the system browser.cept all requests.
GitHub
﻿GitHub - klaviai/KlaviLinkDemoRN﻿
Demo App DownLoad
﻿KlaviLinkDemoRN 
﻿
﻿

Updated 30 Apr 2024

Did this page help you?

Integration WhiteLabel using App2App Flow

Flutter integration

Docs powered by Archbee

TABLE OF CONTENTS

Accessing Link using webview

GitHub

Demo App DownLoad

Klavi Link docs v4

React Native integration

Accessing Link using webview

GitHub

Demo App DownLoad