A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome! ๐ ๐
yarn add react-native-simple-markdown
This library is currently being (kinda) completely rewritten. If you've been using this lib for a short/long time or are interesting in shaping it for the future: just chime in and share your thoughts with us; or give a look at the styles section, some help is also need there!
All you need to do 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={markdownStyles}>
#Markdown in react-native is so cool! {'\n\n'}
You can **emphasize** what you want, or just _suggest it_ ๐โฆ{'\n'}
You can even [**link your website**](https://twitter.com/Charles_Mangwa) or if you prefer: [email somebody](mailto:[email protected]){'\n'}
Spice it up with some GIFs ๐:
![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif){'\n'}
And even add a cool video ๐!{'\n'}
[![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
[![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)
</Markdown>
)
}
const markdownStyles = {
heading1: {
fontSize: 24,
color: 'purple',
},
link: {
color: 'pink',
},
mailTo: {
color: 'orange',
},
text: {
color: '#555555',
},
}
<Markdown />
will apply its style by default. However you can pass a styles
prop to customize it has you wish.
Example:
<Markdown
styles={{
heading1: {
fontSize: 20,
},
strong: {
fontWeight: 'bold',
}
}}
>
#Hello ๐
</Markdown>
Here again, <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>
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:
<Markdown
styles={ markdownStyles }
whitelist={['link', 'url']}
>
{ description }
</Markdown>
whitelist
will only apply link
and url
default styles, while blacklist
will do the opposite. 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.
If you happened to have an error with your Markdown during the rendering, you can pass a errorHandler
with a function that will let you see what's going on:
<Markdown
errorHandler={(errors, children) => console.log(errors, children)}
>
...
</Markdown>
Given that the way React Native renders element has evolved in the latest versions (0.48+), we'll have to check manually that every single rule works as expected by:
- rendering properly on both iOS & Android
- being able to be styled on both platforms
- not breaking/overriding others rules when its own is applied
When those 3 criteria are fulfilled, we can validate the Rendering column. Feel free to check any of these and send a PR to validate it on Snack!
Property | Type | Rendering | ย Features |
---|---|---|---|
blockQuote |
<View> |
โ | Also blockQuoteBar (<View> ) and blockQuoteText (<Text> ) |
br |
<Text> |
โ | - |
del |
<Text> |
โ | - |
em |
<Text> |
โ | - |
hr |
<View> |
โ | - |
heading |
<Text> |
โ | ย Also heading1 through heading6 |
image |
<Image> |
โ | ย ou can use resizeMode in <Markdown /> styles prop to set a resizeMode |
inlineCode |
<Text> |
โ | ย - |
link |
<Text> |
โ | ย - |
list |
<View> |
โ | ย Also listItem (<View> ), listItemBullet (<Text> ), listItemBulletType (Unicode character ), listItemNumber (<Text> ) and listItemText (<Text> ) |
mailTo |
<Text> |
โ | ย - |
paragraph |
<View> |
โ | ย - |
plainText |
<Text> |
โ | Used for styling text without any associated styles |
strong |
<Text> |
โ | ย - |
table |
<View> |
โ | ย - |
tableHeader |
<View> |
โ | ย - |
tableHeaderCell |
<View> |
โ | ย - |
tableRow |
<View> |
โ | ย - |
tableRowCell |
<View> |
โ | ย - |
tableRowLast |
<View> |
โ | ย Inherits from tableRow |
text |
<Text> |
โ | ย - |
u |
<Text> |
โ | ย - |
url |
<Text> |
โ | ย - |
video |
<Image> |
โ | ย Supports YouTube & Vimeo |
view |
<View> |
โ | ย This is the View container where the Markdown is rendered |
This project was forked from react-native-markdown
by @lwansbrough ๐