react-native-remark provides elegant and powerful Markdown rendering capabilities for React Native applications.
- π± 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
npm install react-native-remark
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)} /> ); }
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.
Themes are pre-defined style collections that provide consistent visual styling for markdown content. Currently, we support two built-in themes:
- default
- serif
- github
To use a theme, you can follow this pattern:
import { themes } from "react-native-remark" const { serifTheme } = themes; // Thene you can use it with <Markdown theme={serifTheme} ... />
Custom styles will override the selected theme's default styles.
Checkout default.tsx for default styles.
| Style Key | Description | Example Markdown Element |
|---|---|---|
blockquote |
Styles for blockquotes | > This is a blockquote |
borderColor |
Default border color used globally | Borders, thematic breaks |
break |
Line break styling (empty by default) | Line breaks |
codeBlock |
Styles for code blocks | code blocks |
container |
Container layout spacing | Root container layout |
delete |
Deleted text style | |
emphasis |
Italic text style | italic or italic |
footnoteReference |
Style for footnote references | Footnote markers |
heading |
Heading styles (h1, h2, h3...) | # Heading |
image |
Image styling | Inline or block images |
inlineCode |
Inline code styling | inline code |
link |
Link styling | link |
linkReference |
Reference-style links | [reference][id] |
list |
List container styling | Lists (- item or 1. item) |
listItem |
List item styling | Each list item |
paragraph |
Paragraph text styling | Normal paragraphs |
strong |
Bold text style | bold |
tableCell |
Table cell text styling | Table cell contents |
text |
General text style | Plain text |
thematicBreak |
Horizontal rule styling | --- |
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.