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

Installation

npm install react-native-remark

Usage

import React from "react";
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.
            ...
        }}
        customStyles={{
            // Override default styles
            // Checkout https://github.com/imwithye/react-native-remark/blob/main/src/themes/default.tsx
            // for the default styles.
            ...
        }}
        onCodeCopy={(code) => Clipboard.setStringAsync(code)}
        onLinkPress={(url) => Linking.openURL(url)}
      />
  );
}

Quick Look

Heading

List

Code Block

Table Block

Development

pnpm i
cd example && pnpm i && pnpm run ios

Star History