fixed issue where renderer param needs to be the AstRender. this is not needed any more. can provide a simple function

Author: mientjan

doc/example/simple-with-custom-renderer.md

@@ -0,0 +1,60 @@
+# 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.
+ 
+
+```jsx
+import react from 'react';
+import {View, PureComponent, Text} from 'react-native';
+import Markdown, { AstRenderer } 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>
+    );
+  }
+}
+```

index.js

@@ -40,7 +40,7 @@ export default class Markdown extends Component {
 	 */
   static propTypes = {
     children: PropTypes.node.isRequired,
-    renderer: PropTypes.instanceOf(AstRenderer),
+    renderer: PropTypes.oneOf([PropTypes.func, PropTypes.instanceOf(AstRenderer)]),
     rules: (props, propName, componentName) => {
       let invalidProps = [];
       const prop = props[propName];
@@ -111,12 +111,28 @@ export default class Markdown extends Component {
 
     if (renderer && rules) {
       console.warn(
-        'react-native-markdown-renderer you are using renderer and rules at the same time. This is not possible, props.rules are ignored'
+        'react-native-markdown-renderer you are using renderer and rules at the same time. This is not possible, props.rules is ignored'
+      );
+    }
+
+    if (renderer && style) {
+      console.warn(
+        'react-native-markdown-renderer you are using renderer and style at the same time. This is not possible, props.style is ignored'
       );
     }
 
     if (renderer) {
-      this.renderer = renderer;
+      if (typeof renderer === 'function') {
+        this.renderer = {
+          render: renderer,
+        };
+      } else if (renderer instanceof AstRenderer) {
+        this.renderer = renderer;
+      } else {
+        throw new Error(
+          'Provided renderer is not compatible with function or AstRenderer. please change'
+        );
+      }
     } else {
       this.renderer = new AstRenderer(
         {
@@ -150,7 +166,6 @@ export default class Markdown extends Component {
 	 */
   render() {
     const copy = (this.copy = this.getCopyFromChildren());
-
-    return parser(copy, this.renderer, this.markdownParser);
+    return parser(copy, this.renderer.render, this.markdownParser);
   }
 }

lib/parser.js

@@ -18,13 +18,13 @@ export function stringToTokens(source, markdownIt) {
 /**
  *
  * @param {string} source
- * @param {AstRenderer} [renderer]
+ * @param {function} [renderer]
  * @param {AstRenderer} [markdownIt]
  * @return {View}
  */
 export function parser(source, renderer, markdownIt) {
   const tokens = groupTextTokens(removeInlineTokens(stringToTokens(source, markdownIt)));
   const asttree = tokensToAST(tokens);
 
-  return <View>{renderer.render(asttree)}</View>;
+  return renderer(asttree);
 }