react-native-marked

Markdown renderer for React Native powered by marked.js with built-in theming support

Installation

For React Native 0.76 and above, please use the latest version.

yarn add react-native-marked react-native-svg

For React Native 0.75 and below, please use version 6.

yarn add [email protected] react-native-svg

Usage

Using Component

import * as React from "react";
import Markdown from "react-native-marked";

const ExampleComponent = () => {
  return (
    <Markdown
      value={`# Hello world`}
      flatListProps={{
        initialNumToRender: 8,
      }}
    />
  );
};

export default ExampleComponent;

Props

| Prop | Description | Type | Optional? | |---------------|----------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------| | value | Markdown value | string | false | | flatListProps | Props for customizing the underlying FlatList used | Omit<FlatListProps<ReactNode>, 'data' \| 'renderItem' \| 'horizontal'>('data', 'renderItem', and 'horizontal' props are omitted and cannot be overridden.) | true | | styles | Styles for parsed components | MarkedStyles | true | | theme | Props for customizing colors and spacing for all components,and it will get overridden with custom component style applied via 'styles' prop | UserTheme | true | | baseUrl | A prefix url for any relative link | string | true | | renderer | Custom component Renderer | RendererInterface | true | | hooks | Hooks run during parsing to transform tokens | Marked Hooks | true |

Using hook

useMarkdown hook will return list of elements that can be rendered using a list component of your choice.

import React, { Fragment } from "react";
import { ScrollView, useColorScheme } from "react-native";
import { useMarkdown, type useMarkdownHookOptions } from "react-native-marked";

const CustomComponent = () => {
  const colorScheme = useColorScheme();
  const options: useMarkdownHookOptions = {
    colorScheme
  }
  const elements = useMarkdown("# Hello world", options);
  return (
    <ScrollView>
      {elements.map((element, index) => {
        return <Fragment key={`demo_${index}`}>{element}</Fragment>
      })}
    </ScrollView>
  );
};

Options

| Option | Description | Type | Optional? | |-------------|----------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------|-----------| | colorScheme | Device color scheme ("dark" or "light") | ColorSchemeName | false | | styles | Styles for parsed components | MarkedStyles | true | | theme | Props for customizing colors and spacing for all components,and it will get overridden with custom component style applied via 'styles' prop | UserTheme | true | | baseUrl | A prefix url for any relative link | string | true | | renderer | Custom component Renderer | RendererInterface | true | | tokenizer | Generate custom tokens | MarkedTokenizer | true | | hooks | Hooks run during parsing to transform tokens | Marked Hooks | true |

Examples

• CodeSandbox: https://codesandbox.io/s/react-native-marked-l2hpi3?file=/src/App.js

Supported elements

• [x] Headings (1 to 6)
• [x] Paragraph
• [x] Emphasis (bold, italic, and strikethrough)
• [x] Link
• [x] Image
• [x] Blockquote
• [x] Inline Code
• [x] Code Block
• [x] List (ordered, unordered)
• [x] Horizontal Rule
• [x] Table
• [x] React Components (via useMarkdownWithComponents)
• [ ] HTML

Ref: CommonMark

HTML will be treated as plain text. Please refer issue#290 for a potential solution

Advanced

Embedding React Components in Markdown

You can embed React components directly in your markdown using JSX-style syntax. This is useful for adding interactive elements like buttons, custom info boxes, or any other React component.

import React, { Fragment } from "react";
import { Pressable, ScrollView, Text, View } from "react-native";
import {
  ReactComponentRegistryProvider,
  useMarkdownWithComponents,
  type ReactComponentRegistry,
} from "react-native-marked";

// Define your components
const components: ReactComponentRegistry = {
  Button: ({ props }) => (
    <Pressable onPress={() => console.log("Pressed!")}>
      <Text>{String(props.label ?? "Click me")}</Text>
    </Pressable>
  ),
  InfoBox: ({ props, children }) => (
    <View style={{ backgroundColor: "#E3F2FD", padding: 16 }}>
      {props.title && <Text style={{ fontWeight: "bold" }}>{String(props.title)}</Text>}
      <Text>{children}</Text>
    </View>
  ),
};

