@ronradtke/react-native-markdown-display

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

import React from 'react';
import {SafeAreaView, ScrollView} from 'react-native';
import Markdown from '@ronradtke/react-native-markdown-display';

const value = `
# Hello

This is **markdown** rendered with native React Native components.
`;

export default function App(): React.JSX.Element {
    return (
        <SafeAreaView>
            <ScrollView>
                <Markdown>{value}</Markdown>
            </ScrollView>
        </SafeAreaView>
    );
}

Composer

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import Markdown, {MarkdownComposer} from '@ronradtke/react-native-markdown-display';

export default function App(): React.JSX.Element {
    const [value, setValue] = React.useState('## Draft message');

    return (
        <SafeAreaView>
            <View style={{flex: 1, gap: 16, padding: 16}}>
                <MarkdownComposer onChangeText={setValue} previewEnabled value={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