react-native-marked

react-native-marked

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

Installation

yarn add react-native-marked

Usage

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

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

export default ExampleComponent;

Examples

• RN App: https://github.com/gmsgowtham/react-native-marked-test

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

Supported elements

• Headings (1 to 6)
• Paragraph
• Emphasis (bold, italic, and strikethrough)
• Link
• Image
• Blockquote
• Inline Code
• Code Block
• List (ordered, unordered)
• Horizontal Rule
• Table
• HTML

Ref: CommonMark

HTML will be treated as plain text

Using custom components

import React, { ReactNode } from "react";
import { Text } from "react-native";
import type { ImageStyle, TextStyle } from "react-native";
import Markdown, { Renderer } 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}
    />
  );
};

export default ExampleComponent;

Please refer to RendererInterface for all the override methods

export interface RendererInterface {
  paragraph(children: ReactNode[], styles?: ViewStyle): ReactNode;
  blockquote(children: ReactNode[], styles?: ViewStyle): ReactNode;
  heading(text: string | ReactNode[], styles?: TextStyle): ReactNode;
  code(
    text: string,
    language?: string,
    containerStyle?: ViewStyle,
    textStyle?: TextStyle,
  ): ReactNode;
  hr(styles?: ViewStyle): ReactNode;
  listItem(children: ReactNode[], styles?: ViewStyle): ReactNode;
  list(
    ordered: boolean,
    li: ReactNode[],
    listStyle?: ViewStyle,
    textStyle?: TextStyle,
    startIndex?: number,
  ): ReactNode;
  escape(text: string, styles?: TextStyle): ReactNode;
  link(
    children: string | ReactNode[],
    href: string,
    styles?: TextStyle,
  ): ReactNode;
  image(uri: string, alt?: string, style?: ImageStyle): ReactNode;
  strong(children: ReactNode[], styles?: TextStyle): ReactNode;
  em(children: ReactNode[], styles?: TextStyle): ReactNode;
  codespan(text: string, styles?: TextStyle): ReactNode;
  br(): ReactNode;
  del(children: ReactNode[], styles?: TextStyle): ReactNode;
  text(text: string | ReactNode[], styles?: TextStyle): ReactNode;
  html(text: string | ReactNode[], styles?: TextStyle): ReactNode;
  linkImage(
    href: string,
    imageUrl: string,
    alt?: string,
    style?: ImageStyle,
  ): ReactNode;
}

Note:

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

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 with

• Marked
• React Native Fit Image
• @jsamr/react-native-li