A <Hyperlink /> component for react-native to make urls, fuzzy links, emails etc clickable
npm install react-native-hyperlinkA
!demo
sh
npm i --save react-native-hyperlink
`Props
| name | desc | type | default
| --- | --- | --- | --- |
| | linkify-it object, for custom schema | object | require('linkify-it')()
| | highlight clickable text with styles | Text.propTypes.style |
| linkText | A string or a func to replace parsed text | oneOfType([ string, func ]) |
| onPress | 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
|| Func with url as a param to inject props to the clickable component | func | i => ({})Examples
Wrap any component that has (works for nested text too) in it`jsx
import Hyperlink from 'react-native-hyperlink'export const defaultLink = () =>
This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
export const regularText = () =>
alert(url + ", " + text) }>
This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.
export const regularTextLongPress = () =>
alert(url + ", " + text) }>
This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable for long click.
export const nestedText = () =>
alert(url + ", " + text) }>
A nested Text component https://facebook.github.io/react-native/docs/text.html works equally well with https://github.com/obipawan/hyperlink
export const highlightText = () =>
Make clickable strings like https://github.com/obipawan/hyperlink stylable
export const parseAndReplace = () =>
linkText={ url => url === 'https://github.com/obipawan/hyperlink' ? 'Hyperlink' : url }
>
Make clickable strings cleaner with https://github.com/obipawan/hyperlink
export const passPropsText = () =>
injectViewProps={ url => ({
testID: url === 'http://link.com' ? 'id1' : 'id2' ,
style: url === 'https://link.com' ? { color: 'red' } : { color: 'blue' },
//any other props you wish to pass to the component
}) }
>
You can pass props to clickable components matched by url.
This url looks red https://link.com
and this url looks blue https://link2.com
``PRs highly appreciated
License
----
MIT License