A component for rendering Markdown in React Native
npm install react-native-markdownA 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 tag.
``javascript
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View
} = React;
var Markdown = require('react-native-markdown');
var mdApp = React.createClass({
render: function() {
return (
Some really basic Markdown.
{'\n\n'}
| # | Name | Age |{'\n'}
|---|--------|-----|{'\n'}
| 1 | John | 19 |{'\n'}
| 2 | Sally | 18 |{'\n'}
| 3 | Stream | 20 |{'\n'}
);
}
});
AppRegistry.registerComponent('mdApp', () => mdApp);
`
#### style
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 () - WIPblockQuote
- () - WIPbr
- ()codeBlock
- () - WIPdel
- ()em
- ()heading
- () - Also heading1 through heading6hr
- ()image
- () - Implemented but size is fixed to 50x50 until auto width is supported by React Native.inlineCode
- ()link
- () - WIPlist
- () - Also listItem (), listItemBullet () and listItemNumber ()mailto
- () - WIPnewline
- () - WIPparagraph
- ()plainText
- () - Use for styling text without any associated stylesstrong
- ()table
- ()tableHeader
- ()tableHeaderCell
- ()tableRow
- ()tableRowCell
- ()tableRowLast
- (, inherits from tableRow)text
- () - Inherited by all text based elementsu
- ()url
- ()view
- () - This is the container View` that the Markdown is rendered in.