react-native-simple-markdown
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-simple-markdown
Usage
All you need is import the react-native-simple-markdown
and then use the
<Markdown />
component.
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**http://charlesmangwa.surge.sh) or if you prefer: [email somebody](mailto:email@somebody.com){'\n'} Spice it up with some GIFs 💃: !
Properties
styles
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>
rules
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: <CustomImageComponent key=statekey source= uri: nodetarget /> > !Alt text/path/to/imgjpg</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 the default styles for link
and url
, 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.
Features
blockQuote
(<View>
) - AlsoblockQuoteBar
(<View>
) andblockQuoteText
(<Text>
)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.
WIP
Most of these elements can be used, but I'm still working on some improvements. Pull requests are welcome!
autolink
(<Text>
)codeBlock
(<Text>
)
Credits
This project was forked from react-native-markdown
by @lwansbrough.