CODEWITHSUNDEEP
react-native
Matan Kadosh
Matan Kadosh

Reputation: 1781

React Native - open links in browser

Hi i am using react native's webview to display some html, i want that whenever a user clicks a link inside that html, it will open the user's browser with that link.

is that possible?

Edit 1:

I ended up using this package : npmjs.com/package/react-native-communications which opens the browser. I call the browser to open on onNavigationStateChange when the URL changes.

The thing now is that the WebView still continues to process the request although I have moved to the browser, how can i stop the request?

Upvotes: 98

Views: 172038

Answers (14)

flunder
flunder

Reputation: 521

@Damusnet's only worked sporadically for me. I looked into it and here's my updated code which works for me using react-native-webview 11.4.3.

import React from 'react';
import { WebView, Linking } from 'react-native';

const WebviewScreen = () => {
  const uri = 'http://stackoverflow.com/questions/35531679/react-native-open-links-in-browser';

  return (
    <WebView
    source={{ uri }}
    onShouldStartLoadWithRequest={(request) => {
      if (request.url !== uri) {
        Linking.openURL(request.url);
        return false;
      }

      return true;
    }}
  />    
  )
}

Upvotes: 8

wtfbrb
wtfbrb

Reputation: 51

<WebView
      source={{uri: this.state.src}}
      ref={(webView) => {
        this.webView.ref = webView;
      }}
      onNavigationStateChange={(navState) => {
        this.webView.canGoBack = navState.canGoBack;
        if (!navState.url.includes('yourdomain.com')) {
          Linking.openURL(navState.url);
          return false;
        }
      }}
      onShouldStartLoadWithRequest={(event) => {
        if (!event.url.includes('yourdomain.com')) {
          Linking.openURL(event.url);
          return false;
        }
        return true;
      }}
      style={{flex: 1}}
      startInLoadingState={true}
      renderLoading={() => {
        return (
          <View style={[styles.container, styles.horizontal]}>
            <ActivityIndicator size="large" color="#0000ff" />
          </View>
        );
      }}
    />

I struggled with this one, my use case was to open external links in a separate browser. This solution worked for me.

Upvotes: 5

Cparello
Cparello

Reputation: 1565

  1. If you are attempting to open a redirect url and you get an error from an android intent such as "err_unknown_url_scheme".

  2. Check what it is trying to open because it may have detected android traffic and attempted to open in the corresponding app.

  3. If you wish for it to open in the webview anyway and you get an intent back from a redirect, intercept it in onNavigationStateChange and rewrite it:

onNavigationStateChange={event => {
  if (event.url !== uri) {
      if (event.url.match('intent://')) {
          SetSearchClick(
              event.url.replace('intent://', 'https://'),
          );
         }
   }
}}

Upvotes: 1

Porni
Porni

Reputation: 46

I had many issues with this solution while using local HTML file only at iOS. For instance, when I had Instagram embed in my webview it opened it automatically. In order to solve it I've added (only for iOS):

onShouldStartLoadWithRequest={event => {
    const condition = isIos ? event.navigationType == 'click' : true
    if (event.url.slice(0, 4) === 'http' && condition) {
      Linking.openURL(event.url)
      return false
    }
  return true
}}

Upvotes: 3

sergei
sergei

Reputation: 823

Solution for those who use expo:

import * as WebBrowser from 'expo-web-browser';
import { WebView } from 'react-native-webview';

...

render() {

    return (
        <WebView

            source={{
                uri: uri
            }}

            ref={ (ref) => { this.webview = ref; } }

            onNavigationStateChange={ (event) => {
                if (event.url !== uri) {
                    this.webView.stopLoading();
                    WebBrowser.openBrowserAsync(event.url);
                }
            }}
        />
    );
}

WebBrowser is installed via: expo install expo-web-browser

Upvotes: 4

redara
redara

Reputation: 31

If stopLoading() in onNavigationStateChange on Android does not work,

this.webview.stopLoading();
setTimeOut( () => {
  Linking.openURL(event.url)
}, 1000);

It worked well.

Upvotes: 0

timraybould
timraybould

Reputation: 731

A big issue with using "stopLoading()" is that on Android it disables further taps on any other links from that source page.

The WebView component is being split out of core RN and into the community's hands. If you use that version instead (https://github.com/react-native-community/react-native-webview), you can use "onShouldStartLoadWithRequest" prop on both iOS and Android, which makes this a lot more elegant.

Building off of Damien Varron's really helpful answer, here's an example for how you'd leverage that prop to avoid stopLoading that works cross platform:

onShouldStartLoadWithRequest={event => {
    if (event.url !== uri) {
        Linking.openURL(event.url)
        return false
    }
    return true
}}

And here's how you might do it if your source is HTML as opposed to a URI:

