androidiosreact-nativereact-native-webviewreact-android

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


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:%20info@shop.com">info@shop.com</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

Solution

  • 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