react-native-remark provides elegant and powerful Markdown rendering capabilities for React Native applications.

Features

• 📱 Render Markdown in React Native applications
• 🎯 Supports GitHub Flavored Markdown (GFM)
• 🌈 Syntax highlighting for code blocks
• 📊 Table rendering with horizontal scroll view
• 🖼️ Inline and block image rendering
• 🌙 Dark Mode support
• ⚙️ Custom renderers and styles for flexible UI customization
• 🧩 Supports Remark plugins to enhance capabilities

Installation

npm install react-native-remark

Usage

import { Markdown } from "react-native-remark";

const markdown = `
# Hello World! 👋

This is a **Markdown** example with [a link](https://reactnative.dev).

- List item 1
- List item 2
`;

export default function App() {
  return (
    <Markdown
      markdown={markdown}
      customRenderers={{
        // Override default renderers for mdast nodes.
        // Checkout https://github.com/imwithye/react-native-remark/blob/main/src/renderers/index.tsx
        // for the default renderers.
        InlineCodeRenderer: ({ node }) => (
          <Text style={{ color: "blue" }}>{node.value}</Text>
        ),
        ThematicBreakRenderer: () => (
          <View style={{ height: 5, backgroundColor: "red" }} />
        ),
      }}
      customStyles={{
        // Override default styles
        // Checkout https://github.com/imwithye/react-native-remark/blob/main/src/themes/default.tsx
        // for the default styles.
        inlineCode: {
          color: "red",
        },
        text: {
          color: "red",
        },
      }}
      onCodeCopy={(code) => Clipboard.setStringAsync(code)}
      onLinkPress={(url) => Linking.openURL(url)}
    />
  );
}

Supported Custom Renderers

All mdast node types have corresponding renderers, and each renderer can be fully customized. A renderer receives the following props:

// The current mdast node
node: any;

// The parent node, if it exists
parent?: Node;

// The index of this node within the parent's children
index?: number;

Checkout renderers for the default implementations. To ensure type safety when creating custom renderers, you can use the RendererArgs<MdastType> props interface.

Note that the library ships with renderers for the remark-gfm plugin since we think it is often used. You don't need to pass custom renderers (though you can!) for this plugin.

Supported Themes

Themes are pre-defined style collections that provide consistent visual styling for markdown content. Currently, we support two built-in themes:

1. default
2. serif
3. github

To use a theme, you can follow this pattern:

import { themes } from "react-native-remark"
const { serifTheme } = themes;

// Then you can use it with
<Markdown theme={serifTheme} ... />

Custom styles will override the selected theme's default styles.

Supported Custom Styles

Checkout default.tsx for default styles.

Remark plugins usage

You can inject Remark plugins via the remarkPlugins prop. For example, you can use remark-cjk-friendly to add support for bold (**) with Chinese, Japanese and Korean alphabets by doing the following:

import remarkCjkFriendly from "remark-cjk-friendly";
import remarkGfm from "remark-gfm";

<Markdown remarkPlugins={[remarkGfm, remarkCjkFriendly]} /* ... */ />;

Note that:

• though remark-gfm is supported out of the box, you'll need to add the plugin manually when injecting other Remark plugins
• when using plugins that add support for additional nodes, you'll need to inject the required renderers using the customRenderers prop
• ⚠️ asynchronous plugins aren't supported yet; passing any asynchronous plugin will result in a crash ⚠️

Quick Look

Contribute

See CONTRIBUTING.md for ways to get started.

This project has a CODE OF CONDUCT. By interacting with this repository, organization, or community you agree to abide by its terms.

Star History