Render Markdown in React Native with native components (iOS & Android)

Downloads in past


761.0.16 years ago6 years agoMinified + gzip package size for react-native-markdown-text in KB


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-markdown-text


All you need is import the react-native-markdown-text and then use the <Markdown /> component. ```js import React from 'react' import Markdown from 'react-native-markdown-text' 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]( or if you prefer: [email somebody](
Spice it up with some GIF:
![Some GIF](
And even add a cool video:
[![A cool video from YT](](
[![Another one from Vimeo](](
) } 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: ```js heading1: {
fontSize: 20,
strong: {
fontWeight: 'bold',


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: ```js image: {
react: (node, output, state) => (
source={{ uri: }}
Alt text
``` 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: ```js 'link', 'url'}
{ description }
``` Will only apply the default styles for link and url. 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.


  • blockQuote (<View>) - Also blockQuoteBar and blockQuoteText
  • br (<Text>)
  • del (<Text>)
  • em (<Text>)
  • hr (<View>)
  • heading (<Text>) - Also heading1 through heading6
  • inlineCode (<Text>)
  • image (<Image>) - You can use resizeMode in <Markdown /> styles prop to set a resizeMode
  • link (Text)
  • list (<View>) - Also listItem (<View>), listItemBullet (<Text>), listItemBulletType (Unicode character), listItemNumber (<Text>) and listItemText (<Text>)
  • mailTo (Text)
  • paragraph (<View>)
  • plainText (<Text>) - Use for styling text without any associated styles
  • strong (<Text>)
  • table (<View>)
  • tableHeader (<View>)
  • tableHeaderCell (<Text>)
  • tableRow (<View>)
  • tableRowCell (<View>)
  • tableRowLast (<View>, inherits from tableRow)
  • text (<Text>) - Inherited by all text based elements
  • u (<View>)
  • url (<Text>)
  • video (<Image>) - Supports Youtube & Vimeo
  • view (<View>) - This is the View 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>)
  • codeBlock (<Text>)


This project was forked from react-native-simple-markdown by @CharlesMangwa.