adding 5 examples to example app

Author: mientjan

example/App.js

@@ -6,22 +6,26 @@ import Markdown, {
   renderRules,
   getUniqueID,
 } from 'react-native-markdown-renderer';
-import copyAll from "./src/copyAll";
-import customMarkdownStyle from "./src/customMarkdownStyle";
+import copyAll from './src/copyAll';
+import customMarkdownStyle from './src/customMarkdownStyle';
+
+const rules = {
+  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>;
+  },
+};
 
 /**
  * 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>;
-    },
+    ...rules,
   },
   styles
 );
@@ -32,13 +36,14 @@ export default class App extends Component {
   };
 
   list = [
-      { description: 'default' },
-      { description: 'custom renderer' },
-      { description: 'custom style sheet' }
-      ];
+    { description: 'default' },
+    { description: 'custom renderer' },
+    { description: 'custom style sheet' },
+    { description: 'custom rules' },
+    { description: 'custom rules & style sheet' },
+  ];
 
   getView(value) {
-
     switch (value) {
       case 0: {
         return <Markdown children={copyAll} />;
@@ -49,25 +54,28 @@ export default class App extends Component {
       case 2: {
         return <Markdown style={customMarkdownStyle} children={copyAll} />;
       }
+      case 3: {
+        return <Markdown rules={rules} children={copyAll} />;
+      }
+      case 4: {
+        return <Markdown rules={rules} style={customMarkdownStyle} children={copyAll} />;
+      }
       default: {
-        return (
-	        <Markdown># Text</Markdown>
-        );
+        return <Markdown># Text</Markdown>;
       }
     }
   }
 
   render() {
-
-
-
     return (
       <View style={styleSheet.container}>
         <Picker
           selectedValue={this.state.view}
           onValueChange={(itemValue, itemIndex) => this.setState({ view: itemIndex })}
         >
-          {this.list.map((val, index) => <Picker.Item key={val.description} label={val.description} value={index} />)}
+          {this.list.map((val, index) =>
+            <Picker.Item key={val.description} label={val.description} value={index} />
+          )}
         </Picker>
 
         <ScrollView>