README.md

react-native-enriched-markdown

react-native-enriched-markdown is a powerful React Native library that renders Markdown content as native text and provides a rich text input with Markdown output. It supports iOS, Android, macOS, and Web, and requires the New Architecture (Fabric) for native platforms.

EnrichedMarkdownText

• ⚡ Fully native text rendering (no WebView)
• 🌐 Web support via react-native-web + md4c compiled to WebAssembly
• 🎯 High-performance Markdown parsing with md4c
• 📐 CommonMark standard compliant
• 📊 GitHub Flavored Markdown (GFM)
• 🧮 LaTeX math rendering (block $$...$$ with flavor="github", inline $...$ in all flavors)
• 🔀 Markdown Streaming support (via react-native-streamdown)
• 🎨 Fully customizable styles for all elements
• ✨ Text selection and copy support
• 📌 Custom text selection context menu items
• 🔗 Interactive link handling with per-URL-pattern styling (linkVariants)
• 👤 Renders mentions as styled links (compatible with EnrichedMarkdownTextInput mention output)
• 🙈 Spoiler text with animated particle overlay and tap-to-reveal
• 🖼️ Native image interactions (iOS: Copy, Save to Camera Roll)
• 🌐 Native platform features (Translate, Look Up, Search Web, Share)
• 🗣️ Accessibility support (VoiceOver on iOS, TalkBack on Android, semantic HTML on web)
• 🔄 Full RTL (right-to-left) support including text, lists, blockquotes, tables, and task lists

EnrichedMarkdownTextInput

• ✏️ Rich text input with Markdown output
• 🕹️ Imperative API for toggling styles and managing links
• 📋 Native context menu with formatting submenu
• 🔍 Real-time style state detection
• 🔗 Auto-link detection with customizable regex
• 🔄 Smart copy/paste with Markdown preservation
• 🎨 Customizable bold, italic, and link colors
• 👤 Mentions with configurable indicators, suggestion lifecycle events, and per-pattern link styling

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.

Table of Contents

• Prerequisites
• Installation
• Native assets (install-time download)
• EnrichedMarkdownText
  • Usage
  • Supported Markdown Elements
  • Copy Options
  • Accessibility
  • RTL Support
  • Customizing Styles
  • LaTeX Math
  • Image Caching
  • Markdown Streaming
• EnrichedMarkdownTextInput
  • Usage
  • Inline Styles
  • Links
  • Auto-Link Detection
  • Mentions
  • Style Detection
  • Other Events
  • Customizing Styles
• API Reference
• Testing with Jest
• Web Support
• macOS Support
• Compatibility Table
• Contributing
• Future Plans
• License

Prerequisites

Native (iOS / Android / macOS)

• Requires the React Native New Architecture (Fabric)
• See Compatibility Table for supported React Native versions
• macOS support via react-native-macos 0.81+

Web

• Requires react-native-web and Metro (or another bundler with .web.tsx platform resolution)
• No New Architecture requirement — the web renderer runs entirely in JavaScript via WebAssembly
• Only EnrichedMarkdownText is supported on web (EnrichedMarkdownTextInput is native-only)
• LaTeX math requires the optional katex peer dependency

Installation

Web

No steps beyond having react-native-web configured. For LaTeX math, install the optional peer dependency:

npm install katex
# or
yarn add katex

See Web Support for full setup details, supported features, and prop behaviour.

Bare React Native app (iOS / Android)

1. Install the library

yarn add react-native-enriched-markdown

Tip

To try the latest features before they land in a stable release, install the nightly build:

yarn add react-native-enriched-markdown@nightly

Nightly versions are published to npm automatically and may contain breaking changes.

Note

On install, a postinstall script downloads the large native assets used by code highlighting and iOS LaTeX math (kept out of the npm tarball to keep it ~1 MB). This needs network access to registry.npmjs.org and github.com. If you install offline, with --ignore-scripts, or with pnpm (which blocks dependency scripts by default), see Native assets for how to restore them. If you don't use a feature, skip its download with an "enriched-markdown": { "enableCodeHighlight": false, "enableMath": false } block in your app's package.json — see Skipping the download.

2. Install iOS / macOS dependencies

The library includes native code so you will need to re-build the native app.

# iOS
cd ios && bundle install && bundle exec pod install

# macOS (react-native-macos)
cd macos && bundle install && bundle exec pod install

Expo app

1. Install the library

npx expo install react-native-enriched-markdown

2. Run prebuild

The library includes native code so you will need to re-build the native app.

npx expo prebuild

Note

The library won't work in Expo Go as it needs native changes.

Note

npx expo install runs the same postinstall asset download described under Native assets; it needs network access and does not work with Yarn PnP.

Important

iOS: Save to Camera Roll

If your Markdown content includes images and you want users to save them to their photo library, add the following to your Info.plist:

<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs access to your photo library to save images.</string>

EnrichedMarkdownText

See EnrichedMarkdownText for detailed documentation on usage examples, GFM tables, task lists, link handling, supported elements, copy options, accessibility, RTL support, and customizing styles. Mentions created by EnrichedMarkdownTextInput render as styled links — use linkVariants to customize their appearance.

EnrichedMarkdownTextInput

See EnrichedMarkdownTextInput for detailed documentation on usage examples, inline styles, links, style detection, events, and customizing styles.

API Reference

See the API Reference for a detailed overview of all the props, methods, and events available.

Web Support

See Web Support for details on supported features, web-specific prop behaviour, and known limitations.

macOS Support

react-native-enriched-markdown supports macOS via react-native-macos. See macOS Support for details on macOS-specific features, known limitations, and the example app.

Future Plans

We're actively working on expanding the capabilities of react-native-enriched-markdown. Here's what's on the roadmap:

• EnrichedMarkdownTextInput: headings, lists, blockquotes, code blocks, inline images
• EnrichedMarkdownTextInput web support
• macOS: block math rendering, VoiceOver accessibility, tail fade-in animation
• Web: spoiler text, streaming animation, configurable link target, copy options (Copy as Markdown, multi-format clipboard)

Compatibility Table

	0.82	0.83	0.84	0.85	0.86	0.87
nightly	⛔	✅	✅	✅	✅	✅
1.0.0	⛔	✅	✅	✅	✅	✅
0.7.0	⛔	✅	✅	✅	✅	✅
0.6.0	⛔	✅	✅	✅	⛔	⛔
0.5.0	⛔	✅	✅	✅	⛔	⛔
0.4.x	✅	✅	✅	⛔	⛔	⛔
0.3.0	✅	✅	✅	⛔	⛔	⛔

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

react-native-enriched-markdown library is licensed under The MIT License.

---

Built by Software Mansion.