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}>
#Who is the best dev in town?
{'\n\n'}
Probably **the one** reading this lines 😏…
</Markdown>
)
}
const styles = {
heading1: {
fontSize: 22,
},
strong: {
fontSize: 18,
},
paragraph: {
fontSize: 14,
},
view: {
borderWidth: 1,
},
}
The Markdown will apply its styles 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>
)list
(<View>
) - AlsolistItem
(<View>
),listItemBullet
(<Text>
) andlistItemNumber
(<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>
)view
(<View>
) - This is the containerView
that the Markdown is rendered in.
Pulll requests are welcome!
autolink
(<Text>
)blockQuote
(<Text>
)codeBlock
(<View>
)image
(<Image>
) - Usable but need to herit image sizelink
(<Text>
)mailto
(<Text>
)newline
(<Text>
)
This project was forked from react-native-markdown
by @lwansbrough.