- fixed issue with not providing custom markdown

Author: mientjan

example/App.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text, View, ScrollView } from 'react-native';
-import Markdown, { AstRenderer, style, defaultRenderFunctions, PluginContainer, blockPlugin } from 'react-native-markdown-renderer';
+import Markdown, {
+	AstRenderer, style, defaultRenderFunctions, PluginContainer, blockPlugin,
+	getUniqueID
+} from 'react-native-markdown-renderer';
 
 const markdownText = `
  # Syntax Support
@@ -176,13 +179,13 @@ const renderer = new AstRenderer({
   ...defaultRenderFunctions,
   h1: (node, children, parents) => {
     return (
-      <Text key={AstRenderer.getUniqueID()} style={{ backgroundColor: 'red' }}>{children}</Text>
+      <Text key={getUniqueID()} style={{ backgroundColor: 'red' }}>{children}</Text>
     );
   },
   // added custom block element defined by plugin
   block: (node, children, parents) => {
     return (
-      <Text key={AstRenderer.getUniqueID()} style={{ backgroundColor: 'green' }}>{children}</Text>
+      <Text key={getUniqueID()} style={{ backgroundColor: 'green' }}>{children}</Text>
     );
   },
 });

index.js

@@ -44,6 +44,11 @@ export default class Markdown extends Component {
     rules: (props, propName, componentName) => {
       let invalidProps = [];
       const prop = props[propName];
+
+      if (!prop) {
+        return;
+      }
+
       if (typeof prop === 'object') {
         invalidProps = Object.keys(prop).filter(key => typeof prop[key] !== 'function');
       }
@@ -82,11 +87,11 @@ export default class Markdown extends Component {
   markdownParser = null;
 
   /**
-   * Only when the copy changes will the markdown render again.
-   * @param nextProps
-   * @param nextState
-   * @return {boolean}
-   */
+	 * Only when the copy changes will the markdown render again.
+	 * @param nextProps
+	 * @param nextState
+	 * @return {boolean}
+	 */
   shouldComponentUpdate(nextProps, nextState) {
     const copy = this.getCopyFromChildren(nextProps.children);
 
@@ -99,8 +104,8 @@ export default class Markdown extends Component {
   }
 
   /**
-   *
-   */
+	 *
+	 */
   componentWillMount() {
     const { renderer, rules, style, plugins, markdownit } = this.props;
 
@@ -125,29 +130,27 @@ export default class Markdown extends Component {
       );
     }
 
+    let md = markdownit;
     if (plugins && plugins.length > 0) {
-      let md = markdownit;
-
       plugins.forEach(plugin => {
         md = md.use.apply(md, plugin.toArray());
       });
-
-      this.markdownParser = md;
     }
+
+    this.markdownParser = md;
   }
 
   getCopyFromChildren(children = this.props.children) {
     return children instanceof Array ? children.join('') : children;
   }
 
   /**
-   *
-   * @return {View}
-   */
+	 *
+	 * @return {View}
+	 */
   render() {
     const copy = (this.copy = this.getCopyFromChildren());
-    const { renderer } = this.props;
 
-    return parser(copy, renderer, this.markdownParser);
+    return parser(copy, this.renderer, this.markdownParser);
   }
 }

lib/parser.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
-import MarkdownIt from 'markdown-it';
 import tokensToAST from './util/tokensToAST';
 import removeInlineTokens from './util/removeInlineTokens';
 import groupTextTokens from './util/groupTextTokens';
 
-let md = MarkdownIt();
-
-export function stringToTokens(source, markdownIt = md) {
+export function stringToTokens(source, markdownIt) {
   let result = [];
   try {
-    result = md.parse(source, {});
-  } catch (err) {}
+    result = markdownIt.parse(source, {});
+  } catch (err) {
+    console.warn(err);
+  }
+
   return result;
 }
 
@@ -22,7 +22,7 @@ export function stringToTokens(source, markdownIt = md) {
  * @param {AstRenderer} [markdownIt]
  * @return {View}
  */
-export function parser(source, renderer, markdownIt = md) {
+export function parser(source, renderer, markdownIt) {
   const tokens = groupTextTokens(removeInlineTokens(stringToTokens(source, markdownIt)));
   const asttree = tokensToAST(tokens);
 

lib/renderRules.js

@@ -5,6 +5,7 @@ import FitImage from 'react-native-fit-image';
 import AstRenderer from './AstRenderer';
 import getUniqueID from "./util/getUniqueID";
 import openUrl from "./util/openUrl";
+import hasParents from "./util/hasParents";
 
 const renderRules = {
   // when unknown elements are introduced, so it wont break
@@ -149,7 +150,7 @@ const renderRules = {
     );
   },
   li: (node, children, parent, styles) => {
-    if (AstRenderer.hasParents(parent, 'ul')) {
+    if (hasParents(parent, 'ul')) {
       return (
         <View key={getUniqueID()} style={styles.listUnorderedItem}>
           <Text style={styles.listUnorderedItemIcon}>
@@ -162,7 +163,7 @@ const renderRules = {
       );
     }
 
-    if (AstRenderer.hasParents(parent, 'ol')) {
+    if (hasParents(parent, 'ol')) {
       return (
         <View key={getUniqueID()} style={styles.listOrderedItem}>
           <Text style={styles.listOrderedItemIcon}>