---

@s77rt/react-native-markdown is a components library that provides drop-in replacements for React Native components with a built-in Markdown formatter.

Installation

npm install @s77rt/react-native-markdown

Components

<MarkdownTextInput />

<MarkdownTextInput /> is a drop-in replacement for <TextInput /> with a built-in Markdown formatter that takes an additional prop markdownStyles allowing you to customize the format of each Markdown fragment. Please refer to Markdown Styles for the list of supported styles.

Usage

const markdownStyles = useMemo<MarkdownStyles>(
	() => ({
		h1: {
			fontSize: 24,
			fontWeight: "bold",
		},
		h2: {
			fontSize: 20,
			fontWeight: "bold",
		},
		blockquote: {
			stripeColor: "lightgray",
			stripeWidth: 4,
			gapWidth: 4,
		},
		bold: {
			fontWeight: "bold",
		},
		italic: {
			fontStyle: "italic",
		},
		link: {
			color: "blue",
		},
		/* ... */
	}),
	[]
);

// Render
<MarkdownTextInput markdownStyles={markdownStyles} multiline />

Markdown Styles

Heading (h1 -> h6)	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight,
blockquote	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight, gapWidth, stripeWidth, stripeColor
codeblock	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
horizontalRule	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
bold	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
italic	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
link	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
image	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
code	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
strikethrough	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight
underline	backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight

Something is missing? Submit an issue

Markdown Parsers

• Uses MD4C (forked)

Markdown Flavors

CommonMark is used with extended support for:

• Auto links
• Strikethrough

License

MIT