ERR_UNKNOWN_URL_SCHEME on react native webview

Question

I'm developing an app with react-native-webview.

And when I click a link with

<a href="sms:888888&body=Test Message">Click here</a>

I'm receiving error err_unknown_url_scheme.

Thanks

Answer 1

I was getting error regarding "mailto: and tel: links do not work in webview" and for my situation the fix was to adding this property in webview:

 <WebView
 // other props here
  originWhitelist={['http://*', 'https://*', 'intent://*']} 
 />

Answer 2

Able to solve the problem by editting the webview parameters.

<WebView
    {...this.props}
    bounces={false}
    originWhitelist={["https://*", "http://*", "file://*", "sms://*"]}
    allowFileAccess={true}
    domStorageEnabled={true}
    javaScriptEnabled={true}
    geolocationEnabled={true}
    saveFormDataDisabled={true}
    allowFileAccessFromFileURLS={true}
    allowUniversalAccessFromFileURLs={true}
  />

Answer 3

I had a similar problem with mailto links within WebViews. I found that this is an open issue on react-native-webview. Modifying the originWhitelist from {[*]} to the explicit list as suggested in the answer didn't help me. But I could solve the problem by applying this fix. It provides a custom implementation for the onShouldStartLoadWithRequest property. And I used

function onShouldStartLoadWithRequest(request){
  if (!request || !request.url) {
    return true;
  }

  // list of schemas we will allow the webview
  // to open natively
  if(request.url.startsWith("tel:") ||
    request.url.startsWith("mailto:") ||
    request.url.startsWith("maps:") ||
    request.url.startsWith("geo:") ||
    request.url.startsWith("sms:")
    ){
    Linking.openURL(request.url).catch(er => {
      console.log('Failed to open Link:', er.message);
    });
    return false;
  }

  // let everything else to the webview
  return true;
}

Answer 4

For unknown reasons, even with overriding onShouldStartLoadWithRequest method, webview crashed for me.

Version 11.0.0 of react-native-webview, features a new option setSupportMultipleWindows, which when set to true opens links that open in new tabs/windows (such as <a target="_blank">) will now prompt to open in the system browser, rather than re-using the current WebView.

<WebView
    // links that open in new tabs/windows will now prompt to open in the system browser
    setSupportMultipleWindows={true}
    // other props here
/>

Link that triggers tel

<a target="_blank" rel="nofollow noreferrer noopener" href="tel:+91xxxxxxxxx">Call now</a>

See https://github.com/react-native-webview/react-native-webview/issues/1084#issuecomment-735048835