fixed issue where markdown rendherer would not change styles because props would not be reupdated

Author: mientjan

example/App.js

@@ -1,8 +1,10 @@
-import React from 'react';
-import { StyleSheet, Text, View, ScrollView } from 'react-native';
+import React, { Component } from 'react';
+import { StyleSheet, Text, View, ScrollView, Picker } from 'react-native';
 import Markdown, {
-	AstRenderer, styles, renderRules,
-	getUniqueID
+  AstRenderer,
+  styles,
+  renderRules,
+  getUniqueID,
 } from 'react-native-markdown-renderer';
 
 const markdownText = `
@@ -175,32 +177,57 @@ This is a text. Click [here](https://google.com) to open a link. Let's add some
 /**
  * i'm overriding the default h1 render function.
  */
-const renderer = new AstRenderer({
-  ...renderRules,
-  h1: (node, children, parents) => {
-    return (
-      <Text key={getUniqueID()} style={{ backgroundColor: 'red' }}>{children}</Text>
-    );
-  },
-  // added custom block element defined by plugin
-  block: (node, children, parents) => {
-    return (
-      <Text key={getUniqueID()} style={{ backgroundColor: 'green' }}>{children}</Text>
-    );
+const renderer = new AstRenderer(
+  {
+    ...renderRules,
+    h1: (node, children, parents) => {
+      return <Text key={getUniqueID()} style={{ backgroundColor: 'red' }}>{children}</Text>;
+    },
+    // added custom block element defined by plugin
+    block: (node, children, parents) => {
+      return <Text key={getUniqueID()} style={{ backgroundColor: 'green' }}>{children}</Text>;
+    },
   },
-}, styles);
+  styles
+);
+
+export default class App extends Component {
+  state = {
+    view: 0,
+  };
+
+  list = [{ description: 'custom renderer' }, { description: 'custom style sheet' }];
+
+  getView(value) {
+
+  	console.warn(value);
+    switch (value) {
+      case 0: {
+        return <Markdown plugins={[]} renderer={renderer.render} children={markdownText} />;
+      }
+      default: {
+        return (
+	        <Markdown># Text</Markdown>
+        );
+      }
+    }
+  }
 
-export default class App extends React.Component {
   render() {
-      
+
+
 
     return (
-      <View style={styles.container}>
+      <View style={styleSheet.container}>
+        <Picker
+          selectedValue={this.state.view}
+          onValueChange={(itemValue, itemIndex) => this.setState({ view: itemIndex })}
+        >
+          {this.list.map((val, index) => <Picker.Item label={val.description} value={index} />)}
+        </Picker>
 
         <ScrollView>
-          <Text>Markdown</Text>
-          <Text>--------</Text>
-          <Markdown plugins={[]} renderer={renderer.render} children={markdownText} />
+          {this.getView(this.state.view)}
         </ScrollView>
       </View>
     );
@@ -210,7 +237,6 @@ export default class App extends React.Component {
 const styleSheet = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#ffcc00',
-    paddingTop: 20,
+    marginTop: 20,
   },
 });

index.js

@@ -35,6 +35,9 @@ export {
   styles,
 };
 
+/**
+ * react-native-markdown-renderer
+ */
 export default class Markdown extends Component {
   /**
 	 * Definition of the prop types
@@ -77,7 +80,7 @@ export default class Markdown extends Component {
     renderer: null,
     rules: null,
     plugins: [],
-    style: {},
+    style: null,
     markdownit: MarkdownIt({
       typographer: true,
     }),
@@ -104,11 +107,8 @@ export default class Markdown extends Component {
     return false;
   }
 
-  /**
-	 *
-	 */
-  componentWillMount() {
-    const { renderer, rules, style, plugins, markdownit } = this.props;
+  updateSettings(props = this.props) {
+    const { renderer, rules, style, plugins, markdownit } = props;
 
     if (renderer && rules) {
       console.warn(
@@ -122,39 +122,68 @@ export default class Markdown extends Component {
       );
     }
 
+    // these checks are here to prevent extra overhead.
     if (renderer) {
       if (typeof renderer === 'function') {
-        this.renderer = {
-          render: renderer,
-        };
+        if (!this.renderer || this.renderer.render !== renderer) {
+          this.renderer = {
+            render: renderer,
+          };
+        }
       } else if (renderer instanceof AstRenderer) {
-        this.renderer = renderer;
+        if (this.renderer !== renderer) {
+          this.renderer = renderer;
+        }
       } else {
         throw new Error(
           'Provided renderer is not compatible with function or AstRenderer. please change'
         );
       }
     } else {
-      this.renderer = new AstRenderer(
-        {
-          ...renderRules,
-          ...(rules || {}),
-        },
-        {
-          ...styles,
-          ...style,
-        }
-      );
+      if (
+        !this.renderer ||
+        this.props.renderer ||
+        this.props.rules !== rules ||
+        this.props.style !== style
+      ) {
+        this.renderer = new AstRenderer(
+          {
+            ...renderRules,
+            ...(rules || {}),
+          },
+          {
+            ...styles,
+            ...style,
+          }
+        );
+      }
     }
 
-    let md = markdownit;
-    if (plugins && plugins.length > 0) {
-      plugins.forEach(plugin => {
-        md = md.use.apply(md, plugin.toArray());
-      });
+    if (
+      !this.markdownParser ||
+      this.props.markdownit !== markdownit ||
+      plugins !== this.props.plugins
+    ) {
+      let md = markdownit;
+      if (plugins && plugins.length > 0) {
+        plugins.forEach(plugin => {
+          md = md.use.apply(md, plugin.toArray());
+        });
+      }
+
+      this.markdownParser = md;
     }
+  }
+
+  /**
+	 *
+	 */
+  componentWillMount() {
+    this.updateSettings(this.props);
+  }
 
-    this.markdownParser = md;
+  componentWillReceiveProps(nextProps) {
+    this.updateSettings(nextProps);
   }
 
   getCopyFromChildren(children = this.props.children) {