How to add hyperlink to Text using react native Linking

In this article, we are going to learn about How to add hyperlink to Text using react native Linking. to do this we are using React native Linking component. while writing a paragraph sometimes need to add a reference link to do this we need to add hyperlink with blue color or underline text and on clicking the open link in the browser, for this, we have to import the Linking component from React native packages and onPress called one function which calls Linking.openURL(“stringURL”) method which opens URL in the browser. let’s understand with an example

How to add hyperlink to Text using react native Linking

1. Create a new project

To know more about how to set up and create a new project go through this link you will get many articles for react-native beginners

2. Import the following components

In the above import Linking component which we will be going to use to open the link on the browser using the following syntax

3. Adding a hyperlink to text

Adding a hyperlink to text using the onPress method on Text, also I have added Text component inside Text component as you can see below and added hyperlink style to inner Text view

4. Code for adding a hyperlink to text

Check the following code for adding a hyperlink to text, I have added Text view inside Text view and added onPress on the internal Text view on which we have to call Linking.openURL method. also, I have added underline decoration to the Text view to understand the clickable link.

5. Output:

How to add hyperlink to Text using react native Linking

Thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *