React Native integration

3 min

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 const urlwhitelist = \[ 'https //conecte sandbox klavi ai', 'https //conecte testing klavi ai', 'https //conecte 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 //conecte 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; } }} /> if you were a klavi customer before 22/11/2024, you may be able to use the links according to the old nomenclature, then, the urlwhitelist response may look like 'https //open sandbox klavi ai', 'https //open testing klavi ai', 'https //open klavi ai', the webview source may also look differently, such as the example below https //open testing klavi ai/data/v1/basic links/ofpfdemo?redirect url=klavilinkdemorn%3a%2f%2fredirect https //open testing klavi ai/data/v1/basic links/ofpfdemo?redirect url=klavilinkdemorn%3a%2f%2fredirect 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