Package Exports

@hake/react-native-markdown
@hake/react-native-markdown/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hake/react-native-markdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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}
</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.

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