Open Url in default web browser Open Url in default web browser android android

Open Url in default web browser


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',  },});


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} />


In React 16.8+, using functional components, you would do

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')                })}}          />}export default function exampleUse() {  return (    <View>      <ExternalLinkBtn title="Example Link" url="https://example.com" />    </View>  )}