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
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,
)}
/>