react-native-markdown-text

A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome!

Getting started

yarn add react-native-markdown-text

Usage

All you need is import the react-native-markdown-text and then use the component.

``js
import React from 'react'
import Markdown from 'react-native-markdown-text'

const MyAwesomeApp = () => {
return (

#Markdown in react-native is so cool!

You can emphasize what you want, or just _suggest it_

You can even link your website or if you prefer: email somebody

Spice it up with some GIF:

!Some GIF

And even add a cool video:

![A cool video from YT](http://www.youtube.com/watch?v=dQw4w9WgXcQ)

![Another one from Vimeo](https://vimeo.com/57580368)

)
}

const styles = {
heading1: {
fontSize: 22,
},
strong: {
fontSize: 18,
},
paragraph: {
fontSize: 14,
},
view: {
borderWidth: 1,
},
}
`

Properties

$3

The Markdown will apply its style by default. However you can pass a styles prop to customize it has you want.

Example:

`js
styles={{
heading1: {
fontSize: 20,
},
strong: {
fontWeight: 'bold',
}
}}
>
#Hello

`

$3

The Markdown will apply its rules by default. However you can pass a rules prop to add your own and then customize how the Markdown elements will be displayed!

Example:

`js
rules={{
image: {
react: (node, output, state) => (
key={state.key}
source={{ uri: node.target }}
/>
),
},
}}
>
!Alt text

`

RNSM also allows you to remove easily unwanted styling options without having to pass in rule objects that have their react key implemented/dummied to ignore those styling options.

Example:

`js
styles={ markdownStyles }
whitelist={['link', 'url']}
>
{ description }

`

Will only apply the default styles for link and url. You don't need to pass in a rules prop that contained a key for all the styles you don't want and reimplement their styling output anymore.

$3

- blockQuote () - Also blockQuoteBar and blockQuoteText
- br ()
- del ()
- em ()
- hr ()
- heading () - Also heading1 through heading6
- inlineCode ()
- image () - You can use resizeMode in styles prop to set a resizeMode
- link (Text)
- list () - Also listItem (), listItemBullet (), listItemBulletType (Unicode character), listItemNumber () and listItemText ()
- mailTo (Text)
- 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 ()
- video () - Supports Youtube & Vimeo
- view () - This is the View container where the Markdown is render.

$3

_Most of these elements can be used, but I'm still working on some improvements. Pull requests are welcome!_

- autolink ()
- codeBlock ()

Credits

This project was forked from react-native-simple-markdown` by @CharlesMangwa.