Can't open url: tel: or prompt email composer in react native using webview

Question

This current version of react-native I am using.

"react": "17.0.1",
"react-native": "0.64.0",

This is data from api and showing in webview.

<br>
<div class="address"><span></span></div>
<div class="address"><span></span></div>
<div class="phone"><a href="tel:%20+91%2079%204898%208801"><i class="fa fa-phone" title="Phone"></i> <span style="text-decoration: underline;"> +91 79 4898 8801</span></a></div>
<div class="mail"><a href="mailto:%[email protected]">[email protected]</a></div>
<br><br>

I am not able open Phone dialer with number in webview and also email composer. I am getting this warning/error

Can't open url: tel:%20+91%2079%204898%208801

Answer 1

I have use this solution.

onShouldStartLoadWithRequest(request) {
    // short circuit these
    if (
      !request.url ||
      request.url.startsWith('http') ||
      request.url.startsWith('/') ||
      request.url.startsWith('#') ||
      request.url.startsWith('javascript') ||
      request.url.startsWith('about:blank')
    ) {
      return true;
    }

    // blocked blobs
    if (request.url.startsWith('blob')) {
      showToastMsg(translate('linkCantOpen'), true);
      return false;
    }

    // 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 => {
        showToastMsg(translate('linkCantOpen'), true);
      });
      return false;
    }

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

This is my webview, i am using this webview react-native-autoheight-webview

<MyWebView
            ref={ref => (this.webviewRef = ref)}
            style={styles.webview}
            originWhitelist={['http://*', 'https://*', 'tel:*', 'mailto:*']}
            customStyle={`
            * {
              font-family: '${font}';
              font-size: 14px;
              margin-start:16px:
              margin-end:16px;
            }
          `}
            files={[
              {
                href: 'cssfileaddress',
                type: 'text/css',
                rel: 'stylesheet',
              },
            ]}
            source={{
              html: body,
            }}
            scalesPageToFit={false}
            scrollEnabled={true}
            viewportContent={'width=device-width, user-scalable=no'}
            onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest.bind(
              this,
            )}
          />

CC : react-native-autoheight-webview