React-Native-Webview getting iframes and mailto links working

Question

How can I get both an iframe and mailto working together in a WebView? I get each of them to work independently, but not together.

Case 1: IFrames will work with the following originWhitelist but mailto links will not.

<WebView originWhitelist={['*']}.... />

Case 2: mailto links work with the following, but IFrames will not (error: can't open url: about:srcdoc)

<WebView originWhitelist={['http://', 'https://', 'mailto://*', ]}.... />

If I try to add the wildcard to the working mailto case, iFrames will work as in case 1, mailto does not.

<WebView originWhitelist={['http://', 'https://', 'mailto://', "" ]}.... />

How can I get both an iframe and mailto working together?

Please note: the iframe and mailto are separate. In other words, the mailto link is not within the iframe. It's on its own page.

Thank you in advance for any help.

Answer 1

I figured it out using onShouldStartLoadWithRequest. I got the idea from this post:

onShouldStartLoadWithRequest automatically calling in iOS React Native on loading of any url in WebView, How to control it?

Here's a working example should anyone else run into this issue. You can swap out "mailto" for anything, make sure to adjust the slice though. Also, test on a real device, this will fail on an emulator.

<WebView      
    originWhitelist={[ '*']}
    onShouldStartLoadWithRequest={event => { 
      if (event.url.slice(0, 6) === 'mailto') {
       
            Linking.openURL(event.url);
            return false
      }
      return true;
      }}
    source={{ uri: 'https://stackoverflow.com', }}
/>