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
1. Create a new project
|
1 |
react-native init ProjectName |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
// import React import React from 'react'; // import following components from react native import { SafeAreaView, View, StyleSheet, Text, Linking } from 'react-native'; |
In the above import Linking component which we will be going to use to open the link on the browser using the following syntax
|
1 |
Linking.openURL('https://techup.co.in'); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<Text style={styles.textStyle}> Hi welcome to{' '} <Text style={styles.hyperlinkStyle} onPress={() => { Linking.openURL('https://techup.co.in'); }}> Techup.co.in </Text> . Techup contains online technical tutorial. You can find the ready examples with code related to React Native & Java. Our main focus is to solved problem & errors </Text> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
// import React import React from 'react'; // import following components from react native import { SafeAreaView, View, StyleSheet, Text, Linking } from 'react-native'; const Screen2 = () => { return ( <SafeAreaView style={{flex: 1}}> <View style={styles.container}> <Text style={styles.titleStyle}> How to add hyperlink to Text using react native Linking </Text> <Text style={styles.textStyle}> Hi welcome to{' '} <Text style={styles.hyperlinkStyle} onPress={() => { Linking.openURL('https://techup.co.in'); }}> Techup.co.in </Text> . Techup contains online technical tutorial. You can find the ready examples with code related to React Native & Java. Our main focus is to solved problem & errors </Text> </View> </SafeAreaView> ); }; export default Screen2; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', alignItems:'center', justifyContent:'center' }, textStyle: { margin: 10, alignSelf:'center', textAlign:'center' }, titleStyle: { fontSize: 20, margin: 10, textAlign:'center' }, hyperlinkStyle: { color: 'blue', } }); |
5. Output:
Thank you 🙂