A simple and customizable library to display hyperlinks in React Native

$3

- 🛑 Automatic detection for links, mentions and hashtags
- 🔤 Full unicode support
- 🌐 International domains support
- 💅 Custom hyperlink style
- ⚙️ Custom linkify-it instance
- 📦 Tiny
- 🚀 Created with Typescript

$3

Uses linkify-it under the hood. Created for my social network app, Drakkle

$3

``bash
yarn add react-native-hyperlinks linkify-it
`

$3

`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 (
text="Hello!! @andresribeiro #hi https://duck.com aaaaa"
style={{ fontSize: 18 }}
hyperlinkStyle={{ color: 'purple' }}
onLinkPress={handleOnLinkPress}
onMentionPress={handleOnMentionPress}
onHashtagPress={handleOnHashtagPress}
/>
);
}
`

$3

| Property | Default | Type | Required
| ---- | ---- | ---- | ----
| text | undefined | string | true
| hyperlinkStyle | undefined | StyleProp | false
| autoDetectMentions | true | boolean | false
| autoDetectHastags | true | boolean | false
| customHyperlinks | undefined | CustomHyperlink[] | false
| onLinkPress | undefined | (link: string) => unknown | false
| onMentionPress | undefined | (username: string) => unknown | false
| onHashtagPress | undefined | (tag: string) => unknown | false
| onCustomHyperlinkPress | undefined | (hyperlink: CustomHyperlink) => unknown | false
| linkify | linkifyIt() | linkifyIt.LinkifyIt | false`