const markdown = `
# Hello World

Click the button below:

<Button label="Get Started" />

<InfoBox title="Note">
This is an info box with **markdown** content.
</InfoBox>
`;

function MarkdownContent() {
  const elements = useMarkdownWithComponents(markdown);
  return (
    <ScrollView>
      {elements.map((element, index) => (
        <Fragment key={index}>{element}</Fragment>
      ))}
    </ScrollView>
  );
}

export default function App() {
  return (
    <ReactComponentRegistryProvider components={components}>
      <MarkdownContent />
    </ReactComponentRegistryProvider>
  );
}

Component Syntax

• Self-closing: <ComponentName prop="value" />
• With children: <ComponentName>content</ComponentName>
• Props: Supports string ("value"), number ({42}), and boolean ({true}) props

Component Registry

Components must be registered via ReactComponentRegistryProvider. Unregistered components are automatically removed from the output.

Using custom components

Custom components can be used to override elements, i.e. Code Highlighting, Fast Image integration

Example

import React, { ReactNode, Fragment } from "react";
import { Text, ScrollView } from "react-native";
import type { ImageStyle, TextStyle } from "react-native";
import Markdown, { Renderer, useMarkdown } from "react-native-marked";
import type { RendererInterface } from "react-native-marked";
import FastImage from "react-native-fast-image";

class CustomRenderer extends Renderer implements RendererInterface {
  constructor() {
    super();
  }

  codespan(text: string, _styles?: TextStyle): ReactNode {
    return (
      <Text key={this.getKey()} style={{ backgroundColor: "#ff0000" }}>
        {text}
      </Text>
    );
  }

  image(uri: string, _alt?: string, _style?: ImageStyle): ReactNode {
    return (
      <FastImage
        key={this.getKey()}
        style={{ width: 200, height: 200 }}
        source={{ uri: uri }}
        resizeMode={FastImage.resizeMode.contain}
      />
    );
  }
}

const renderer = new CustomRenderer();

const ExampleComponent = () => {
  return (
    <Markdown
      value={"`Hello world`"}
      flatListProps={{
        initialNumToRender: 8,
      }}
      renderer={renderer}
    />
  );
};

// Alternate using hook
const ExampleComponentWithHook = () => {
  const elements = useMarkdown("`Hello world`", { renderer });

  return (
    <ScrollView>
      {elements.map((element, index) => {
        return <Fragment key={`demo_${index}`}>{element}</Fragment>
      })}
    </ScrollView>
  )
}

export default ExampleComponent;

Please refer to RendererInterface for all the overrides

Note:

For key property for a component, you can use the getKey method from Renderer class.

Example

Overriding default codespan tokenizer to include LaTeX.

import React, { ReactNode } from "react";
import Markdown, { Renderer, MarkedTokenizer, MarkedLexer } from "react-native-marked";
import type { RendererInterface, CustomToken } from "react-native-marked";

class CustomTokenizer extends Tokenizer {
  codespan(src: string): Tokens.Codespan | undefined {
    const match = src.match(/^\$+([^\$\n]+?)\$+/);
    if (match?.[1]) {
      return {
        type: "codespan",
        raw: match[0],
        text: match[1].trim(),
      };
    }

    return super.codespan(src);
  }
}

class CustomRenderer extends Renderer implements RendererInterface {
  codespan(text: string, styles?: TextStyle): ReactNode {
    return (
      <Text style={styles} key={"key-1"}>
        {text}
      </Text>
    )
  }
}

const renderer = new CustomRenderer();
const tokenizer = new CustomTokenizer();

const ExampleComponent = () => {
  return (
    <Markdown
      value={"$ latex code $\n\n` other code `"}
      flatListProps={{
        initialNumToRender: 8,
      }}
      renderer={renderer}
      tokenizer={tokenizer}
    />
  );
};

Example

Screenshots

| Dark Theme | Light Theme | |:-------------------------------------------------------------:|:----------------------------------------------------------------:| | | |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

Built using

• Marked
• @jsamr/react-native-li
• react-native-reanimated-table
• react-native-svg
• svg-parser
• github-slugger
• html-entities