Add markdown rendering to messages

app/components/Markdown/index.js

@@ -0,0 +1,124 @@
+import React, {Component, createElement} from 'react'
+import {
+  View,
+  Text,
+  ScrollView,
+  Image
+} from 'react-native'
+import styles from './styles'
+import MarkdownView from 'react-native-markdown-view/MarkdownView'
+import SimpleMarkdown from 'simple-markdown'
+
+class Markdown extends Component {
+  getRules() {
+    return {
+      fence: {
+        match: (source, state) => (null)
+      },
+      codeBlock: {
+        match: SimpleMarkdown.blockRegex(/^`{3}([\S]+)?\n([\s\S]+)\n`{3}/),
+        parse: (capture, parse, state) => {
+          return {
+            lang: capture[1],
+            content: capture[2]
+          }
+        },
+        render: (node, output, state) => {
+          // debugger
+          state.withinText = true
+          const codeElement = createElement(Text, {
+            key: state.key,
+            style: styles.codeBlock
+          }, node.content)
+          const scrollElement = createElement(ScrollView, {
+            horizontal: true,
+            key: state.key
+          }, codeElement)
+          return createElement(View, {
+            key: state.key,
+            style: styles.codeBlockContainer
+          }, scrollElement)
+        }
+      },
+      inlineCode: {
+        match: (source, state) => {
+          const match = /^\`([^`]+)\`/.exec(source)
+
+          if (!!match) {
+            const newLineMatch = /\n/.exec(match[0])
+            if (!!newLineMatch) return null
+          }
+
+          return match
+        },
+        parse: (capture, parse, state) => {
+          // debugger
+          return {
+            content: capture[1]
+          }
+        },
+        render: (node, output, state) => {
+          state.withinText = true
+          return createElement(Text, {
+            key: state.key,
+            style: styles.inlineCode
+          }, node.content)
+        }
+      },
+      blockQuote: {
+        render: (node, output, state) => {
+          state.withinText = true
+          const blockBar = createElement(View, {
+            key: state.key,
+            style: [styles.blockQuoteSectionBar, styles.blockQuoteBar]
+          })
+          const blockText = createElement(View, {
+            key: state.key + 1,
+            style: styles.blockQuoteText
+          }, output(node.content, state))
+          return createElement(View, { key: state.key, style: [styles.blockQuoteSection, styles.blockQuote] }, [blockBar, blockText])
+        }
+      },
+      heading: {
+        match: (source, state) => {
+          return /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n *)/.exec(source)
+        },
+        render: (node, output, parentState) => {
+          const state = {...parentState}
+          state.withinText = true
+          const stylesToApply = [styles.heading, styles['heading' + node.level]]
+          state.stylesToApply = stylesToApply
+          return createElement(Text, {
+            key: state.key,
+            style: stylesToApply
+          }, output(node.content, state))
+        }
+      },
+      // image: {
+      //   render: (node, output, state) => {
+      //     state.inline = false
+      //     return createElement(Image, {
+      //       key: state.key,
+      //       resizeMode: styles.resizeMode ? styles.resizeMode : 'contain',
+      //       source: { uri: node.target },
+      //       style: node.target.match(/youtu|vimeo/) ? styles.video : styles.image
+      //     })
+      //   }
+      // },
+    }
+  }
+  render() {
+    return (
+      <MarkdownView
+        rules={this.getRules()}>
+        {this.props.children}
+      </MarkdownView>
+    )
+  }
+}
+
+Markdown.propTypes = {
+
+}
+
+export default Markdown

app/components/Markdown/styles.js

@@ -0,0 +1,59 @@
+import {StyleSheet, Platform} from 'react-native'
+const iOS = Platform.OS === 'ios'
+
+const styles = StyleSheet.create({
+  codeBlock: {
+    fontFamily: iOS ? 'Courier' : 'monospace'
+  },
+  codeBlockContainer: {
+    backgroundColor: '#eeeeee',
+    borderColor: '#dddddd',
+    borderRadius: 3,
+    borderWidth: 1,
+    padding: 4
+  },
+  inlineCode: {
+    backgroundColor: '#eeeeee',
+    borderColor: '#dddddd',
+    borderRadius: 3,
+    borderWidth: 1,
+    fontFamily: 'Courier',
+    fontWeight: 'bold'
+  },
+  blockQuoteSection: {
+    flexDirection: 'row'
+  },
+  blockQuoteSectionBar: {
+    width: 3,
+    height: null,
+    backgroundColor: '#DDDDDD',
+    marginRight: 15
+  },
+  heading: {
+    fontWeight: '500'
+  },
+  heading1: {
+    fontSize: 32
+  },
+  heading2: {
+    fontSize: 24
+  },
+  heading3: {
+    fontSize: 18
+  },
+  heading4: {
+    fontSize: 16
+  },
+  heading5: {
+    fontSize: 13
+  },
+  heading6: {
+    fontSize: 11
+  },
+  image: {
+    width: '30%',
+    height: '30%',
+  },
+})
+
+export default styles

app/screens/Room/Message/index.js

@@ -11,6 +11,7 @@ import ParsedText from '../../../components/ParsedText'
 import Avatar from '../../../components/Avatar'
 import StatusMessage from '../StatusMessage'
 import Button from '../../../components/Button'
+import Markdown from '../../../components/Markdown'
 
 class Message extends Component {
   constructor(props) {
@@ -75,11 +76,16 @@ class Message extends Component {
       )
     }
     return (
-      <ParsedText
-        text={text}
-        username={username}
-        handleUrlPress={this.handleUrlPress} />
+      <Markdown>
+        {text}
+      </Markdown>
     )
+    // return (
+    //   <ParsedText
+    //     text={text}
+    //     username={username}
+    //     handleUrlPress={this.handleUrlPress} />
+    // )
   }
 
   render() {

package.json

@@ -32,6 +32,7 @@
     "react-native-drawer-layout": "^1.3.0",
     "react-native-fetch-blob": "^0.10.6",
     "react-native-invertible-scroll-view": "^1.0.0",
+    "react-native-markdown-view": "^1.0.0",
     "react-native-navigation": "^1.1.125",
     "react-native-parsed-text": "0.0.16",
     "react-native-scrollable-tab-view": "^0.6.7",