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
or
yarn add react-native-simple-markdown
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!
You can **emphasize** what you want, or just _suggest it_ 😏…
You can even [link your website](http://charlesmangwa.surge.sh) or if you prefer: [email sombedy](mailto:[email protected])
Spice it up with some GIF 💃:
![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif)
And even add a cool video 😎!
[![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)
[![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)
</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>
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:
<Markdown
rules={{
image: {
react: (node, output, state) => (
<CustomImageComponent
key={state.key}
source={{ uri: node.target }}
/>
),
},
}}
>
![Alt text](/path/to/img.jpg)
</Markdown>
br
(<Text>
)del
(<Text>
)em
(<Text>
)hr
(<View>
)heading
(<Text>
) - Alsoheading1
throughheading6
inlineCode
(<Text>
)image
(<Image>
) - You can useresizeMode
in<Markdown />
styles prop to set a resizeModelink
(Text
)list
(<View>
) - AlsolistItem
(<View>
),listItemBullet
(<Text>
),listItemBulletType
(Unicode character
),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>
) - Supports Youtube & Vimeoview
(<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>
)
This project was forked from react-native-markdown
by @lwansbrough.