Examples

Simple Example:

import react from 'react';
import {View, PureComponent} from 'react-native';
import Markdown from 'react-native-markdown-renderer';

const copy = `# h1 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 {

  static propTypes = {};
  static defaultProps = {};

  render() {
    return (
    	<Markdown>{copy}</Markdown>
    );
  }
}

Customise Render Elements:

import react from 'react';
import {View, PureComponent, Text} from 'react-native';
import Markdown, { AstRenderer, defaultRenderFunctions, PluginContainer, blockPlugin} from 'react-native-markdown-renderer';

const copy = `# h1 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 {
  constructor(){
    this.renderer = new AstRenderer({
      ...defaultRenderFunctions,
      h1: (node, children, parents) => {
        return <Text style={{backgroundColor: 'red'}}>{children}</Text>;
      },
      // added custom block element defined by plugin
      block: (node, children, parents) => {
        return <Text style={{backgroundColor: 'green'}}>{children}</Text>;
      }
    });
  }

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