A simple and customizable library to display hyperlinks in React Native
npm install react-native-hyperlinks- π Automatic detection for links, mentions and hashtags
- π€ Full unicode support
- π International domains support
- π
Custom hyperlink style
- βοΈ Custom linkify-it instance
- π¦ Tiny
- π Created with Typescript

Uses linkify-it under the hood. Created for my social network app, Drakkle
``bash`
yarn add react-native-hyperlinks linkify-it
`tsx
import React from "react";
import { Linking } from "react-native";
import Hyperlinks from "react-native-hyperlinks";
export default function App() {
function handleOnLinkPress(link: string) {
console.log(link)
}
function handleOnMentionPress (username: string) {
console.log(username)
}
function handleOnHashtagPress (tag: string) {
console.log(tag)
}
return (
style={{ fontSize: 18 }}
hyperlinkStyle={{ color: 'purple' }}
onLinkPress={handleOnLinkPress}
onMentionPress={handleOnMentionPress}
onHashtagPress={handleOnHashtagPress}
/>
);
}
`
| Property | Default | Type | Required
| ---- | ---- | ---- | ----
| text | undefined | string | truehyperlinkStyle
| | undefined | StyleProp | falseautoDetectMentions
| | true | boolean | falseautoDetectHastags
| | true | boolean | falsecustomHyperlinks
| | undefined | CustomHyperlink[] | falseonLinkPress
| | undefined | (link: string) => unknown | falseonMentionPress
| | undefined | (username: string) => unknown | falseonHashtagPress
| | undefined | (tag: string) => unknown | falseonCustomHyperlinkPress
| | undefined | (hyperlink: CustomHyperlink) => unknown | falselinkify
| | linkifyIt() | linkifyIt.LinkifyIt | false`