Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-simple-markdown with all npm packages installed. Try it out:

require("react-native/package.json"); // react-native is a peer dependency. var reactNativeSimpleMarkdown = require("react-native-simple-markdown")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-simple-markdown v1.1.0

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

react-native-simple-markdown

Build Status npm version npm Open Source Love

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

Future

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!

Usage

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**](http://carlito.ninja) 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)
    </Markdown>   
  )
}

const markdownStyles = {
  heading1: {
    fontSize: 24,
    color: 'purple',
  },
  link: {
    color: 'pink',
  },
  mailTo: {
    color: 'orange',
  },
  text: {
    color: '#555555',
  },
}

Properties

styles

<Markdown /> will apply its style by default. However you can pass a styles prop to customize it has you wish.

Example:

<Markdown
  styles={{
    heading1: {
      fontSize: 20,
    },
    strong: {
      fontWeight: 'bold',
    }
  }}
>
  #Hello 👋
</Markdown>

rules

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!

Example:

<Markdown
  rules={{
    image: {
      react: (node, output, state) => (
        <CustomImageComponent
          key={state.key}
          source={{ uri: node.target }}
        />
      ),
    },
  }}
>
  ![Alt text](/path/to/img.jpg)
</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 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.

Styles

PropertyTypeFeatures
blockQuote<View>Also blockQuoteBar (<View>) and blockQuoteText (<Text>)
br<Text>-
del<Text>-
em<Text>-
hr<View>-
heading<Text>Also heading1 through heading6
image<Image>You 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

Credits

This project was forked from react-native-markdown by @lwansbrough 👍

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free