Markdown component for React Native
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
lib
.gitignore
LICENSE
Markdown.js
README.md
package.json

README.md

react-native-markdown-syntax


This component is based on the parser markdown-js.

Installation

npm install react-native-markdown-syntax

Usage

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import Markdown from 'react-native-markdown-syntax';

export default class example extends Component {
  render() {
    return (
      <Markdown style={{flex: 1, marginTop: 20,}}>
        {'\n\n'}
        Emphasis, aka italics, with *asterisks* or _underscores_.{'\n'}
        Strong emphasis, aka bold, with **asterisks** or __underscores__.{'\n'}
        Combined emphasis with **asterisks and _underscores_**.{'\n'}
        Inline code uses one `. `Scratch this.`{'\n'}

        Here comes codeblock{'\n'}
        > Hello
         __em__
         `inline Code` az{'\n'}{'\n'}
        - ul{'\n\n​\n\n'}
        1. ol1{'\n'}
        2. ol2{'\n'}
        3. ol3{'\n\n\nHere a new list\n\n'}
        - ulnew{'\n'}
        - [ ] checkbox not supported yet :/{'\n'}
      </Markdown>
    );
  }
}
AppRegistry.registerComponent('example', () => example);

Based on a html parser, react-native-markdown-syntax support many markdown syntax, but not fully feature is implemented in react-native, here is the supported tag from web to react-native:

HTML Tag Desc Markdown syntax example
h {1-6} Header # Hello
strong Bold Hello
em Italics Hello
p Paragraph Hello
code Code Hello
pre Inline Code Hello
blockquote Quote > Hello
ul Unordered List - Hello {'\n'} - Hello
ol Ordered List 1. Hello {'\n'} - Hello
li List Item
br Line Break \n

You can pass style for each tag as mdStyle props:

<Markdown mdStyle={mdStyle}...

const mdStyle = {
  h: {
    fontWeight: '200',
  },
  h1: {
    fontSize: 32,
  },
    ...
  p: {
    marginTop: 10,
    marginBottom: 10,
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
}

but there is already a default style, don't worry ! 🎸

### TODO

There is much things to do and PR is appreciated ! 🚀