@danieldunderfelt/react-native-markdown-display

v8.0.2

Published

10 months ago

Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer

Downloads

0High
0Medium
0Low

danieldunderfelt

react react-native native markdown commonmark markdown-it

React Native Markdown Display

It a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is not a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten and styled as needed.

Compatibility with react-native-markdown-renderer

This is intended to be a replacement for react-native-markdown-renderer, with a variety of bug fixes and enhancements - Due to how the new style rules work, there may be some tweaking needed, see how to style stuff section below

Install

Yarn

yarn add react-native-markdown-display

NPM

npm install -S react-native-markdown-display

Get Started

import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';

import Markdownfrom '@ronradtke/react-native-markdown-display';

const copy = `# h1 Heading 8-)

**This is some bold text!**

This is normal text
`;

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={{height: '100%'}}
        >
          <Markdown>
            {copy}
          </Markdown>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default App;

You can find this example here

This next example worked with "react-native-markdown-display": "^7.0.0-alpha.2", on React18.1.0, React Native 0.70.5 via the Expo command npx create-expo-app --template with typescript selected.

import React from "react";
import { StyleSheet, SafeAreaView, ScrollView, StatusBar } from "react-native";
import { useTheme } from "@react-navigation/native";

import Markdown from "react-native-markdown-display";

const copy = `# h1 Heading 8-)

**This is some bold text!**

This is normal text
`;

const MarkdownWrapper: React.FC<any> = ({ children }) => {
  const { colors } = useTheme();
  // @ts-ignore
  return <Markdown style={styles({ colors })}>{children}</Markdown>;
};

const App: () => React.ReactElement = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={{ height: "100%" }}
        >
          <MarkdownWrapper>{copy}</MarkdownWrapper>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export const styles = (props: any) =>
  StyleSheet.create({
    text: {
      color: props.colors.text,
    },
  });

export default App;

With text input

import React from "react";
import {
  StyleSheet,
  SafeAreaView,
  ScrollView,
  StatusBar,
  TextInput,
} from "react-native";
import { useTheme } from "@react-navigation/native";

import Markdown from "react-native-markdown-display";

const copy = `# h1 Heading 8-)

**This is some bold text!**

This is normal text
`;

const MarkdownWrapper: React.FC<any> = ({ children }) => {
  const { colors } = useTheme();
  // @ts-ignore
  return <Markdown style={styles({ colors })}>{children}</Markdown>;
};

const App: () => React.ReactElement = () => {
  const [text, onChangeText] = React.useState(copy);
  const { colors } = useTheme();
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={{ height: "100%" }}
        >
          <TextInput
            multiline
            style={{ ...styles({colors}).input, color: colors.text }}
            onChangeText={onChangeText}
            value={text}
          />
          <MarkdownWrapper>{text}</MarkdownWrapper>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export const styles = (props: any) =>
  StyleSheet.create({
    text: {
      color: props.colors.text,
    },
    input: {
      height: 80,
      margin: 12,
      borderWidth: 1,
      padding: 10,
    },
  });

export default App;

Props and Functions

The <Markdown> object takes the following common props:

| Property | Default | Required | Description
| --- | --- | --- | --- | children | N/A | true | The markdown string to render, or the pre-processed tree | style | source | false | An object to override the styling for the various rules, see style section below for more info | mergeStyle | true | false | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them | rules | source | false | An object of rules that specify how to render each markdown item, see rules section below for more info | onLinkPress | import { Linking } from 'react-native'; and Linking.openURL(url); | false | A handler function to change click behaviour, see handling links section below for more info | debugPrintTree | false | false | Will print the AST tree to the console to help you see what the markdown is being translated to

And some additional, less used options:

| Property | Default | Required | Description
| --- | --- | --- | --- | renderer | instanceOf(AstRenderer) | false | Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer. | markdownit | instanceOf(MarkdownIt) | false | A custom markdownit instance with your configuration, default is MarkdownIt({typographer: true}) | maxTopLevelChildren | null | false | If defined as a number will only render out first n many top level children, then will try to render out topLevelMaxExceededItem | topLevelMaxExceededItem | <Text key="dotdotdot">...</Text> | false | Will render when maxTopLevelChildren is hit. Make sure to give it a key! | allowedImageHandlers | ['data:image/png;base64', 'data:image/gif;base64', 'data:image/jpeg;base64', 'https://', 'http://'] | false | Any image that does not start with one of these will have the defaultImageHandler value prepended to it (unless defaultImageHandler is null in which case it won't try to render anything) | defaultImageHandler | http:// | false | Will be prepended to an image url if it does not start with something in the allowedImageHandlers array, if this is set to null, it won't try to recover but will just not render anything instead.

Syntax Support

  # h1 Heading 8-)
  ## h2 Heading
  ### h3 Heading
  #### h4 Heading
  ##### h5 Heading
  ###### h6 Heading