onShouldStartLoadWithRequest={event => {
    if (event.url.slice(0,4) === 'http') {
        Linking.openURL(event.url)
        return false
    }
    return true
}}

As basbase pointed out, you could also do it this way (I've added the about:blank part). I plan to trial and error more to see which holds up best.

onShouldStartLoadWithRequest={event => {
    if (!/^[data:text, about:blank]/.test(event.url)) {
        Linking.openURL(event.url)
        return false
    }
    return true
}}

Upvotes: 59

basbase
basbase

Reputation: 1421

In addition to the excellent answer https://stackoverflow.com/a/40382325/10236907: When using source={{html: '...'}}, you can check for an external url change using: if (!/^data:text/.test(event.url)) {

Upvotes: 1

Bocaxica
Bocaxica

Reputation: 4680

I found a way to do this, it is an iOS-only solution though!

Here is step-by-step instructions:

  1. Link the 'RCTLinkingIOS' library to your project. I used CocoaPods to so.

  2. In your WebView add "onShouldStartLoadWithRequest". For example

    <WebView source={{ html: content }} onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest} />

  3. Add the this.onShouldStartLoadWithRequest function. Return TRUE or FALSE based on whether or not you want to follow the link in your WebView. This is basically the equivalent of the UIWebViewDelegate implementation you would use when you implement it in native code (Swift or Objective-C).

    onShouldStartLoadWithRequest = (event) => {
     Linking.canOpenURL(event.url).then(supported => {
         if (supported) {
             Linking.openURL(event.url);
         } else {
             console.log('Don\'t know how to open URI: ' + event.url);
         }
         return false
     });
}

  4. Make sure to import Linking as well in your javascript source:

    import { AppRegistry, View, WebView, Linking } from 'react-native';

That should do the trick.

For more information see the react-native docs: https://facebook.github.io/react-native/docs/linking.html

Upvotes: 11

C&#233;sar Parra Moreno
C&#233;sar Parra Moreno

Reputation: 201

This is my solution. As it is not generic, you can improve the injected javascript according to your requirements

import {
  View,
  WebView,
  Linking,
} from 'react-native';

const injectScript = `
  (function () {
    window.onclick = function(e) {
      e.preventDefault();
      window.postMessage(e.target.href);
      e.stopPropagation()
    }
  }());
`;

class MyWebView extends React.Component {

  onMessage({ nativeEvent }) {
    const data = nativeEvent.data;

    if (data !== undefined && data !== null) {
      Linking.openURL(data);
    }
  }

  render() {
    return (
      <WebView
        source={{ html: this.props.html }}
        injectedJavaScript={injectScript}
        onMessage={this.onMessage}
      />
    )
  }
}

Upvotes: 19

ooolala
ooolala

Reputation: 1575

Linking.openURL(url).catch(err => console.error('An error occurred', err));

https://facebook.github.io/react-native/docs/linking.html

Upvotes: 27

damusnet
damusnet

Reputation: 4398

Here is a complete working solution:

import React, { Component } from 'react';
import { WebView, Linking } from 'react-native';

export default class WebViewThatOpensLinksInNavigator extends Component {
  render() {
    const uri = 'http://stackoverflow.com/questions/35531679/react-native-open-links-in-browser';
    return (
      <WebView
        ref={(ref) => { this.webview = ref; }}
        source={{ uri }}
        onNavigationStateChange={(event) => {
          if (event.url !== uri) {
            this.webview.stopLoading();
            Linking.openURL(event.url);
          }
        }}
      />
    );
  }
}

It uses a simple WebView, intercepts any url change, and if that url differs from the original one, stops the loading, preventing page change, and opens it in the OS Navigator instead.

ios simulator

Upvotes: 148

Eliot
Eliot

Reputation: 5659

It's possible to do this in a cross-platform way using the built-in Linking class and react-native-webview-bridge.

const generateLink = (text, url) => {
  if (url) {
    return `<a href='#' onclick='WebViewBridge.send("${url}"); return false;'>${text}</a>`;
  } else {
    return text;
  }
};

const generateHtml = () => `<!DOCTYPE html><html><body>
  ${generateLink('Link text', 'http://example.com')}
</body></html>`;

With a WebViewBridge component rendered like so:

<WebViewBridge
  javaScriptEnabled
  renderLoading={() => <ActivityIndicator animating size="large" />}
  source={{ html: generateHtml() }}
  onBridgeMessage={url => Linking.openURL(url)}
/>

Upvotes: 1

James111
James111

Reputation: 15903

You'll want to read this: https://facebook.github.io/react-native/docs/linkingios.html

It is possible, just check the link above & you should be all good!

Other links:

https://github.com/ivanph/react-native-webintent

https://www.npmjs.com/package/react-native-browser

Upvotes: 0

Related Questions