Nefariously Pushing Master


    1.2.1 • Public • Published


    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**]( or if you prefer: [email somebody]({'\n'}
          Spice it up with some GIFs 💃:
          ![Some GIF]({'\n'}
          And even add a cool video 😎!{'\n'}
          [![A cool video from YT](](
          [![Another one from Vimeo](](
    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: }}
      ![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 👍


    npm i @stream-io/react-native-simple-markdown

    DownloadsWeekly Downloads






    Unpacked Size

    35.2 kB

    Total Files


    Last publish


    • marco-ulge
    • vangalilea88
    • martincupela
    • stream-release-bot
    • madsroskar
    • caleb.murphy
    • zita.szupera
    • petyosi
    • tbarbugli
    • tschellenbach
    • jaapbakker88
    • vishtree
    • lukesmetham