Examples

**These examples are for v3..

• Basic Implementations
• Simple Implementation with custom Styles
• Simple Implementation with custom Rules
• Enabling Linkify feature

Basic Implementation

import react from 'react';
import {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>
    );
  }
}

Simple Implementation with custom styles

So to describe what i customized

• Heading1 has a fontSize of 32, backgroundColor black and a color white.
• all headers have a border at the bottom, of width 1 with a black color.

import react from 'react';
import {View, PureComponent, Text} from 'react-native';
import Markdown from 'react-native-markdown-renderer';
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>
    );
  }
}

Simple Implementation with custom Rules

So to describe what i customized

• header1 will always look like [ h1 Heading 8-)]
• header2 will always look like [ h2 Heading 8-)]
• header3 will always look like [ h3 Heading 8-)]

All rules can be found in renderRules.js

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

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>
    );
  }
}

Running the Example App

cd example/
yarn
yarn ios

Enabling Linkify feature

These are example codes i took from https://github.com/markdown-it/linkify-it

const md = Markdownit({
 typographer: true,
 linkify: true,
});

md.linkify.tlds('.py', false);  // disables .py as top level domain
md.linkify.tlds('onion', true)            // Add unofficial `.onion` domain
md.linkify.add('git:', 'http:')           // Add `git:` protocol as "alias"
md.linkify.add('ftp:', null)              // Disable `ftp:` ptotocol
md.linkify.set({ fuzzyIP: true });        // Enable IPs in fuzzy links (without schema)

// add twitter mention handler see https://github.com/markdown-it/linkify-it#example-2-add-twitter-mentions-handler where this is from.
md.linkify.add('@', {
  validate: function (text, pos, self) {
    var tail = text.slice(pos);

    if (!self.re.twitter) {
      self.re.twitter =  new RegExp(
        '^([a-zA-Z0-9_]){1,15}(?!_)(?=$|' + self.re.src_ZPCc + ')'
      );
    }
    if (self.re.twitter.test(tail)) {
      // Linkifier allows punctuation chars before prefix,
      // but we additionally disable `@` ("@@mention" is invalid)
      if (pos >= 2 && tail[pos - 2] === '@') {
        return false;
      }
      return tail.match(self.re.twitter)[0].length;
    }
    return 0;
  },
  normalize: function (match) {
    match.url = 'https://twitter.com/' + match.url.replace(/^@/, '');
  }
});

export default class Page extends PureComponent {

  render() {
    return (
    	<Markdown markdownit={md} rules={rules}>{copy}</Markdown>
    );
  }
}