A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome 😃 🎉!
npm install react-native-simple-markdown --save
All you need is import the react-native-simple-markdown
and then use the
<Markdown />
component.
import React from 'react'
import Markdown from 'react-native-simple-markdown'
const MyAwesomeApp = () => {
return (
<Markdown styles={styles}>
#Markdown in react-native is so cool!
{'\n\n'}
You can **emphasize** what you want, or just _suggest it_ 😏…
{'\n\n'}
You can even [link your website](http://charlesmangwa.surge.sh) or if you prefer: [email sombedy](mailto:email@somebody.com)
{'\n\n'}
Spice it up with some GIF 💃:
{'\n\n'}
![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif)
{'\n\n'}
And even add a cool video 😎!
{'\n\n'}
[![A cool video](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)
</Markdown>
)
}
const styles = {
heading1: {
fontSize: 22,
},
strong: {
fontSize: 18,
},
paragraph: {
fontSize: 14,
},
view: {
borderWidth: 1,
},
}
The Markdown will apply its style by default. However you can pass a styles
prop to customize it has you want.
Example:
<Markdown
styles={{
heading1: {
fontSize: 20,
},
strong: {
fontWeight: 'bold',
}
}}
>
#Hello 👋
</Markdown>
Note: The text inside the parentheses denotes the element type.
br
(<Text>
)del
(<Text>
)em
(<Text>
)hr
(<View>
)heading
(<Text>
) - Alsoheading1
throughheading6
inlineCode
(<Text>
)image
(<Image>
) - Supports.jpg
,.png
,.gif
, etclink
(Text
)list
(<View>
) - AlsolistItem
(<View>
),listItemBullet
(<Text>
),listItemNumber
(<Text>
) andlistItemText
(<Text>
)mailTo
(Text
)paragraph
(<View>
)plainText
(<Text>
) - Use for styling text without any associated stylesstrong
(<Text>
)table
(<View>
)tableHeader
(<View>
)tableHeaderCell
(<Text>
)tableRow
(<View>
)tableRowCell
(<View>
)tableRowLast
(<View>
, inherits fromtableRow
)text
(<Text>
) - Inherited by all text based elementsu
(<View>
)url
(<Text>
)video
(<Image>
)view
(<View>
) - This is theView
container where the Markdown is render.
Most of these elements can be used, but I'm still working on some improvements. Pull requests are welcome!
autolink
(<Text>
)blockQuote
(<Text>
)codeBlock
(<View>
)newline
(<Text>
)
This project was forked from react-native-markdown
by @lwansbrough.