react-native-markdown-display

The rules prop allows you to define custom render functions for specific Markdown elements. Each rule is a function that receives (node, children, parent, styles) and should return a React element. This is useful for injecting custom logic or unique UI components into the Markdown tree.

Example of overriding headings:

const rules = {
    heading1: (node, children, parent, styles) =>
      <Text key={node.key} style={[styles.heading, styles.heading1]}>
        >> H1 TEXT HERE >> "{children}"
      </Text>,
};

<Markdown rules={rules}>
  {copy}
</Markdown>

To use the library, import the Markdown component and pass your markdown string as children. The renderer uses native components rather than a WebView, allowing for native styling and performance.

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

const copy = `# h1 Heading 8-) 

**This is some bold text!**

This is normal text
`;

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={{height: '100%'}}
        >
          <Markdown>
            {copy}
          </Markdown>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default App;

You can install react-native-markdown-display using either Yarn or NPM.

Yarn:

yarn add react-native-markdown-display

NPM:

npm install -S react-native-markdown-display

If you need to process Markdown data outside the component, you can convert a string into an Abstract Syntax Tree (AST) using stringToTokens and tokensToAST. You can then pass this AST directly as the children of the Markdown component.

import Markdown, { MarkdownIt, tokensToAST, stringToTokens } from 'react-native-markdown-display';

const markdownItInstance = MarkdownIt({typographer: true});
const ast = tokensToAST(stringToTokens(copy, markdownItInstance));

<Markdown>
  {ast}
</Markdown>

⚠️ Note: react-native-markdown-display is no longer actively maintained.

It is highly recommended to migrate to react-native-enriched-markdown. This is a high-performance, fully native Markdown renderer built with Fabric (New Architecture) that uses md4c for fast, standards-compliant parsing. It supports CommonMark, GFM, native text selection, accessibility, and RTL support.

To install the recommended replacement:

yarn add react-native-enriched-markdown

You can apply styles to Markdown elements using a style object passed to the Markdown component. The styling system works similarly to CSS: styles applied to the body key act as global defaults for the entire document and can be overridden by more specific element styles (e.g., heading1).

Important Note on 'text' styling: The text rule is not applied to all rendered text (for example, it does not apply to list bullet points). To color all text in the document, apply the color to the body style instead.

<Markdown
  style={{
    body: {color: 'red', fontSize: 10},
    heading1: {color: 'purple'},
    code_block: {color: 'black', fontSize: 14}
  }}
>
  {copy}
</Markdown>

You can disable specific Markdown features (like images or links) by passing a configured markdownit instance to the Markdown component. The library exports MarkdownIt so you can configure it without adding it as a direct dependency.

import Markdown, { MarkdownIt } from 'react-native-markdown-display';

<Markdown
  markdownit={MarkdownIt({typographer: true}).disable([ 'link', 'image' ])}
>
  {copy}
</Markdown>

By default, links use React Native's Linking.openURL. You can intercept link clicks using the onLinkPress callback.

• Return true to allow the default Linking.openURL behavior.
• Return false to handle the link press yourself (e.g., for custom navigation or logic).

const onLinkPress = (url) => {
    if (url) {
      // custom logic here
      return false;
    }
    return true;
  }

<Markdown onLinkPress={onLinkPress}>
  {copy}
</Markdown>