Open Url in default web browser

Question

I am new in react-native and i want to open url in default browser like Chrome in Android and iPhone both.

We open url via intent in Android same like functionality i want to achieve.

I have search many times but it will give me the result of Deepklinking.

RRikesh · Accepted Answer · 2022-01-30T12:08:01.793

299

You should use Linking.

Example from the docs:

class OpenURLButton extends React.Component {
  static propTypes = { url: React.PropTypes.string };
  handleClick = () => {
    Linking.canOpenURL(this.props.url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log("Don't know how to open URI: " + this.props.url);
      }
    });
  };
  render() {
    return (
      <TouchableOpacity onPress={this.handleClick}>
        {" "}
        <View style={styles.button}>
          {" "}<Text style={styles.text}>Open {this.props.url}</Text>{" "}
        </View>
        {" "}
      </TouchableOpacity>
    );
  }
}

Here's an example you can try on Expo Snack:

import React, { Component } from 'react';
import { View, StyleSheet, Button, Linking } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Button title="Click me" onPress={ ()=>{ Linking.openURL('https://google.com')}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

edited Jan 30 '22 at 12:08

answered May 05 '17 at 11:53

RRikesh

14,112
5
49
70

@RajKumarN, how would this work if you have an app that grabs news articles and you want to open the news articles' hyperlinks in a separate browser? – Daniel Oct 15 '19 at 23:02
Check this out, https://facebook.github.io/react-native/docs/webview.html#onshouldstartloadwithrequest. This can be helpful @Daniel – Raj Kumar N Oct 16 '19 at 06:46
@RajKumarN How can we open the external URL inside the app not redirecting to the browser? – LazyCoder May 02 '20 at 09:07
The [link](https://facebook.github.io/react-native/docs/linking.html) at the top of this answer no longer works. Gotta love the irony :) – Caleb Koch Jan 30 '22 at 02:42
1

@CalebKoch Dropping the `.html` at the end of the URL makes the link work again. Updated my answer, thanks for the heads up. – RRikesh Jan 30 '22 at 12:09

score 23 · Answer 2 · answered Oct 21 '19 at 05:05

23

A simpler way which eliminates checking if the app can open the url.

  loadInBrowser = () => {
    Linking.openURL(this.state.url).catch(err => console.error("Couldn't load page", err));
  };

Calling it with a button.

<Button title="Open in Browser" onPress={this.loadInBrowser} />

answered Oct 21 '19 at 05:05

Wes

1,847
1
16
30

1

How do I handle null values? let's say I'm receiving URL from backend but it returned null instead of a string, the app is crashing. – ASN Jan 03 '20 at 05:26
2

@ASN You do that check prior to passing that url to the `openURL` method. For example: `If (this.state.url) Linking.openURL(this.state.url)`. You can also put the catch clause to use if you don't want to check prior. – Wes Jan 03 '20 at 05:52
1

Yeah that is how I handled it. Thank you :) – ASN Jan 03 '20 at 06:09
Hi! Just a question, What do you suggest to do for android if app is selected to open by default and I need to open the same link but in browser? – Andriy Khlopyk Apr 14 '20 at 09:51
simple, short, useful solution, can you comment about it shows blank screen when I comeback manually from browser to app. – GD- Ganesh Deshmukh Jun 17 '20 at 17:09

score 11 · Answer 3 · edited Jan 30 '21 at 12:30

11

Try this:

import React, { useCallback } from "react";
import { Linking } from "react-native";
OpenWEB = () => {
  Linking.openURL(url);
};

const App = () => {
  return <View onPress={() => OpenWeb}>OPEN YOUR WEB</View>;
};

Hope this will solve your problem.

edited Jan 30 '21 at 12:30

Mubashar Javed

1,197
1
9
17

answered Jan 29 '21 at 10:09

samran

581
6
7

hostingutilities.com · Answer 4 · 2023-03-14T03:57:49.587

In React 16.8+, the following can be used to create an ExternalLinkBtn component, similar to an a tag on the web. The link will be opened externally in the default browser.

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

const ExternalLinkBtn = (props) => {
  return <Button
            title={props.title}
            onPress={() => {
                Linking.openURL(props.url)
                .catch(err => {
                    console.error("Failed opening page because: ", err)
                    alert('Failed to open page')
                })}}
          />
}

Below is an example of using our ExternalLinkBtn in a component

export default function exampleUse() {
  return (
    <View>
      <ExternalLinkBtn title="Example Link" url="https://example.com" />
    </View>
  )
}

Open Url in default web browser

4 Answers4

Linked