You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Func to handle click over a clickable text with parsed text as arg
func
onLongPress
Func to handle long click over a clickable text with parsed text as arg
func
linkDefault
A platform specific fallback to handle onPress. Uses Linking. Disabled by default
bool
injectViewProps
Func with url as a param to inject props to the clickable component
func
i => ({})
Examples
Wrap any component that has <Text> (works for nested text too) in it
importHyperlinkfrom'react-native-hyperlink'exportconstdefaultLink=()=><HyperlinklinkDefault={true}><Textstyle={{fontSize: 15}}>
This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
</Text></Hyperlink>exportconstregularText=()=><HyperlinkonPress={(url,text)=>alert(url+", "+text)}><Textstyle={{fontSize: 15}}>
This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
</Text></Hyperlink>exportconstregularTextLongPress=()=><HyperlinkonLongPress={(url,text)=>alert(url+", "+text)}><Textstyle={{fontSize: 15}}>
This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable for long click.
</Text></Hyperlink>exportconstnestedText=()=><HyperlinkonPress={(url,text)=>alert(url+", "+text)}><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>exportconsthighlightText=()=><HyperlinklinkStyle={{color: '#2980b9',fontSize: 20}}><Textstyle={{fontSize: 15}}>
Make clickable strings like https://github.com/obipawan/hyperlink stylable
</Text></Hyperlink>exportconstparseAndReplace=()=><HyperlinklinkStyle={{color: '#2980b9',fontSize: 20}}linkText={url=>url==='https://github.com/obipawan/hyperlink' ? 'Hyperlink' : url}><Textstyle={{fontSize: 15}}>
Make clickable strings cleaner with https://github.com/obipawan/hyperlink
</Text></Hyperlink>exportconstpassPropsText=()=><HyperlinklinkDefaultinjectViewProps={url=>({testID: url==='https://link.com' ? 'id1' : 'id2',style: url==='https://link.com' ? {color: 'red'} : {color: 'blue'},//any other props you wish to pass to the component})}><Text>You can pass props to clickable components matched by url.
<Text>This url looks red https://link.com
</Text> and this url looks blue https://link2.com </Text></Hyperlink>