React Native integration
3 min
Accessing Link using webview
Use react-native-webview as WebView component to load Link for authorization and data sharing.
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;
}
}}
/>
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
Demo App DownLoad
