DOCSEARCHbyAlgolia
Submit Docs

react-native-markdown-renderer

repository·master·Indexed 19 days ago

https://github.com/mientjan/react-native-markdown-renderer

A 100% CommonMark-compatible markdown renderer for React Native that uses native components instead of a WebView. It supports syntax extensions, URL autolinking, and typographer. The library allows for deep customization through custom render rules, style overrides, and markdown-it plugins. Version 4.1.1 requires React >= 18.0.0 and React Native >= 0.73.0.

Tokens
12.8K
Snippets
42
Records
56
Agent score
63%

What's inside react-native-markdown-renderer

  1. Overview of React Native Markdown Renderer

    master
    React Native Markdown Renderer is a 100% CommonMark-compatible markdown renderer designed specifically for React Native. Unlike many other implementations, it does not use a WebView; instead, it renders all markdown elements as native React Native components. This approach ensures better performance and allows developers to easily overwrite or customize any element using native components.

  2. Supported Markdown elements in react-native-markdown-renderer

    master

    The library supports a variety of standard Markdown elements rendered using native React Native components. Supported elements include:

    • Text Formatting: Bold, italic, and strikethrough text.
    • Links: Standard clickable links.
    • Inline Code: Text wrapped in backticks.
    • Lists: Both ordered (numbered) and unordered (bulleted) lists.
    • Code Blocks: Fenced code blocks for programming snippets.
    • Blockquotes: Text formatted as quotes.
    • Tables: Markdown-style tables.

  4. How to combine custom rules and styles

    master

    To apply both custom styles and custom render rules, do not use the rules and style props on the <Markdown /> component separately, as this will cause them to be ignored and trigger a console warning. Instead, instantiate an AstRenderer with both the rules and the styles, then pass that instance to the renderer prop.

    Example

    import Markdown, {
  AstRenderer,
  renderRules,
  styles as defaultStyles,
} from 'react-native-markdown-renderer';

const customStyles = {
  ...defaultStyles,
  heading1: {
    fontSize: 32,
    backgroundColor: '#000000',
    color: '#FFFFFF',
  },
  heading: {
    fontWeight: '600',
    borderBottomWidth: 1,
    borderColor: '#000000',
  },
};

const renderer = new AstRenderer(renderRules, customStyles, {
  onLinkPress: (url) => {
    console.log('Link pressed:', url);
  },
});

const App = () => (
  <Markdown renderer={renderer}>
    {'# Custom rendered heading'}
  </Markdown>
);

  5. Configure style merging behavior with `mergeStyle`

    master

    The Markdown component controls how your custom styles interact with the library's default styles using the mergeStyle prop:

    1. Deep Merging (Default): When mergeStyle={true}, your custom styles are deep-merged with the defaults. You only need to provide the specific properties you want to change; all other default properties for that element are preserved.
    2. Shallow Replacement: When mergeStyle={false}, your custom style object for a specific key entirely replaces the default style object for that key. Other default properties for that element will be lost.
    // Deep merge (default): keeps default fontSize, fontWeight, etc.
<Markdown style={{ heading1: { color: 'red' } }}>
  {'# Red heading'}
</Markdown>

// Shallow replacement: heading1 will ONLY have color: 'red'
<Markdown style={{ heading1: { color: 'red' } }} mergeStyle={false}>
  {'# Red heading with no other heading1 styles'}
</Markdown>

  9. Use a custom markdown-it instance

    master

    For complete control over the parsing logic, you can bypass the internal plugin management and provide your own pre-configured markdown-it instance via the markdownit prop. This is useful if you want to use the standard .use() pattern or configure parser settings like html or linkify directly.

    import Markdown from 'react-native-markdown-renderer';
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true })
  .use(somePlugin)
  .use(anotherPlugin, { option: true });

const App = () => (
  <Markdown markdownit={md}>
    {'# Custom parser configuration'}
  </Markdown>
);

  10. Define custom render rules for plugins

    master

    When a markdown-it plugin introduces new token types (new syntax), the renderer won't know how to display them by default. You must provide a corresponding render rule in the rules prop of the Markdown component to map the new token type to a React Native component.

    import Markdown, { PluginContainer } from 'react-native-markdown-renderer';
import { Text } from 'react-native';

const plugins = [new PluginContainer(myPlugin)];

const rules = {
  my_custom_token: (node, children, parent, styles) => (
    <Text key={node.key} style={{ color: 'red' }}>
      {children}
    </Text>
  ),
};

const App = () => (
  <Markdown plugins={plugins} rules={rules}>
    {'content with custom syntax'}
  </Markdown>
);

  12. Override default styles using the `style` prop

    master

    You can customize the appearance of any markdown element by passing a style object to the Markdown component. The object keys correspond to specific markdown elements (e.g., heading1, strong, paragraph), and the values are React Native style objects.

    import Markdown from 'react-native-markdown-renderer';

const customStyles = {
  heading1: {
    fontSize: 32,
    backgroundColor: '#000000',
    color: '#FFFFFF',
  },
  strong: {
    fontWeight: '800',
  },
};

const App = () => (
  <Markdown style={customStyles}>
    {'# Styled Heading\n\n**Bold text** in a paragraph.'}
  </Markdown>
);