Getting Started

react-native-marked is a Markdown renderer for React Native powered by marked.js with built-in theming.

  • Headings, paragraph, emphasis, links, images, blockquote, lists, tables, code blocks — see Supported Elements
  • Theming via theme + styles props
  • Custom rendering via Renderer class
  • Embed interactive React components via useMarkdownWithComponents

Quick Start

yarn add react-native-marked react-native-svg
import Markdown from "react-native-marked";

export default function App() {
  return (
    <Markdown
      value={`# Hello\n\nWrite **markdown** here.`}
      flatListProps={{ initialNumToRender: 8 }}
    />
  );
}

When to use which API?

APIUse case
Markdown componentDrop-in FlatList wrapper, easiest
useMarkdown hookYou control ScrollView/FlatList/virtualization
useMarkdownWithComponentsNeed JSX components inside markdown (<Button />, <InfoBox>)

Continue to Installation or jump to Component usage.