https://github.com/lwansbrough/react-native-markdown

Markdown component for React Native
https://github.com/lwansbrough/react-native-markdown

Last synced: 6 days ago
JSON representation

Markdown component for React Native

• Host: GitHub
• URL: https://github.com/lwansbrough/react-native-markdown
• Owner: lwansbrough
• License: mit
• Created: 2015-04-05T22:44:57.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-08-27T17:16:45.000Z (over 8 years ago)
• Last Synced: 2025-01-14T00:10:16.081Z (13 days ago)
• Language: JavaScript
• Size: 178 KB
• Stars: 277
• Watchers: 8
• Forks: 80
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-native-markdown
• awesome-react-native-ui - markdown-react-native ★190 - A Markdown Component For React Native (Components / Text & Rich Content)

README

        
# react-native-markdown

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

## Known issues

- Due to [a bug](https://github.com/facebook/react-native/issues/824) in underlying layout engine for React Native ([facebook/css-layout](https://github.com/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

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

```

## 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` (``) - WIP

- `blockQuote` (``) - WIP

- `br` (``)

- `codeBlock` (``) - WIP

- `del` (``)

- `em` (``)

- `heading` (``) - Also `heading1` through `heading6`

- `hr` (``)

- `image` (``) - Implemented but size is fixed to `50x50` until auto width is supported by React Native.

- `inlineCode` (``)

- `link` (``) - WIP

- `list` (``) - Also `listItem` (``), `listItemBullet` (``) and `listItemNumber` (``)

- `mailto` (``) - WIP

- `newline` (``) - WIP

- `paragraph` (``)

- `plainText` (``) - Use for styling text without any associated styles

- `strong` (``)

- `table` (``)

- `tableHeader` (``)

- `tableHeaderCell` (``)

- `tableRow` (``)

- `tableRowCell` (``)

- `tableRowLast` (``, inherits from `tableRow`)

- `text` (``) - Inherited by all text based elements

- `u` (``)

- `url` (``)

- `view` (``) - This is the container `View` that the Markdown is rendered in.