Registry / messaging / react-native-markdown-display

react-native-markdown-display

library7.0.2jsnpmunverified

A CommonMark-compliant Markdown renderer for React Native that uses native components instead of WebViews. Version 7.0.2 supports extended syntax (URL autolinking, typographer) via the underlying markdown-it library. Originally forked from react-native-markdown-renderer, it offers style customization, rule overrides, and debug tree printing. This is the replacement for react-native-markdown-renderer with many bug fixes and enhancements. Active development, with frequent releases.

messaging

npm install react-native-markdown-display

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-MARKD

react-native-markdown-display

messagingjavascriptv7.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Markdown

✓ import Markdown from 'react-native-markdown-display'

✗ const Markdown = require('react-native-markdown-display')

Default export; ESM preferred. TypeScript types are included.

default (unnamed)

✓ import Markdown from 'react-native-markdown-display'

✗ import { Markdown } from 'react-native-markdown-display'

Named import is incorrect; the module exports a default component.

TypeScript types

✓ import Markdown from 'react-native-markdown-display'

Types are bundled; no separate type import needed.

Basic usage: renders a Markdown string using native components in a scrollable view.

import React from 'react'; import { SafeAreaView, ScrollView } from 'react-native'; import Markdown from 'react-native-markdown-display'; const markdownContent = `# Hello This is **bold** and *italic*. - List item 1 - List item 2 `; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <ScrollView> <Markdown>{markdownContent}</Markdown> </ScrollView> </SafeAreaView> ); }

Debug

Known issues

breakingUpgrading from react-native-markdown-renderer: style and rule APIs changed; styles that previously used rule names like 'heading1' now require nested object under 'heading'.

fix

Migrate to the new styling format documented in the library's README; see 'How to style stuff' section.

affects: <7.0.0

breakingDefault markdown-it configuration includes typographer:true which may cause unexpected character transformations (e.g., quotes, dashes).

fix

Pass custom markdownit prop with `typographer:false` if needed.

affects: >=7.0.0

deprecatedThe `renderer` prop is an advanced feature and may be removed in future versions; prefer using `rules` and `style` props.

fix

Use `rules` and `style` instead of custom `AstRenderer`.

affects: >=7.0.0

gotchaThe `children` prop must be a string (or pre-parsed tree) – not JSX. Passing JSX as children will cause a rendering error.

fix

Ensure children is a string literal or variable containing markdown text.

affects: >=7.0.0

gotchaImage URIs must match one of the allowedImageHandlers (default: ['data:image/png;base64', ... 'http://']), otherwise the defaultImageHandler value is prepended, which may break the URI.

fix

Customize `allowedImageHandlers` prop to include your URI schemes, or ensure images use one of the default schemes.

affects: >=7.0.0

Errors

Common errors & fixes

TypeError: Cannot read property 'map' of undefined

Passing an empty string or non-string value as children prop.

fix

Ensure children is a non-empty string: `<Markdown>{'some text'}</Markdown>`.

Invariant Violation: 'list' has not been registered. This likely means you have multiple versions of react-native.

Incorrect setup with multiple React Native instances (common in expo or monorepos).

fix

Use a single version of react-native; avoid linking duplicate copies.

Module not found: Can't resolve 'react-native-markdown-display'

Package not installed or import path incorrect.

fix

Run `npm install react-native-markdown-display` and verify import: `import Markdown from 'react-native-markdown-display'`.

Style property 'fontSize' is not supported by native Text component

Applying invalid custom style keys to nested text components (e.g., heading style with unsupported properties).

fix

Only use compatible React Native Text style properties; review default styles as reference.

Upgrade

Version history

7.0.2latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React component rendering

react-nativerequiredpeer dependency for native components

markdown-itrequiredinternal dependency for parsing Markdown to AST

Agent activity

32 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/iamacup/react-native-markdown-display ↗

packagereact-native-markdown-display ↗

homepagehttps://github.com/iamacup/react-native-markdown-display/ ↗