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