Is there a way to force WebView link clicks to open externally? - react-native

Question

I've got a WebView component that's loading static HTML content:
<WebView
style={{flex: 1}}
html={content}
/>
The issue is, if someone taps a link, it opens in the app and I'd rather force it to use Linking to open in Safari. Is that possible?

Answer 1

After searching around a bit the only way I see to open a browser from an RN app is using the Linking or LinkingIOS API. The question then is, how to enable your Webview to use that API. Here are two possible solutions:
1) Register your own URL Scheme that is handled by your app. E.g. myApp://this/is/a/link.html. Then handle all incoming events for that scheme and make corresponding calls to the API. Registering a scheme is easy and works very well. That seems like the most robust method to me.
2) Use a library that lets the Webview directly talk to it's paren view. E.g. https://github.com/alinz/react-native-webview-bridge.
Then you put a little JS code in your page that onClick sends the link URLs to the parent view, that then calls the API. I have used that project a while ago and it work like a charm until one RN upgrade that I needed broke it. But it's still under active development so you should be fine.