How to make links open in browser with react-native-hyperlink?

Set the linkDefault prop to true, which uses React Native's Linking API to open URLs. For custom handling, use the onPress callback to implement specific actions like navigation or analytics.

Can react-native-hyperlink detect custom URL schemes?

Yes, by customizing the linkify object prop with linkify-it, you can add custom schemas. However, this requires manual configuration and familiarity with the linkify-it library.

React native hyperlink styling not working, how to fix?

Ensure the linkStyle prop is applied correctly and that nested Text components are properly wrapped. Check for style conflicts or use the injectViewProps prop for more dynamic styling based on URLs.

How to replace link text with custom names using react-native-hyperlink?

Use the linkText prop with a function that returns the desired text, as shown in the README example where 'https://github.com/obipawan/hyperlink' is replaced with 'Hyperlink'.

react-native-hyperlink vs manual link parsing in React Native

react-native-hyperlink saves time with automatic detection and built-in styling, but manual parsing offers more control and avoids dependencies. Choose based on project complexity and need for customization.

Does react-native-hyperlink work with React Native Web?

Yes, the README mentions compatibility with react-native-web, making it suitable for cross-platform apps. However, test linking behavior as web environments may require additional setup for URL opening.

Open-Awesome

react-native-hyperlink

MITTypeScriptv0.1.1

A React Native component that automatically detects and makes URLs, emails, and fuzzy links clickable within text.

GitHub

812 stars85 forks0 contributors

What is react-native-hyperlink?

react-native-hyperlink is a React Native component that automatically detects URLs, email addresses, and fuzzy links within text and makes them clickable. It solves the problem of manually parsing text to add interactive links, providing a simple, declarative way to enhance text content with link functionality.

Target Audience

React Native and react-native-web developers who need to display text with clickable links, such as in chat apps, content viewers, or any app displaying user-generated content.

Value Proposition

Developers choose react-native-hyperlink for its ease of use, flexibility in styling and event handling, and support for nested text structures, eliminating the need for custom link parsing logic.

Overview

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

Use Cases

Best For

Adding clickable links to chat message bubbles in React Native apps
Displaying user-generated content with embedded URLs or emails
Creating rich text viewers with interactive links
Building cross-platform apps with react-native-web that need link detection
Enhancing accessibility by making links visually distinct and tappable
Implementing custom link handling with specific actions or analytics

Not Ideal For

Projects requiring full rich text rendering with elements like images, bold, or italics beyond links
Apps with stringent performance budgets where text parsing overhead is a concern
Teams needing to detect obscure or custom link formats not covered by linkify-it
Developers preferring zero-dependency solutions or built-in React Native components

Pros & Cons

Pros

Automatic Link Detection

Leverages the robust linkify-it library to reliably identify URLs, emails, and fuzzy links, eliminating the need for custom regex or manual parsing.

Flexible Styling and Events

Offers linkStyle for custom styles and onPress/onLongPress callbacks for handling interactions, allowing developers to tailor link appearance and behavior easily.

Nested Text Support

Works seamlessly with nested Text components in React Native, ensuring compatibility with complex layouts without breaking text structure.

Platform Fallback Integration

Includes linkDefault prop to use React Native's Linking API for opening links, providing a straightforward cross-platform solution out of the box.

Cons

Limited Rich Text Scope

Only handles link detection; it doesn't support other rich text features like Markdown, HTML, or media, which may require additional libraries or workarounds.

External Dependency Lock-in

Relies on linkify-it for parsing, meaning updates or issues with that library can directly affect this component, adding maintenance overhead.

Performance Overhead in Large Texts

Parsing text on every render for links could impact performance in apps with frequent text updates or very long content blocks, as noted in the dependency on linkify-it.

Frequently Asked Questions

Related Projects

react-native-markdown-display

React Native 100% compatible CommonMark renderer

Stars791

Forks201

Last commit5 months ago

react-native-responsive-fontsize

🔠 Responsive fontSize based on screen-size of the device in React-Native

Stars741

Forks39

Last commit6 months ago

react-native-html-to-pdf

Convert html strings to PDF documents using React Native

Stars462

Forks273