Markdown component for React Native
Switch branches/tags
Nothing to show
Clone or download
2
Latest commit e93b51b Jul 4, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Apr 5, 2015
Markdown.js Added support for many more elements. Module should not error with an… Apr 13, 2015
README.md Added a `plainText` style Apr 14, 2015
package.json Fixes #9 Jul 4, 2015
rules.js Added a `plainText` style Apr 14, 2015

README.md

react-native-markdown

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

Known issues

  • 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.

Getting started

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

Usage

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);

Properties

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 (<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.