React Native Clicking on a Text Hyperlink to Open It in The Browser Using Linking

This tutorial explains how to open text hyperlink in browser using Linking Component in react native application. Linking gives you a general interface to interact with both incoming and outgoing app links. In this example React Native Clicking on a Text Hyperlink to open it in the Browser will show you how to click on a link / URL to open it in the default browser.

Linking Component To Open Links In Browser React Native 

Lets follow the steps that helps to open text hyperlink in browser using Linking Component in react native application.

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 App.js File in your favorite 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 { StyleSheet, Text, View, Linking } from 'react-native';

Step 4: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text
         style={styles.text}
          onPress={() => {  Linking.openURL('https://www.google.com');  }}>
          Click Here to Open Google Website
        </Text>
      </View>
    );
  }
}

Step 5 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'black',
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to open text hyperlink in browser using Linking Component in react native application.

import React, { Component } from 'react';
import { StyleSheet, Text, View, Linking } from 'react-native';


export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text
         style={styles.text}
          onPress={() => {  Linking.openURL('https://www.google.com');  }}>
          Click Here to Open Google Website
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'black',
  },
});

Screenshots : 

This is all about React Native Clicking on a Text Hyperlink to Open It in The Browser Using Linking. 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.