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

Usage no npm install needed!

<script type="module">
  import streamIoReactNativeSimpleMarkdown from 'https://cdn.skypack.dev/@stream-io/react-native-simple-markdown';



CircleCI npm downloads Commitizen friendly npm version

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


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@somebody.com){'\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)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)

      [![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)

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.


    heading1: {
      fontSize: 20,
    strong: {
      fontWeight: 'bold',
  #Hello 👋


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!


    image: {
      react: (node, output, state) => (
          source={{ uri: node.target }}
  ![Alt text](/path/to/img.jpg)

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.


  styles={ markdownStyles }
  whitelist={['link', 'url']}
  { description }

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:

  errorHandler={(errors, children) => console.log(errors, children)}


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 👍