react-native-hyperlink

A <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable

Installation

npm install --save react-native-hyperlink

Usage

• To make a <Text /> component linkable, first import the component

importHyperlinkfrom'react-native-hyperlink';

and nest your <Text /> as a child.

module.exports=React.createClass({render(){<HyperlinkonPress={(url)=>alert(url)}><Textstyle={{fontSize:15}}>
This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
</Text></Hyperlink>}});

• You can also wrap <Hyperlink /> around nested <Text /> and any views with <Text />

module.exports=React.createClass({render(){<HyperlinkonPress={(url)=>alert(url)}><View><Textstyle={{fontSize:15}}>
A nested Text component https://facebook.github.io/react-native/docs/text.html works equally well <Text>with https://github.com/obipawan/hyperlink</Text></Text></View></Hyperlink>}});

• To highlight clickable links, specify linkStyle prop

module.exports=React.createClass({render(){<HyperlinklinkStyle={{color:'#2980b9',fontSize:20}}><Textstyle={{fontSize:15}}>
Make clickable strings like https://github.com/obipawan/hyperlink stylable
</Text></Hyperlink>}});

• Use the linkText prop to change the visible text (func or string)

module.exports=React.createClass({render(){<HyperlinklinkStyle={{color:'#2980b9',fontSize:20}}linkText={(url)=>{returnurl==='https://github.com/obipawan/hyperlink' ? 'Hyperlink' : url}}><Textstyle={{fontSize:15}}>
Make clickable strings cleaner with https://github.com/obipawan/hyperlink
</Text></Hyperlink>}});

Dependenies

linkify-it

Development

PRs highly appreciated

License

MIT License