Add HyperLink Clickable Text in React Native Android iOS App

Hyperlink means connect/Link a custom Text to a specific Website URL and File URL. It is very helpful in web development area but now we can show Add HyperLink Clickable Text in React Native both Android and iOS Applications using Linking library. So let’s get started .

Contents in this project Add HyperLink Clickable Text in React Native Android iOS React Native App :

1. Import StyleSheet, Text, View and Linking component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Linking } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, Text, View, Linking } from ‘react-native’;

2. Create a Parent View in render’s return block.

<br />
render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

3. Create a Text component in View. Now we would set onPress={} method on Text with Fat Array Function method and call the Linking.openURL(‘Put Your URL Here’) method. This would open the entered URL in mobile default web browser.

<br />
render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(‘https://google.com’) } >Click Here To Open Google.</Text></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

<Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(‘https://google.com’) } >Click Here To Open Google.</Text>

</View>

);

}

4. Create Style for Parent View and Text component.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’<br />
  },</p>
<p>  TextStyle: {</p>
<p>    color: ‘#E91E63’,<br />
    textDecorationLine: ‘underline’</p>
<p>  }<br />
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’

TextStyle: {

color: ‘#E91E63’,

textDecorationLine: ‘underline’

}

});

5. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Linking } from ‘react-native’;</p>
<p>export default class App extends Component<{}> {</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(‘https://google.com’) } >Click Here To Open Google.</Text></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’<br />
  },</p>
<p>  TextStyle: {</p>
<p>    color: ‘#E91E63’,<br />
    textDecorationLine: ‘underline’</p>
<p>  }<br />
});