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.

Configuration

Add an "enriched-markdown" block to your app's package.json to configure which features are enabled:

{
  "enriched-markdown": {
    "enableCodeHighlight": true,
    "enableMath": true,
    "codeHighlightLanguages": ["javascript", "typescript", "python", "swift", "kotlin"]
  }
}

| Key | Type | Default | Description | |---|---|---|---| | enableCodeHighlight | boolean | true | Download and compile tree-sitter grammars for syntax highlighting | | enableMath | boolean | true | Download RaTeX for LaTeX math rendering (iOS) and include the Maven dependency (Android) | | codeHighlightLanguages | string[] | all default grammars | Subset of languages to compile (reduces binary size). Ignored when enableCodeHighlight is false; an empty array [] compiles none (same as disabling). |

Your app's package.json is the single source of truth. postinstall reads it to decide what to download into node_modules, and the native build (iOS podspec / Android build.gradle) reads it directly to decide what to compile and link — no Podfile ENV vars or gradle.properties edits needed. Changing a value takes effect on your next pod install / native rebuild; enabling a feature that was off also needs a reinstall (npm install / npm rebuild react-native-enriched-markdown) so its assets get downloaded.

[!IMPORTANT] iOS applies config at pod install, not at build time. After editing the enriched-markdown block, run pod install (a plain run-ios reuses the previously resolved pod). When disabling a feature that was already compiled in — or narrowing codeHighlightLanguages — also do a clean build (Product > Clean Build Folder), since Xcode's incremental build can link a stale pod library. Android reconfigures on every build and needs neither step.

[!TIP] If you don't use a feature, disabling it skips the download and excludes it from the native build. See Skipping the download for details.

[!NOTE] Monorepos: the native build reads the app's package.json (the one next to ios//android/), so each app can enable/disable features independently. The download opt-out is resolved where you run the install — usually the workspace root — so to skip a download entirely, put the opt-out in the root package.json.

[!NOTE] Migrating from the Expo config plugin or the ENV / gradle.properties build flags? See Breaking changes.

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.