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' } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter