Package Exports

react-native-markdown-display

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 (react-native-markdown-display) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Markdown Display

It a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is not a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten when needed as seen in the examples.

Compatibility with react-native-markdown-renderer

This is intended to be a drop-in replacement for react-native-markdown-renderer, with a variety of bug fixes and enhancements.

Install

Yarn

yarn add react-native-markdown-display

NPM

npm install -S react-native-markdown-display

Get Started

import react from 'react';
import { PureComponent } from 'react-native';
import Markdown from 'react-native-markdown-display';

const copy = `# h1 Heading 8-)

** this is some bold text! **

This is normal text
`;

export default class Page extends PureComponent {
  render() {
    return (
      <Markdown>{copy}</Markdown>
    );
  }
}

Props and Functions

The <Markdown> object takes the following common props:

Property	Required	Description
`children`	`true`	The markdown string to render
`rules`	`false`	An object of rules that specify how to render each markdown item, see rules section below for full list
`style`	`false`	An object to override the styling for the various rules, see style section below for full list
`onLinkPress`	`false`	A handler function to change click behaviour, see handling links section below for more info

And some additional, more advanced options:

Property	Required	Description
`renderer`	`false`	Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer.
`markdownit`	`false`	A custom markdownit instance, if you need one
`plugins`	`false`	An array of plugins to be applied to the markdownit instance

Syntax Support

Headings

h1 Heading 8-)

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Horizontal Rules

Typographic Replacements

Enable typographer option to see result.

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

"Smartypants, double quotes" and 'single quotes'

Emphasis

Enable typographer option to see result.

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

This is bold text

This is italic text

~~Strikethrough~~

Blockquotes

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Lists

Unordered

Create a list by starting a line with +, -, or *
Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
  - Ac tristique libero volutpat at
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
Very easy!

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
You can use sequential numbers...
...or keep all the numbers as 1.

Start numbering with offset:

Code

Inline code

Indented code

  // Some comments
  line 1 of code
  line 2 of code
  line 3 of code

Block code "fences"

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

Minion Stormtroopocat

Like links, Images also have a footnote style syntax

Alt text

With a reference later in the document defining the URL location:

Plugins and Extensions

Plugins for extra syntax support - see plugins for the markdown-it library that this library is built on.

Rules

Rules are used to specify how you want certain elements to be displayed. The existing implementation is here

The list of rules that can be overwritten is:

["unknown", "textgroup", "inline", "text", "span", "strong", "s", "link", "blocklink", "em", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "paragraph", "hardbreak", "blockquote", "code_inline", "code_block", "fence", "pre", "bullet_list", "ordered_list", "list_item", "table", "thead", "tbody", "th", "tr", "td", "hr", "softbreak", "image"]

Example Implementation

import react from 'react';
import {View, PureComponent, Text} from 'react-native';
import Markdown, {getUniqueID} from 'react-native-markdown-display';

const rules = {
    heading1: (node, children, parent, styles) =>
      <Text key={getUniqueID()} style={[styles.heading, styles.heading1]}>
        [{children}]
      </Text>,
    heading2: (node, children, parent, styles) =>
      <Text key={getUniqueID()} style={[styles.heading, styles.heading2]}>
        [{children}]
      </Text>,
    heading3: (node, children, parent, styles) =>
      <Text key={getUniqueID()} style={[styles.heading, styles.heading3]}>
        [{children}]
      </Text>,
};

const copy = `
# h1 Heading 8-)
## h2 Heading 8-)
### h3 Heading 8-)

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
`;

export default class Page extends PureComponent {
  render() {
    return (
      <Markdown rules={rules}>{copy}</Markdown>
    );
  }
}

Style

Styles are used to override how certain rules are styled. The existing implementation is here

The list of styles that can be overwritten is:

["root", "view", "codeBlock", "codeInline", "del", "em", "headingContainer", "heading", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "hr", "blockquote", "inlineCode", "list", "listItem", "listUnordered", "listUnorderedItem", "listUnorderedItemIcon", "listUnorderedItemText", "listOrdered", "listOrderedItem", "listOrderedItemIcon", "listOrderedItemText", "paragraph", "hardbreak", "strong", "table", "tableHeader", "tableHeaderCell", "tableRow", "tableRowCell", "text", "strikethrough", "link", "blocklink", "u", "image"]

NOTE: There is no merge of the style properties, if you specify a style property, it will completely overwrite existing styles for that property.

Example Implementation

import react from 'react';
import {View, PureComponent, Text} from 'react-native';
import Markdown from 'react-native-markdown-display';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  heading: {
    borderBottomWidth: 1,
    borderColor: '#000000',
  },
  heading1: {
    fontSize: 32,
    backgroundColor: '#000000',
    color: '#FFFFFF',
  },
  heading2: {
    fontSize: 24,
  },
  heading3: {
    fontSize: 18,
  },
  heading4: {
    fontSize: 16,
  },
  heading5: {
    fontSize: 13,
  },
  heading6: {
    fontSize: 11,
  }
});

const copy = `
# h1 Heading 8-)
## h2 Heading 8-)
### h3 Heading 8-)

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
`;

export default class Page extends PureComponent {
  render() {
    return (
      <Markdown style={styles}>{copy}</Markdown>
    );
  }
}

Handling Links

Links, by default, will be handled with the import { Linking } from 'react-native'; import and Linking.openURL(url); call.

It is possible to overwrite this behaviour in one of two ways:

onLinkPress Callback

import react from 'react';
import { PureComponent } from 'react-native';
import Markdown from 'react-native-markdown-display';

const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;

export default class Page extends PureComponent {
  onLinkPress = (url) => {
    if (url) {
      // some custom logic
    }
    
    // return true to open with `Linking.openURL
    // return false to handle it yourself
    return true
  }

  render() {
    return (
      <Markdown onLinkPress={this.onLinkPress}>{copy}</Markdown>
    );
  }
}

Using a Custom Rule

You will need to overwrite one or both of link and blocklink, the original defenitions can be found here

Something like this with yourCustomHandlerFunctionOrLogicHere:

import react from 'react';
import {View, PureComponent, Text} from 'react-native';
import Markdown, {getUniqueID} from 'react-native-markdown-display';

const rules = {
  link: (node, children, parent, styles) => {
    return (
      <Text key={node.key} style={styles.link} onPress={() => yourCustomHandlerFunctionOrLogicHere(node.attributes.href) }>
        {children}
      </Text>
    );
  },
};

const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;

export default class Page extends PureComponent {
  render() {
    return (
      <Markdown rules={rules}>{copy}</Markdown>
    );
  }
}

Other Resources

This is a fork of react-native-markdown-renderer, a library that unfortunately has not been updated for some time so i took all of the outstanding pull requests from that library and tested + merged as necessary.