How does one Display a Hyperlink in React Native App?
Solution 1:
Something like this:
<Text style={{color: 'blue'}}
onPress={() => Linking.openURL('http://google.com')}>
Google
</Text>
using the Linking
module that's bundled with React Native.
import { Linking } from 'react-native';
Solution 2:
The selected answer refers only to iOS. For both platforms, you can use the following component:
import React, { Component, PropTypes } from 'react';
import {
Linking,
Text,
StyleSheet
} from 'react-native';
export default class HyperLink extends Component {
constructor(){
super();
this._goToURL = this._goToURL.bind(this);
}
static propTypes = {
url: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
}
render() {
const { title} = this.props;
return(
<Text style={styles.title} onPress={this._goToURL}>
> {title}
</Text>
);
}
_goToURL() {
const { url } = this.props;
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(this.props.url);
} else {
console.log('Don\'t know how to open URI: ' + this.props.url);
}
});
}
}
const styles = StyleSheet.create({
title: {
color: '#acacac',
fontWeight: 'bold'
}
});
Solution 3:
To do this, I would strongly consider wrapping a Text
component in a TouchableOpacity
. When a TouchableOpacity
is touched, it fades (becomes less opaque). This gives the user immediate feedback when touching the text and provides for an improved user experience.
You can use the onPress
property on the TouchableOpacity
to make the link happen:
<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}>
<Text style={{color: 'blue'}}>
Google
</Text>
</TouchableOpacity>