react-native-marked
Markdown renderer for React Native powered by marked.js with built-in theming support
Installation
yarn add react-native-marked
Usage
import * as React from 'react';
import Markdown from 'react-native-marked';
const ExampleComponent = () => {
return (
<Markdown
value={`# Hello world`}
flatListProps={{
initialNumToRender: 8,
}}
/>
);
};
export default ExampleComponent;
Examples
- RN App: https://github.com/gmsgowtham/react-native-marked-test
- Snack: https://snack.expo.dev/@gmsgowtham/react-native-marked
Props
Prop | Description | Type | Optional? |
---|---|---|---|
value | Markdown value | string | false |
flatListProps | Props for customizing the underlying FlatList used | Omit<FlatListProps<ReactNode>, 'data' | 'renderItem' | 'horizontal'> ( 'data' , 'renderItem' , and 'horizontal' props are omitted and cannot be overridden.) |
true |
styles | Styles for parsed components | MarkedStyles | true |
theme | Props for customizing colors and spacing for all components,and it will get overridden with custom component style applied via 'styles' prop | UserTheme | true |
baseUrl | A prefix url for any relative link | string | true |
Supported elements
- Headings (1 to 6)
- Paragraph
- Emphasis (bold, italic, and strikethrough)
- Link
- Image
- Blockquote
- Inline Code
- Code Block
- List (ordered, unordered)
- Horizontal Rule
- Table
- HTML
Ref: CommonMark
HTML will be treated as plain text
Screenshots
Dark Theme | Light Theme |
---|---|
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library