React Native Markdown Components

Drop-in replacements for React Native Components with a built-in Markdown formatter.

npm install @s77rt/react-native-markdown

<MarkdownTextInput />

<MarkdownTextInput /> is a drop-in replacement for <TextInput /> with a built-in Markdown formatter.

<MarkdownTextInput /> accepts an addtional 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