Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow a user to click on hyperlink inside webview that opens in separate OS browser

See original GitHub issue

So my legacy version of React Native used react-native-autoheight-webview@06.1 and that version used WebView and Linking modules from react-native. A former engineer was able to patch that package with this implementation:

patch-package
--- a/node_modules/react-native-autoheight-webview/autoHeightWebView/index.js
+++ b/node_modules/react-native-autoheight-webview/autoHeightWebView/index.js
@@ -12,7 +12,8 @@ import {
   Platform,
   UIManager,
   ViewPropTypes,
-  WebView
+  WebView,
+  Linking
 } from 'react-native';

 import PropTypes from 'prop-types';
@@ -170,8 +171,13 @@ export default class AutoHeightWebView extends PureComponent {
   };

   onLoadingStart = event => {
-    const { onLoadStart } = this.props;
-    onLoadStart && onLoadStart(event);
+    if (event.nativeEvent.url.startsWith("http")) {
+        this.stopLoading();
+        Linking.openURL(event.nativeEvent.url).catch(err => console.log('An error occurred', err));
+    } else {
+        const {onLoadStart} = this.props;
+        onLoadStart && onLoadStart(event);
+    }
   };

   onLoadingError = event => {
--- a/node_modules/react-native-autoheight-webview/autoHeightWebView/index.js
+++ b/node_modules/react-native-autoheight-webview/autoHeightWebView/index.js
@@ -2,7 +2,7 @@

 import React, { PureComponent } from 'react';

-import { Animated, Dimensions, StyleSheet, ViewPropTypes, WebView } from 'react-native';
+import { Animated, Dimensions, StyleSheet, ViewPropTypes, WebView, Linking } from 'react-native';

 import PropTypes from 'prop-types';

@@ -77,6 +77,16 @@ export default class AutoHeightWebView extends PureComponent {

   getWebView = webView => (this.webView = webView);

+  _onLoadStart = event => {
+    if (event.nativeEvent.url.startsWith("http")) {
+        this.stopLoading();
+        Linking.openURL(event.nativeEvent.url).catch(err => console.log('An error occurred', err));
+    } else {
+        const {onLoadStart} = this.props;
+        onLoadStart && onLoadStart(event);
+    }
+  };
+
   stopLoading() {
     this.webView.stopLoading();
   }
@@ -112,7 +122,7 @@ export default class AutoHeightWebView extends PureComponent {
           ref={this.getWebView}
           onError={onError}
           onLoad={onLoad}
-          onLoadStart={onLoadStart}
+          onLoadStart={this._onLoadStart}
           onLoadEnd={onLoadEnd}
           onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
           style={styles.webView}

Now my app has been upgraded by me to RN 0.60.4 which means that the oldest version of react-native-autoheight-webview that I can use is version 1.0.0. However, it also means that now that library uses WebView from react-native-webview instead of react-native. It seems that now when a user clicks on a hyperlink inside the webview, it opens form within the webview, different from what it used to do.

I need some kind of solution that will allow a user to still have the experience of having the hyperlink open in an external OS browser within their phone and not within the webview of my application.

I have tried reconfiguring index.js inside react-native-autoheight-webview as my predecessors did, but I have been unsuccessful. Any help will be greatly appreciated as this feature that is no longer available is putting me behind on my work.

Issue Analytics

State:
Created 4 years ago
Comments:6

Top GitHub Comments

3reactions

SamiChabcommented, Oct 20, 2021

You can try this :

        <WebView
          {...yourProps}
          onShouldStartLoadWithRequest={(request) => {
            if(request.url !== "about:blank") {
              Linking.openURL(request.url)
              return false
            } else return true
          }}
        />

1reaction

ldco2016commented, Oct 29, 2019

well, I did not implement a solution that works 100%, but it was this:

import env from "env";

render() {
    const media = env.mediaServiceUrl;
    const uri = `${media}/1.0/articles`;

<WebViewAutoHeight
                key={s.Body.substr(10)}
                source={{
                  //prettier-ignore
                  html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: ${lightTheme.grey2} !important; color: ${v2Colors.charcoalDarkest}; font-size: ${moderateScale(14, 0.2)}px;">${s.Body}</body>`
                }}
                onNavigationStateChange={event => {
                  if (event.url !== uri) {
                    Linking.openURL(event.url);
                  }
                }}
              />

It is not 100% working solution because it is missing this.webview.stopLoading(); which does not seem to work even if you do add a ref of this.webview.

Top Results From Across the Web

React Native - open links in browser - Stack Overflow

Here is a complete working solution: import React, { Component } from 'react'; import { WebView, Linking } from 'react-native'; export default class ......

Open WKWebView Links in Safari | Apple Developer Forums

I'm creating an app that uses WKWebView. Whenever a user clicks on a link in that webview, I want the link to open...

WebView - Android Developers

WebView objects allow you to display web content as part of your activity layout, but lack some of the features of fully-developed browsers....

How to open links on a respective app on Android instead of a ...

You can experiment with WebViews, an Android application component that allows the app to use the user's default browser looks and functions to...

Open URL in browser instead of mobile app | OutSystems

Add a Client Action to handle your link's On Click event. · Add a JavaScript element to the new Client Action. · Use...