@hake/react-native-markdown

High-performance, extensible React Native Markdown component with full remark plugin support.

Features

• 🚀 High Performance: Direct AST-to-React Native rendering (no HTML conversion)
• 🔌 Extensible: Full support for remark plugins and custom renderers
• 📦 Lightweight: Only depends on remark-related packages
• 🎨 Customizable: Full control over styles and rendering(Light and Dark mode
• 💪 TypeScript: Complete type definitions included
• ⚡ Optimized: Built-in memoization and caching

Installation

npm install @hake/react-native-markdown
# or
yarn add @hake/react-native-markdown
# or
bun add @hake/react-native-markdown

Quick Start

import { MarkdownView } from '@hake/react-native-markdown';

function App() {
  return (
    <MarkdownView>
      {`# Hello World

This is **bold** and this is *italic*.

- Item 1
- Item 2
- Item 3`}
    </MarkdownView>
  );
}

Basic Usage

Simple Markdown Rendering

import { MarkdownView } from '@hake/react-native-markdown';

<MarkdownView>
  {`# Heading 1
## Heading 2

A paragraph with **bold** and *italic* text.

\`\`\`javascript
const code = 'example';
\`\`\``}
</MarkdownView>

Custom Styles

import { MarkdownView } from '@hake/react-native-markdown';
import type { MarkdownStyles } from '@hake/react-native-markdown';

const customStyles: MarkdownStyles = {
  heading: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
  },
  paragraph: {
    marginBottom: 16,
    lineHeight: 24,
  },
  link: {
    color: '#0066cc',
    textDecorationLine: 'underline',
  },
};

<MarkdownView styles={customStyles}>
  {markdownContent}
</MarkdownView>

Using Remark Plugins

import { MarkdownView } from '@hake/react-native-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';

<MarkdownView
  plugins={[
    { plugin: remarkGfm },
    { plugin: remarkMath, options: { /* options */ } },
  ]}
>
  {markdownContent}
</MarkdownView>

Custom Renderers

import { MarkdownView } from '@hake/react-native-markdown';
import type { NodeRenderer } from '@hake/react-native-markdown';
import type { Heading } from 'mdast';
import { Text } from 'react-native';

const customHeadingRenderer: NodeRenderer<Heading> = (node, children) => {
  return (
    <Text style={{ fontSize: 24, fontWeight: 'bold', color: 'purple' }}>
      {children}
    </Text>
  );
};

<MarkdownView
  renderers={{
    heading: customHeadingRenderer,
  }}
>
  {markdownContent}
</MarkdownView>

Code Syntax Highlighting

This package supports syntax highlighting for code blocks using react-native-code-highlighter and react-syntax-highlighter.

import { MarkdownView } from '@hake/react-native-markdown';
import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';

<MarkdownView
  codeHighlighter={{
    hljsStyle: atomOneDarkReasonable,
    textStyle: { fontSize: 14 },
  }}
>
  {`\`\`\`javascript
const hello = "world";
console.log(hello);
\`\`\``}
</MarkdownView>

Note: All code (both inline and block) is rendered using CodeHighlighter. If hljsStyle is not provided, the default theme will be used.

Link Handling

import { Linking } from 'react-native';

<MarkdownView
  onLinkPress={(url) => {
    Linking.openURL(url).catch((err) => {
      console.error('Failed to open URL:', err);
    });
  }}
>
  {markdownContent}https://raw.githubusercontent.com/GetStream/stream-chat-react-native/master/screenshots/3.png
</MarkdownView>

API Reference

MarkdownView

Main component for rendering markdown.

Props

Prop	Type	Default	Description
children	string	required	Markdown content to render
styles	MarkdownStyles	undefined	Custom styles for markdown elements
renderers	CustomRenderers	undefined	Custom renderers for specific node types
plugins	RemarkPlugin[]	[]	Remark plugins to use
debug	boolean	false	Enable debug logging
maxListDepth	number	10	Maximum depth for nested lists
onLinkPress	(url: string) => void	undefined	Callback when a link is pressed
onImageError	(error: Error) => void	undefined	Callback when an image fails to load
codeHighlighter	CodeHighlighterConfig	undefined	Configuration for code syntax highlighting

MarkdownStyles

Interface for customizing markdown element styles. https://raw.githubusercontent.com/GetStream/stream-chat-react-native/master/screenshots/3.png

interface MarkdownStyles {
  heading?: TextStyle;
  heading1?: TextStyle;
  heading2?: TextStyle;
  heading3?: TextStyle;
  heading4?: TextStyle;
  heading5?: TextStyle;
  heading6?: TextStyle;
  paragraph?: TextStyle;
  text?: TextStyle;
  strong?: TextStyle;
  emphasis?: TextStyle;
  code?: TextStyle;
  codeBlock?: ViewStyle & { container?: ViewStyle };
  inlineCode?: TextStyle;
  link?: TextStyle;
  image?: ImageStyle;
  list?: ViewStyle;
  listItem?: ViewStyle;
  orderedList?: ViewStyle;
  unorderedList?: ViewStyle;
  blockquote?: ViewStyle & { text?: TextStyle };
  horizontalRule?: ViewStyle;
}

useMarkdown Hook

Hook for parsing markdown asynchronously.

const { ast, error, isLoading } = useMarkdown(markdown, plugins);

useMarkdownStyles Hook

Hook for merging custom styles with defaults.

const styles = useMarkdownStyles(customStyles);

Extending with Plugins

This package supports the full remark plugin ecosystem. Here are some popular plugins:

• remark-gfm - GitHub Flavored Markdown
• remark-math - Math support
• remark-breaks - Hard line breaks
• remark-frontmatter - Frontmatter support

Example:

import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';

<MarkdownView plugins={[{ plugin: remarkGfm }, { plugin: remarkMath }]}>
  {markdownContent}
</MarkdownView>

Creating Custom Renderers

You can create custom renderers for any node type:

import type { NodeRenderer } from '@hake/react-native-markdown';
import type { Code } from 'mdast';
import { Text } from 'react-native';

const myCodeRenderer: NodeRenderer<Code> = (node, children, context) => {
  return (
    <Text style={context.styles.code}>
      {node.value}
    </Text>
  );
};

<MarkdownView renderers={{ code: myCodeRenderer }}>
  {markdownContent}
</MarkdownView>

TypeScript Support

This package is written in TypeScript and includes full type definitions. All types are exported for use in your code:

import type {
  MarkdownViewProps,
  MarkdownStyles,
  CustomRenderers,
  RemarkPlugin,
  NodeRenderer,
} from '@hake/react-native-markdown';

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT