React Native Markdown Display

Markdown rendering and editing primitives for React Native, running only in JS. No native code needed.

@ronradtke/react-native-markdown-display turns markdown into real React Native views, not a WebView. It pairs a typed markdown viewer with optional input and composer components, so the same package can power read-only content, message previews, documentation screens, and markdown authoring flows.

✨ Why This Package

• ⚡ Native rendering pipeline: markdown is parsed with markdown-it, normalized into an AST, and rendered with React Native components.
• 🧱 No WebView dependency: content participates in your React Native layout, styling, theming, navigation, and event handling.
• 🧩 Typed customization surface: override styles, render rules, link handling, parser behavior, and image handling with TypeScript-friendly APIs.
• ✍️ Viewer and editor pieces: use <Markdown> for display, MarkdownStream for streaming text, or MarkdownTextInput / MarkdownComposer for authoring.
• 🔌 Extensible markdown support: bring your own markdown-it instance or opt into bundled plugins such as underline.

This package is intended as a modern replacement for react-native-markdown-renderer, with stricter typing and a maintained native rendering architecture.

📦 Install

Yarn

yarn add @ronradtke/react-native-markdown-display

npm

npm install @ronradtke/react-native-markdown-display

🚀 Quick Start

👁️ Viewer

importReactfrom'react';import{SafeAreaView,ScrollView}from'react-native';importMarkdownfrom'@ronradtke/react-native-markdown-display';constvalue=`# HelloThis is **markdown** rendered with native React Native components.`;exportdefaultfunctionApp(): React.JSX.Element{return(<SafeAreaView><ScrollView><Markdown>{value}</Markdown></ScrollView></SafeAreaView>);}

✍️ Composer

importReactfrom'react';import{SafeAreaView,View}from'react-native';importMarkdown,{MarkdownComposer}from'@ronradtke/react-native-markdown-display';exportdefaultfunctionApp(): React.JSX.Element{const[value,setValue]=React.useState('## Draft message');return(<SafeAreaView><Viewstyle={{flex: 1,gap: 16,padding: 16}}><MarkdownComposeronChangeText={setValue}previewEnabledvalue={value}/><Markdown>{value}</Markdown></View></SafeAreaView>);}

🛠️ What You Can Build

Use case	Component
📖 Render markdown content	<Markdown>
⏱️ Render actively streaming markdown text	MarkdownStream
⌨️ Add a markdown-aware text input	MarkdownTextInput
🧰 Ship an opinionated markdown composer with toolbar and preview	MarkdownComposer
🔎 Preview an editor value with the same renderer	MarkdownPreview

📝 Supported Markdown

The default parser supports common markdown content including:

• headings, paragraphs, horizontal rules, and blockquotes
• bold, italic, strikethrough, inline code, and links
• ordered and unordered lists
• fenced and indented code blocks
• tables
• images with configurable URL handlers
• typographer replacements from markdown-it

You can extend or restrict the syntax by passing a custom markdown-it instance through the markdownit prop. Underline support is included as an opt-in plugin via createMarkdownIt({underline: true}) or underlinePlugin.

🎛️ Customization

The viewer is designed to be customized at the right layer:

• 🎨 use style for visual changes
• 🧬 use rules when a markdown node should render differently
• 🔗 use onLinkPress to control navigation
• ⚙️ use markdownit to change parsing behavior
• 🖼️ use allowedImageHandlers and defaultImageHandler to control image sources
• 🧭 use debugPrintTree to inspect the AST while integrating custom syntax

📚 Documentation

• Viewer guide: rendering, styles, custom rules, MarkdownIt, preprocessing, and streaming
• Input guide: MarkdownTextInput, MarkdownComposer, toolbars, prompts, shortcuts, and previews
• Editor architecture note: internal editor model and design notes
• Example app: local example project

📄 License

MIT