This tutorial explains how to open website URL in default browser of android or ios application using react native. The Linking API in react native application is used for deep linking process. Linking gives you a general interface to interact with both incoming and outgoing app links. Using Linking API we can open or navigate to any website URL from our Android or iOS application to device default web browser.
In this example, we are going to open website URL to default browser of android application, when user clicks on button.
Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.
Step-2: Open index.android.js / index.ios.js in your favourite code editor and erase all code and follow this tutorial.
Step-3: Through react , react-native packages import all required components.
Step-4 : Implement render method inside the HomeActivity class. Create a Button component wrapped by root View component and call the Linking.openURL() function on Button onPress event.
Linking.openURL( ) : helps to open website URL in default web browser.
Step-5 : Apply the below style sheet design.
Screenshot :
This is all about open website URL in default browser example in react native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
Download link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20open%20website%20URL%20in%20default%20browser%20Android%20Example
In this example, we are going to open website URL to default browser of android application, when user clicks on button.
Opening External Links in Browser using Linking API in React Native:
Lets follow the below steps to open website URL in default browser of android application in react native.Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.
Step-2: Open index.android.js / index.ios.js in your favourite code editor and erase all code and follow this tutorial.
Step-3: Through react , react-native packages import all required components.
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button, Linking } from "react-native";
Step-4 : Implement render method inside the HomeActivity class. Create a Button component wrapped by root View component and call the Linking.openURL() function on Button onPress event.
Linking.openURL( ) : helps to open website URL in default web browser.
render() {
return (
View style={styles.container}>
Button
title="Click Here To Open Website URL"
onPress={() => Linking.openURL("https://www.skptricks.com")}
/>
View>
);
Step-5 : Apply the below style sheet design.
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#e5e5e5"
},
});
Complete Source Code for App.js
Lets see the complete source code that helps to open website URL in default browser of android application using Linking API in react native application.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button, Linking } from "react-native";
export default class HomeActivity extends Component {
render() {
return (
View style={styles.container}>
Button
title="Click Here To Open Website URL"
onPress={() => Linking.openURL("https://www.skptricks.com")}
/>
View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#e5e5e5"
},
});
Screenshot :
This is all about open website URL in default browser example in react native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
Download link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20open%20website%20URL%20in%20default%20browser%20Android%20Example
