---
title: React Native integration
slug: connect/react-native-integration
docTags: 
createdAt: 2024-04-08T09:08:48.559Z
---

## Accessing Link using webview

Use [react-native-webview](https://github.com/react-native-webview/react-native-webview) as WebView component to load Link for authorization and data sharing.

```javascript
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/yourappid?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;
    }
  }}
/>

```

:::hint{type="warning"}
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](https://github.com/klaviai/KlaviLinkDemoRN)

## Demo App DownLoad

[KlaviLinkDemoRN](https://www.pgyer.com/tUxiYX)&#x20;

::Image[]{src="https://api.archbee.com/api/optimize/3aXvvCPme0Nq_nC3YOUoN/-H6Nsfp60lqahNgnBaDt4_image.png" size="24" width="210" height="210" position="flex-start" showCaption="false"}