React Native Markdown Display  

This is a fork of jonasmerlin/react-native-markdown-display that itself is a fork of iamacup/react-native-markdown-display. This is used for our own React Native application for rendering rich text. It may be of some use to you too!

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 and styled as needed.

$3

This is intended to be a replacement for react-native-markdown-renderer, with a variety of bug fixes and enhancements - Due to how the new style rules work, there may be some tweaking needed, see how to style stuff section below

$3

#### Yarn

``npm
yarn add @cosmicmedia/react-native-markdown-display
`

#### NPM

`npm
npm install -S @cosmicmedia/react-native-markdown-display
`

$3

`jsx
import React from 'react';
import {SafeAreaView, ScrollView, StatusBar} from 'react-native';

import Markdown from 'react-native-markdown-display';

const copy = # h1 Heading 8-)

This is some bold text!

This is normal text
;

const App: () => React$Node = () => {
return (
<>


contentInsetAdjustmentBehavior="automatic"
style={{height: '100%'}}>
{copy}



);
};

export default App;
`

$3

The object takes the following common props:

| Property | Default | Required | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- |
| children | N/A | true | The markdown string to render, or the pre-processed tree |
| style | source | false | An object to override the styling for the various rules, see style section below for more info |
| mergeStyle | true | false | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them |
| rules | source | false | An object of rules that specify how to render each markdown item, see rules section below for more info |
| onLinkPress | import { Linking } from 'react-native'; and Linking.openURL(url); | false | A handler function to change click behaviour, see handling links section below for more info |
| debugPrintTree | false | false | Will print the AST tree to the console to help you see what the markdown is being translated to |

And some additional, less used options:

| Property | Default | Required | Description |
| ------------------------- | ----------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| renderer | instanceOf(AstRenderer) | false | Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer. |
| markdownit | instanceOf(MarkdownIt) | false | A custom markdownit instance with your configuration, default is MarkdownIt({typographer: true}) |
| maxTopLevelChildren | null | false | If defined as a number will only render out first n many top level children, then will try to render out topLevelMaxExceededItem |
| topLevelMaxExceededItem | ... | false | Will render when maxTopLevelChildren is hit. Make sure to give it a key! |
| allowedImageHandlers | ['data:image/png;base64', 'data:image/gif;base64', 'data:image/jpeg;base64', 'https://', 'http://'] | false | Any image that does not start with one of these will have the defaultImageHandler value prepended to it (unless defaultImageHandler is null in which case it won't try to render anything) |
| defaultImageHandler | http:// | false | Will be prepended to an image url if it does not start with something in the allowedImageHandlers array, if this is set to null, it won't try to recover but will just not render anything instead. |

Syntax Support

Rules and Styles

$3

Text styles are applied in a way that makes it much more convenient to manage changes to global styles while also allowing fine tuning of individual elements.

Think of the implementation like applying styles in CSS. changes to the body effect everything, but can be overwritten further down the style / component tree.

Be careful when styling 'text': the text rule is not applied to all rendered text, most notably list bullet points. If you want to, for instance, color all text, change the body style.

$3

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

NOTE: By default styles are merged with the existing implementation, to change this, see the mergeStyle prop

$3

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

$3

| Render Rule | Style(s) |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| body | body |
| heading1 | heading1 |
| heading2 | heading2 |
| heading3 | heading3 |
| heading4 | heading4 |
| heading5 | heading5 |
| heading6 | heading6 |
| hr | hr |
| strong | strong |
| em | em |
| s | s |
| blockquote | blockquote |
| bullet_list | bullet_list |
| ordered_list | ordered_list |
| list_item | list_item - This is a special case that contains a set of pseudo classes that don't align to the render rule: ordered_list_icon, ordered_list_content, bullet_list_icon, bullet_list_content |
| code_inline | code_inline |
| code_block | code_block |
| fence | fence |
| table | table |
| thead | thead |
| tbody | tbody |
| th | th |
| tr | tr |
| td | td |
| link | link |
| blocklink | blocklink |
| image | image |
| text | text |
| textgroup | textgroup |
| paragraph | paragraph |
| hardbreak | hardbreak |
| softbreak | softbreak |
| pre | pre |
| inline | inline |
| span | span |

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:

Disabling Specific Types of Markdown

You can dissable any type of markdown you want, which is very useful in a mobile environment, by passing the markdownit property like below. Note that for convenience we also export the MarkdownIt instance so you don't have to include it as a project dependency directly just to remove some types of markdown.

This example will stop images and links.

`jsx
import React from 'react';
import {SafeAreaView, ScrollView, StatusBar, Text} from 'react-native';

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

const copy =

This heading will show with formatting

but this link will just
;

const App: () => React$Node = () => {
return (
<>


contentInsetAdjustmentBehavior="automatic"
style={{height: '100%'}}>
markdownit={MarkdownIt({typographer: true}).disable([
'link',
'image',
])}>
{copy}




);
};

export default App;
`

A full list of things you can turn off is here

$3

It is possible to need to pre-process the data outside of this library (related discussion here). As a result, you can pass an AST tree directly as the children like this:

`jsx
import React from 'react';
import {SafeAreaView, ScrollView, StatusBar, Text} from 'react-native';

import Markdown, {
MarkdownIt,
tokensToAST,
stringToTokens,
} from 'react-native-markdown-display';

const markdownItInstance = MarkdownIt({typographer: true});

const copy =

Hello this is a title

This is some text with BOLD!
;

const ast = tokensToAST(stringToTokens(copy, markdownItInstance));

const App: () => React$Node = () => {
return (
<>


contentInsetAdjustmentBehavior="automatic"
style={{height: '100%'}}>
{ast}



);
};

export default App;
``

$3

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.