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-markdown-editor with all npm packages installed. Try it out:

var reactNativeMarkdownEditor = require("react-native-markdown-editor")

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

react-native-markdown-editor v1.0.1

A markdown editor for react native


npm version Build Status

This is a library for rendering a markdown editor for the markdown with helper buttons to easily write markdown. With live preview markdown as well (thanks to


Getting Started

Install the node module:

`yarn add react-native-markdown-editor`

or with npm:

`npm install --save react-native-markdown-editor`

Then see Usage for futher details




  • Multiline textinput for writing markdown
  • Live preview of the markdown written (can be hidden)
  • Helper buttons to write the syntax for the markdown (like github)

Markdown where editor helps (in order for the default format)

Bold Text

Italic Text

Underline text


Inline code

  • Item 1
  • Item 2

Url Links:


function codeExample(arg) {

This is an < h1 > tag


Import the editor through

import { MarkdownEditor } from 'react-native-markdown-editor';

And use like this this in the jsx

<MarkdownEditor />

And pass a function onMarkdownChange which will be callback when markdown is changed

 <MarkdownEditor onMarkdownChange={this.onTextChange} />

It can be used with a toolbar and have a submit menu option there!


Your own custom formats

You can give a custom list of buttons you want to give the default is Formats by speicifying

   <MarkdownEditor Formats={YOUR_CUSTOM_Formats} />

Customize the helper button

You can customize the helper button using the markdownButton prop. The buttons are rendered using a FlatList and the data passed is the Formats

markdownButton can be method like

const defaultMarkdownButton = ({ item, getState, setState }) =>
    onPress={() => item.onPress({ getState, setState, item })}

Where item is an each object in the Formats list

You can also import the methods used in Formats by using

import { applyWrapFormatNewLines, applyWrapFormat, applyWebLinkFormat, applyListFormat } from 'react-native-markdown-editor';

Customize the renderButton styles

You can add a style key in the Formats.js and this will be used while rendering the button

{ key: 'B', wrapper: '**', onPress: applyWrapFormat, style: { fontWeight: 'bold' } },


FormatsArrayFormatsElements for the markdown buttons
markdownButtonfunctiondefaultMarkdownButtonA custom function to render the markdown buttons
onMarkdownChangefunctionCallback function, calls when markdown is typed
showPreviewbooleanfalseTo show the markdown preview by Default


PR's/Issues/Bugs or suggestions are welcomed kindly post them in the section.


The MIT License.


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