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 open link in the browser so let’s create 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 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
|
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
|
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 🙂