react-native-markdown-display

react-native-markdown-display renders Markdown text as native React Native components rather than a WebView, parsing input with markdown-it (giving it full CommonMark spec compliance) and converting the resulting token stream into a styled component tree via a custom AST renderer. It supports additional syntax sugar like automatic URL linking and typographic replacements, and every rendered element’s style can be overridden through a style prop mapped by Markdown token type.

Originally created by Mient-jan Stelling as react-native-markdown-renderer and continued as react-native-markdown-display, it is a long-standing, widely adopted choice for rendering chat messages, documentation, and rich text content natively in React Native apps on both iOS and Android.

What You Get

• A <Markdown> component that renders CommonMark-compliant Markdown as native React Native views
• Per-token-type style overrides via a single style prop object keyed by Markdown element type
• Syntax extensions beyond base CommonMark: automatic URL/email autolinking and typographic replacements
• A pluggable rules object letting consumers override how any specific Markdown token renders
• TypeScript type definitions (index.d.ts) bundled for editor autocomplete and type checking

Common Use Cases

• Rendering chat or messaging app content that includes bold, links, lists, or code blocks natively
• Displaying documentation, changelogs, or help content authored in Markdown inside a mobile app
• Building content/CMS-driven mobile apps where editors write Markdown and the app renders it as native UI
• Customizing the visual theme of rendered Markdown to match an app’s design system via the style-override API

Under The Hood

Architecture The library pipes raw Markdown text through markdown-it to produce a token stream, then src/lib/util/tokensToAST.js and stringToTokens.js transform that stream into an internal AST, src/lib/AstRenderer.js walks the resulting tree and dispatches each node to the matching renderer function in renderRules.js, and a collection of small util/ helpers (token cleanup, inline-token flattening, style conversion) support this pipeline.

Tech Stack Plain JavaScript (no build step required by consumers — published as source), depending on markdown-it for CommonMark parsing, css-to-react-native for style conversion, prop-types for runtime prop validation, and react-native-fit-image for responsive image rendering; declares react and react-native as peer dependencies.

Code Quality The codebase is organized into small, single-responsibility modules under src/lib/util/, each handling one transformation step (token cleanup, AST conversion, style stripping); the repository does not include an automated test suite, relying instead on ESLint/Prettier configuration and community usage for quality assurance.

API Design Usage is a single <Markdown>{markdownString}</Markdown> component call for the common case, with an escape hatch for full styling and rendering control via the style and rules props — this makes basic adoption very fast, while deeper customization requires reading the renderRules source to know each token’s default renderer.