A component for rendering Markdown in React Native. Pull requests welcome.

• Due to a bug in underlying layout engine for React Native (facebook/css-layout), this module will put your application in an infinite loop unless you patch the upstream changes from css-layout's' Layout.c and Layout.h files.

1. npm install react-native-markdown --save

All you need is to require the react-native-markdown module and then use the <Markdown/> tag.

var React = require('react-native'); var { AppRegistry, StyleSheet, View } = React; var Markdown = require('react-native-markdown'); var mdApp = React.createClass({ render: function() { return ( <View> <Markdown> Some *really* basic **Markdown**. {'\n\n'} | # | Name | Age |{'\n'} |---|--------|-----|{'\n'} | 1 | John | 19 |{'\n'} | 2 | Sally | 18 |{'\n'} | 3 | Stream | 20 |{'\n'} </Markdown> </View> ); } }); AppRegistry.registerComponent('mdApp', () => mdApp);

Default style properties will be applied to the markdown. You will likely want to customize these styles, the following properties can be used to modify the rendered elements:

Note: The text inside the parentheses denotes the element type.

• autolink (<Text>) - WIP
• blockQuote (<Text>) - WIP
• br (<Text>)
• codeBlock (<View>) - WIP
• del (<Text>)
• em (<Text>)
• heading (<Text>) - Also heading1 through heading6
• hr (<View>)
• image (<Image>) - Implemented but size is fixed to 50x50 until auto width is supported by React Native.
• inlineCode (<Text>)
• link (<Text>) - WIP
• list (<View>) - Also listItem (<View>), listItemBullet (<Text>) and listItemNumber (<Text>)
• mailto (<Text>) - WIP
• newline (<Text>) - WIP
• paragraph (<View>)
• plainText (<Text>) - Use for styling text without any associated styles
• strong (<Text>)
• table (<View>)
• tableHeader (<View>)
• tableHeaderCell (<Text>)
• tableRow (<View>)
• tableRowCell (<View>)
• tableRowLast (<View>, inherits from tableRow)
• text (<Text>) - Inherited by all text based elements
• u (<View>)
• url (<Text>)
• view (<View>) - This is the container View that the Markdown is rendered in.