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
• 🙈 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

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
• 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
  • Style Detection
  • Other Events
  • Customizing Styles
• API Reference
• Web Support
• macOS Support
• Contributing
• Future Plans
• License

Prerequisites

Native (iOS / Android / macOS)

• Requires the React Native New Architecture (Fabric)
• Supported React Native releases: 0.81, 0.82, 0.83, and 0.84
• 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.

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.

[!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.

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, mentions, 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)

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.