Introduction

React-native component which renders markdown into a webview!

Since version 1.0.0 it requires the peer dependency react-native-webview.

Features

• Renders Markdown into a React Native WebView component.
• Pure JavaScript implementation, based on Showdown, extendable with all (?) Showdown Extensions.
• No native code / No react-native link required.
• Customizable with CSS.
• Full TypeScript Support.
• Fully tested. 100% Code Coverage.
• Automatically opens links in the system browser. Supports all React Native WebView props and callbacks!

Installation

npm install --save react-native-showdown react-native-webview

or

yarn add react-native-showdown react-native-webview

With expo you are done.

With a pure React Native project you need to link react-native-webview:

react-native link react-native-webview
cd pods && pod install && cd ..

Usage

Full ES6 / TypeScript example:

import React from 'react';
import Markdown from 'react-native-showdown';
import { SafeAreaView } from 'react-native';

export default function App() {
  const markdown = `
# Welcome to React Native Showdown!

To get started, edit the markdown in \`App.tsx\`.

| Column 1 | Column 2 |
|----------|----------|
| A1       | B1       |
| A2       | B2       |
`;

  const css = `
h1 { color: red; }
code { font-size: 1.2rem; background-color: lightgray; }
`;

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Markdown markdown={markdown} css={css} />
    </SafeAreaView>
  );
}

Available props / converter options

• markdown String, required; Markdown string which will be shown as webview content. (Previous prop body is also still supported as fallback.)
• css String, optional; CSS which will be used to style the webview content. (Previous prop pureCSS is also still supported as fallback.)
• title String, optional; Sets the HTML title tag.
• options ConverterOptions, optional; All Showdown#options. Default is {simplifiedAutoLink: true, strikethrough: true, tables: true}.
• All other react-native-webviewprops and callbacks are also supported, expect the source prop!
• Notice that the WebView has a default { flex: 1 } style defined.

Run the example

git clone https://github.com/jerolimov/react-native-showdown.git
cd react-native-showdown
yarn install
yarn bootstrap   # which is similar to   cd example && yarn install

cd example
yarn ios         # or
yarn android

Few good to know

Project is based on the markdown parser Showdown.

License

MIT License