### Install react-native-markdown-display with NPM

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Command to install the react-native-markdown-display library using NPM.

```npm
npm install -S react-native-markdown-display
```

--------------------------------

### Install react-native-enriched-markdown

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Command to install the recommended successor library, react-native-enriched-markdown, which is a high-performance, fully native Markdown renderer.

```sh
yarn add react-native-enriched-markdown
```

--------------------------------

### Install react-native-markdown-display with Yarn

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Command to install the react-native-markdown-display library using Yarn.

```npm
yarn add react-native-markdown-display
```

--------------------------------

### Configure Markdown-it with Plugins

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Initializes a markdown-it instance with the typographer option and a block-embed plugin. This setup prepares the markdown parser to handle custom syntax like video embeds.

```jsx
import Markdown, { MarkdownIt } from 'react-native-markdown-display';
import blockEmbedPlugin from 'markdown-it-block-embed';

const markdownItInstance = MarkdownIt({typographer: true})
  .use(blockEmbedPlugin, {
    containerClassName: "video-embed"
  });
```

--------------------------------

### Basic Usage of react-native-markdown-display

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Example demonstrating how to import and use the Markdown component from react-native-markdown-display to render Markdown content within a React Native application. It includes setting up the basic app structure with SafeAreaView and ScrollView.

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

import Markdown from '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;
```

--------------------------------

### Custom Link Handling with onLinkPress in React Native

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

This example shows how to customize the behavior of links within the Markdown component by using the `onLinkPress` prop. It allows for custom logic before the default link opening behavior occurs.

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

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

const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;

const onLinkPress = (url) => {
    if (url) {
      // some custom logic
      return false;
    }
    
    // return true to open with `Linking.openURL
    // return false to handle it yourself
    return true
  }

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

export default App;
```

--------------------------------

### Limit Rendered Content Elements (React Native)

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

This example demonstrates how to limit the number of rendered top-level elements using the `maxTopLevelChildren` prop. This is useful for displaying content previews or optimizing performance with large markdown documents. The code snippet shows a basic setup for rendering markdown with this limitation.

```jsx
import React, { useState } from 'react';
import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import Markdown from 'react-native-markdown-display';

const longContent = `
# Article Title

First paragraph with introduction to the topic.

## Section One

Content for section one with detailed information.

## Section Two

Content for section two with more details.

## Section Three

Even more content here.

`;

const App = () => {
  const [limit, setLimit] = useState(2);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ padding: 16 }}>
        <Text style={{ fontSize: 18, marginBottom: 10 }}>
          Max Top-Level Children: {limit}
        </Text>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 10 }}>
          {[1, 2, 3, 4, 5].map(num => (
            <TouchableOpacity
              key={num}
              onPress={() => setLimit(num)}
              style={{
                padding: 8,
                margin: 4,
                backgroundColor: limit === num ? 'blue' : 'gray',
                borderRadius: 4,
              }}>
              <Text style={{ color: 'white' }}>{num}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
      <ScrollView style={{ padding: 16 }}>
        <Markdown maxTopLevelChildren={limit}>{longContent}</Markdown>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

```

--------------------------------

### Apply Custom Styles to Markdown Elements in React Native

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

This example shows how to apply custom styles to markdown elements using the `style` prop and `mergeStyle` option. It demonstrates styling for various elements like headings, inline code, code blocks, blockquotes, links, lists, and tables, allowing for a highly customized appearance.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
import Markdown from 'react-native-markdown-display';

const markdownStyles = StyleSheet.create({
  body: {
    color: '#333333',
    fontSize: 16,
    lineHeight: 24,
  },
  heading1: {
    fontSize: 32,
    color: '#1a1a1a',
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eeeeee',
    paddingBottom: 10,
  },
  heading2: {
    fontSize: 24,
    color: '#2a2a2a',
    fontWeight: '600',
    marginTop: 16,
    marginBottom: 8,
  },
  code_inline: {
    backgroundColor: '#f5f5f5',
    borderRadius: 4,
    padding: 4,
    fontFamily: 'Courier',
    fontSize: 14,
    color: '#e83e8c',
  },
  code_block: {
    backgroundColor: '#282c34',
    padding: 16,
    borderRadius: 8,
    fontFamily: 'Courier',
    fontSize: 14,
    color: '#abb2bf',
  },
  fence: {
    backgroundColor: '#282c34',
    padding: 16,
    borderRadius: 8,
    fontFamily: 'Courier',
    fontSize: 14,
    color: '#abb2bf',
  },
  blockquote: {
    backgroundColor: '#fff8e1',
    borderLeftColor: '#ffb300',
    borderLeftWidth: 4,
    paddingLeft: 12,
    paddingVertical: 8,
    marginVertical: 8,
  },
  link: {
    color: '#0066cc',
    textDecorationLine: 'underline',
  },
  bullet_list_icon: {
    color: '#0066cc',
    fontSize: 16,
    marginRight: 8,
  },
  table: {
    borderWidth: 1,
    borderColor: '#dddddd',
    borderRadius: 4,
  },
  th: {
    backgroundColor: '#f5f5f5',
    padding: 10,
    fontWeight: 'bold',
  },
  td: {
    padding: 10,
    borderTopWidth: 1,
    borderTopColor: '#dddddd',
  },
});

const copy = `# Styled Markdown
## Subheading with custom styles

Regular text with 
code
 styling.

\`\`\`
Code block with dark theme
\`\`\`

> Important note in a blockquote

- List item one
- List item two
`;

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView>
      <Markdown
        style={markdownStyles}
        mergeStyle={true}  // Merge with default styles (default: true)
      >
        {copy}
      </Markdown>
    </ScrollView>
  </SafeAreaView>
);

export default App;

```

--------------------------------

### Disable Markdown Features in React Native

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

This example demonstrates how to disable specific markdown features, such as images and links, by passing the `markdownit` property with a configuration to exclude certain token types. This is useful for optimizing markdown rendering in mobile environments.

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

import Markdown, { MarkdownIt } from 'react-native-markdown-display';

const copy = `

```

--------------------------------

### Utilizing Markdown Parsing and Rendering Utilities

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Demonstrates how to use low-level utilities like hasParents for node checking, getUniqueID for element keys, openUrl for custom link handling, and the manual parsing pipeline using stringToTokens and tokensToAST.

```javascript
import { getUniqueID, openUrl, hasParents, stringToTokens, tokensToAST, MarkdownIt } from 'react-native-markdown-display';

const isInsideList = (parentNodes) => {
  return hasParents(parentNodes, 'bullet_list') || hasParents(parentNodes, 'ordered_list');
};

const uniqueKey = getUniqueID();

const onLinkPress = (url) => {
  console.log('Custom handler for:', url);
  return false;
};
openUrl('https://example.com', onLinkPress);

const markdownIt = MarkdownIt({ typographer: true });
const tokens = stringToTokens('# Hello **World**', markdownIt);
const ast = tokensToAST(tokens);
console.log('AST:', JSON.stringify(ast, null, 2));
```

--------------------------------

### Markdown Links Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Demonstrates how to create standard links, links with titles, and automatic link conversion.

```markdown
[link text](https://www.google.com)

[link with title](https://www.google.com "title text!")

Autoconverted link https://www.google.com (enable linkify to see)
```

--------------------------------

### Debug Markdown Rendering with MarkdownIt Instance

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

This snippet shows how to create a MarkdownIt instance, apply plugins like markdown-it-block-embed, parse markdown content into an Abstract Syntax Tree (AST), and render it to HTML. It's useful for understanding the internal representation and the final output of the markdown parser.

```jsx
import Markdown, { MarkdownIt } from 'react-native-markdown-display';
import blockEmbedPlugin from 'markdown-it-block-embed';

const markdownItInstance = 
    MarkdownIt({typographer: true})
      .use(blockEmbedPlugin, {
        containerClassName: "video-embed"
      });

const copy = "
# Some header

@[youtube](lJIrF4YjHfQ)
";

// this shows you the tree that is used by the react-native-markdown-display
const astTree = markdownItInstance.parse(copy, {});
console.log(astTree);

//this contains the html that would be generated - not used by react-native-markdown-display but useful for reference
const html = markdownItInstance.render(copy);
console.log(html);

```

--------------------------------

### Markdown Lists Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Shows how to create unordered lists with various markers and ordered lists with custom numbering.

```markdown
Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet. This is a very long list item that will surely wrap onto the next line.
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit. This is a very long list item that will surely wrap onto the next line.
3. Integer molestie lorem at massa

Start numbering with offset:

57. foo
58. bar
```

--------------------------------

### Render Markdown via Pre-processed AST

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Shows how to manually convert markdown strings into an Abstract Syntax Tree (AST) using tokensToAST and stringToTokens, then passing the resulting tree directly to the Markdown component.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
import Markdown, { MarkdownIt, tokensToAST, stringToTokens } from 'react-native-markdown-display';

const markdownItInstance = MarkdownIt({typographer: true});
const copy = `# Hello this is a title\n\nThis is some text with **BOLD!**`;

const ast = tokensToAST(stringToTokens(copy, markdownItInstance));

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        <Markdown>{ast}</Markdown>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;
```

--------------------------------

### Markdown Tables Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Shows how to define tables with headers and alignment options.

```markdown
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
```

--------------------------------

### Markdown Headings Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Demonstrates the use of hash symbols to create six levels of headings in Markdown.

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

--------------------------------

### Pre-process Markdown to AST in React Native

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Shows how to parse markdown to an Abstract Syntax Tree (AST) for pre-processing, modification, or caching before rendering. This allows for content transformation or optimization of repeated renders.

```jsx
import React, { useMemo } from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import Markdown, { MarkdownIt, tokensToAST, stringToTokens } from 'react-native-markdown-display';

const markdownItInstance = MarkdownIt({ typographer: true });

const copy = `
# Pre-processed Content

This content is **parsed once** and can be reused.

- Item one
- Item two
- Item three
`;

// Function to transform AST nodes
const transformAST = (nodes) => {
  return nodes.map(node => {
    // Example: Add prefix to all heading text
    if (node.type.startsWith('heading')) {
      return {
        ...node,
        children: node.children.map(child => {
          if (child.type === 'text') {
            return { ...child, content: '🔹 ' + child.content };
          }
          return child;
        }),
      };
    }

    // Recursively transform children
    if (node.children && node.children.length > 0) {
      return { ...node, children: transformAST(node.children) };
    }

    return node;
  });
};

const App = () => {
  // Memoize the AST parsing and transformation
  const processedAST = useMemo(() => {
    const tokens = stringToTokens(copy, markdownItInstance);
    const ast = tokensToAST(tokens);
    return transformAST(ast);
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView style={{ padding: 16 }}>
        {/* Pass pre-processed AST instead of string */}
        <Markdown>{processedAST}</Markdown>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

```

--------------------------------

### Markdown Emphasis Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Illustrates how to apply bold, italic, and strikethrough styling to text.

```markdown
**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~
```

--------------------------------

### Markdown Images Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Shows how to embed images using standard Markdown syntax and footnote-style references.

```markdown
![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]
```

--------------------------------

### Extend Markdown Syntax with Plugins (React Native)

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

This snippet demonstrates how to extend markdown syntax by passing a custom markdown-it instance with plugins. It shows how to use `markdown-it-block-embed` to embed videos and defines custom render rules for new node types. Dependencies include `react-native-markdown-display` and `markdown-it-block-embed`.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, View, Text } from 'react-native';
import Markdown, { MarkdownIt } from 'react-native-markdown-display';
import blockEmbedPlugin from 'markdown-it-block-embed';

// Configure markdown-it with plugins
const markdownItInstance = MarkdownIt({ typographer: true })
  .use(blockEmbedPlugin, {
    containerClassName: 'video-embed',
  });

// Custom rule for the video node type added by the plugin
const customRules = {
  video: (node, children, parent, styles) => {
    // Access video information from node
    const { sourceInfo } = node;
    const videoId = sourceInfo?.videoID || 'unknown';
    const service = sourceInfo?.name || 'video';

    return (
      <View
        key={node.key}
        style={{
          backgroundColor: '#000',
          padding: 20,
          borderRadius: 8,
          marginVertical: 10,
          alignItems: 'center',
        }}>
        <Text style={{ color: '#fff', fontSize: 16 }}>
          🎬 {service.toUpperCase()} Video
        </Text>
        <Text style={{ color: '#aaa', fontSize: 12, marginTop: 4 }}>
          ID: {videoId}
        </Text>
        <Text style={{ color: '#666', fontSize: 10, marginTop: 8 }}>
          (Implement video player component here)
        </Text>
      </View>
    );
  },
};

const customStyles = {
  video: {
    // Styles accessible via styles.video in render rule
    marginVertical: 10,
  },
};

const copy = `
# Video Embed Example

Here's an embedded YouTube video:

@[youtube](dQw4w9WgXcQ)

And here's another:

@[youtube](lJIrF4YjHfQ)
`;

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView style={{ padding: 16 }}>
      <Markdown
        markdownit={markdownItInstance}
        rules={customRules}
        style={customStyles}
        debugPrintTree={false}  // Set to true to see AST in console
      >
        {copy}
      </Markdown>
    </ScrollView>
  </SafeAreaView>
);

export default App;

```

--------------------------------

### Custom AstRenderer for Markdown in React Native

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Illustrates how to create a fully custom renderer for advanced use cases, providing complete control over the markdown rendering pipeline. This includes overriding render rules, styles, and link press handlers.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, View, Text } from 'react-native';
import Markdown, { AstRenderer, renderRules, styles as defaultStyles } from 'react-native-markdown-display';

// Extend default render rules
const customRenderRules = {
  ...renderRules,
  // Override specific rules as needed
  heading1: (node, children, parent, styles) => (
    <View key={node.key} style={styles._VIEW_SAFE_heading1}>
      <Text style={{ fontSize: 28, fontWeight: 'bold', color: '#1a1a1a' }}>
        {children}
      </Text>
    </View>
  ),
};

// Extend default styles
const customStyles = StyleSheet.create({
  ...defaultStyles,
  heading1: {
    ...defaultStyles.heading1,
    borderBottomWidth: 2,
    borderBottomColor: '#0066cc',
    paddingBottom: 8,
    marginBottom: 16,
  },
});

// Custom link handler
const handleLinkPress = (url) => {
  console.log('Link pressed:', url);
  return true; // Use default Linking behavior
};

// Create custom renderer instance
const customRenderer = new AstRenderer(
  customRenderRules,
  customStyles,
  handleLinkPress,        // onLinkPress
  null,                   // maxTopLevelChildren
  null,                   // topLevelMaxExceededItem
  ['https://', 'http://', 'data:image/'], // allowedImageHandlers
  'https://',             // defaultImageHandler
  false                   // debugPrintTree
);

const copy = `
# Custom Renderer Example

This uses a fully custom AstRenderer instance.

[Click this link](https://example.com)
`;

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView style={{ padding: 16 }}>
      <Markdown renderer={customRenderer}>{copy}</Markdown>
    </ScrollView>
  </SafeAreaView>
);

export default App;

```

--------------------------------

### Markdown Blockquotes Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Demonstrates how to create blockquotes, including nested quotes using multiple greater-than signs.

```markdown
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
```

--------------------------------

### Define Custom Render Rules

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Explains how to define a rules object to customize the rendering logic of specific Markdown elements like headings.

```jsx
import React from 'react';
import { Text } from 'react-native';
import Markdown from 'react-native-markdown-display';

const rules = {
    heading1: (node, children, parent, styles) =>
      <Text key={node.key} style={[styles.heading, styles.heading1]}>
        >> H1 TEXT HERE >> "{children}"
      </Text>,
    heading2: (node, children, parent, styles) =>
      <Text key={node.key} style={[styles.heading, styles.heading2]}>
        >> H2 TEXT HERE >> "{children}"
      </Text>,
    heading3: (node, children, parent, styles) =>
      <Text key={node.key} style={[styles.heading, styles.heading3]}>
        >> H3 TEXT HERE >> "{children}"
      </Text>,
};
```

--------------------------------

### Render Markdown with Custom Markdown-it Configuration

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Demonstrates how to render markdown content in a React Native component while disabling specific rules like links and images using a custom markdown-it instance.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
import Markdown, { MarkdownIt } from 'react-native-markdown-display';

const copy = `# This heading will show with formatting\n\n[but this link will just](be displayed as this text)`;

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        <Markdown
          markdownit={MarkdownIt({typographer: true}).disable([ 'link', 'image' ])}
        >
          {copy}
        </Markdown>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;
```

--------------------------------

### Markdown Horizontal Rules Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Shows how to create horizontal separators using underscores or dashes.

```markdown
Some text above
___

Some text in the middle

---

Some text below
```

--------------------------------

### Override Styles using StyleSheet

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Shows how to define a separate StyleSheet object and pass it to the Markdown component to override default element styling.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar, StyleSheet } from 'react-native';
import Markdown from 'react-native-markdown-display';

const styles = StyleSheet.create({
  heading1: { fontSize: 32, backgroundColor: '#000000', color: '#FFFFFF' },
  heading2: { fontSize: 24 },
  heading3: { fontSize: 18 },
  heading4: { fontSize: 16 },
  heading5: { fontSize: 13 },
  heading6: { fontSize: 11 }
});

const copy = `# h1 Heading 8-)\n## h2 Heading 8-)\n### h3 Heading 8-)\n\n| Option | Description |\n| ------ | ----------- |\n| data   | path to data files |\n| engine | engine to be used |`;

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

export default App;
```

--------------------------------

### Markdown Component Props

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Configuration options and properties for the Markdown rendering component.

```APIDOC
## Markdown Component Props

### Description
The `<Markdown>` component is the primary interface for rendering markdown strings into native React Native components.

### Parameters
#### Props
- **children** (string) - Required - The markdown string to render.
- **style** (object) - Optional - Object to override default styling for markdown elements.
- **mergeStyle** (boolean) - Optional - If true, merges custom styles with defaults instead of overwriting.
- **rules** (object) - Optional - Custom rendering rules for specific markdown elements.
- **onLinkPress** (function) - Optional - Handler function for link click events.
- **debugPrintTree** (boolean) - Optional - If true, logs the AST tree to the console.
- **markdownit** (object) - Optional - Custom markdown-it instance configuration.

### Request Example
<Markdown style={myStyles} onLinkPress={(url) => console.log(url)}>
  # Hello World
</Markdown>

### Response
- **Rendered Output** (Component) - A tree of native React Native components representing the markdown content.
```

--------------------------------

### Handling Link Press

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Intercept link interactions within the markdown content to implement custom navigation logic or custom URL handling.

```APIDOC
## Handling Link Press

### Description
Customize link behavior using the `onLinkPress` callback. This allows you to intercept clicks on links to perform internal navigation or custom actions.

### Parameters
#### Props
- **onLinkPress** (function) - Optional - A callback function that receives the URL string. Return `true` to use default behavior or `false` to handle the link manually.

### Request Example
const handleLinkPress = (url) => {
  if (url.startsWith('/')) {
    // Navigate internally
    return false;
  }
  return true; // Default behavior
};

<Markdown onLinkPress={handleLinkPress}>{markdownContent}</Markdown>
```

--------------------------------

### Markdown Code Blocks Syntax

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Demonstrates inline code, indented code blocks, fenced code blocks, and syntax-highlighted JavaScript code.

```markdown
Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

```
Sample text here...
```

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```
```

--------------------------------

### Apply Inline Styles to Markdown

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Demonstrates how to apply inline styles to specific Markdown elements like body, headings, and code blocks within the Markdown component.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
import Markdown from 'react-native-markdown-display';

const copy = `This is some text which is red because of the body style, which is also really small!\n\n\`\`\`\n//This is a code block woooo\n\nconst cool = () => {\n  console.log('????');\n};\n\`\`\`\n\nand some more small text\n\n# This is a h1\n## this is a h2\n### this is a h3`;

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView contentInsetAdjustmentBehavior="automatic" style={{height: '100%'}}>
            <Markdown
              style={{
                body: {color: 'red', fontSize: 10},
                heading1: {color: 'purple'},
                code_block: {color: 'black', fontSize: 14}
              }}
            >
              {copy}
            </Markdown>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default App;
```

--------------------------------

### Handle Link Press Events

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Explains how to use the onLinkPress callback to intercept link interactions. By returning false, you can prevent default Linking behavior and implement custom logic for internal navigation, email, phone, or confirmation dialogs.

```jsx
const handleLinkPress = (url) => {
  if (url.startsWith('/')) {
    Alert.alert('Navigation', `Navigate to: ${url}`);
    return false;
  }
  if (url.startsWith('mailto:')) {
    Linking.openURL(url);
    return false;
  }
  return false;
};

<Markdown onLinkPress={handleLinkPress}>{markdownContent}</Markdown>;
```

--------------------------------

### Implement Custom Render Rules for Markdown Tokens

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

Defines custom render rules and styles within the Markdown component to handle specific tokens generated by plugins. This allows developers to map markdown nodes to custom React components.

```jsx
<Markdown
  markdownit={markdownItInstance}
  style={{
    video: {
      color: 'red',
    }
  }}
  rules={{
    video: (node, children, parent, styles) => {
      return (<Text key={node.key} style={styles.video}>
        Return a video component instead of this text component!
      </Text>);
    }
  }}
>
  {copy}
</Markdown>
```

--------------------------------

### Render Markdown Content in React Native

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

This snippet demonstrates the basic usage of the Markdown component from react-native-markdown-display to render markdown text within a React Native application. It includes necessary imports and component structure.

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

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

const copy = `### h3 Heading 8-)

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
`;

const rules = {
  // custom rules can be defined here
};

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

export default App;
```

--------------------------------

### Render Markdown Content with React Native Markdown Display

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

This snippet demonstrates how to use the main Markdown component to render markdown content within a React Native application. It showcases basic markdown features like headings, text formatting, lists, blockquotes, code blocks, and tables, utilizing native components for rendering.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
import Markdown from 'react-native-markdown-display';

const markdownContent = `# Welcome to My App

**This is bold text** and *this is italic*.

## Features

- Native rendering (no WebView)
- CommonMark compliant
- Customizable styles

> This is a blockquote with important information.

\`\`\`javascript
const greeting = "Hello, World!";
console.log(greeting);
\`\`\`

| Feature | Status |
|---------|--------|
| Tables  | ✓      |
| Images  | ✓      |
| Links   | ✓      |

Visit [React Native](https://reactnative.dev) for more info.
`;

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <Markdown>{markdownContent}</Markdown>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default App;

```

--------------------------------

### Override Markdown Rendering Rules

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Demonstrates how to define a custom rules object to override default markdown element rendering, such as headings, code blocks, blockquotes, and images. Each rule function receives the node, children, parent, and styles to allow for complete UI customization.

```jsx
const customRules = {
  heading1: (node, children, parent, styles) => (
    <View key={node.key} style={[styles.heading1, { flexDirection: 'row', alignItems: 'center' }]}>
      <Text style={{ marginRight: 8, fontSize: 24 }}>📌</Text>
      <Text style={{ fontSize: 28, fontWeight: 'bold' }}>{children}</Text>
    </View>
  ),
  fence: (node, children, parent, styles) => {
    const code = node.content.replace(/\n$/, '');
    return (
      <View key={node.key} style={{ marginVertical: 10 }}>
        <View style={{ backgroundColor: '#1e1e1e', borderRadius: 8, padding: 12 }}>
          <Text style={{ fontFamily: 'Courier', color: '#d4d4d4', fontSize: 14 }}>{code}</Text>
        </View>
        <TouchableOpacity onPress={() => Alert.alert('Copied!', 'Code copied to clipboard')} style={{ position: 'absolute', right: 8, top: 8, backgroundColor: '#333', padding: 4, borderRadius: 4 }}>
          <Text style={{ color: '#fff', fontSize: 12 }}>Copy</Text>
        </TouchableOpacity>
      </View>
    );
  }
};
```

--------------------------------

### Custom Render Rules

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Define custom React components to override the default rendering of markdown elements like headings, code blocks, blockquotes, and images.

```APIDOC
## Custom Render Rules

### Description
Override how specific markdown elements are rendered by providing a custom rules object to the Markdown component. Each rule function receives the AST node, children, parent nodes, and styles.

### Parameters
#### Props
- **rules** (object) - Required - An object where keys are markdown element types (e.g., 'heading1', 'fence', 'blockquote') and values are functions returning a React component.

### Request Example
const customRules = {
  heading1: (node, children, parent, styles) => (
    <View>{children}</View>
  )
};

<Markdown rules={customRules}>{markdownContent}</Markdown>
```

--------------------------------

### Limit Markdown Content Display in React Native

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

Demonstrates how to limit the number of top-level children rendered by the Markdown component and provide a 'Show more...' option. This is useful for truncating long markdown content and allowing users to expand it.

```jsx
import React, { useState } from 'react';
import { TouchableOpacity, Text, SafeAreaView, ScrollView } from 'react-native';
import Markdown from 'react-native-markdown-display';

const longContent = `
# Long Content Example

This is a long piece of markdown content that will be truncated.

## Section One

Content for section one.

### Subsection 1.1

More details here.

## Section Two

Content for section two.

## Section Three

Content for section three.

## Section Four

Final section content.
`;

const App = () => {
  const [showFull, setShowFull] = useState(false);

  const showMoreItem = (
    <TouchableOpacity
      key="show-more"
      onPress={() => setShowFull(true)}
      style={{
        paddingVertical: 12,
        alignItems: 'center',
        backgroundColor: '#f0f0f0',
        borderRadius: 8,
        marginTop: 10,
      }}>
      <Text style={{ color: '#0066cc', fontWeight: '600' }}>
        Show more...
      </Text>
    </TouchableOpacity>
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView style={{ padding: 16 }}>
        <Markdown
          maxTopLevelChildren={showFull ? null : 3}
          topLevelMaxExceededItem={showMoreItem}>
          {longContent}
        </Markdown>

        {showFull && (
          <TouchableOpacity
            onPress={() => setShowFull(false)}
            style={{ paddingVertical: 12, alignItems: 'center' }}>
            <Text style={{ color: '#0066cc' }}>Show less</Text>
          </TouchableOpacity>
        )}
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

```

--------------------------------

### Custom Link Handling with Custom Rules in React Native

Source: https://github.com/iamacup/react-native-markdown-display/blob/master/README.md

This snippet illustrates how to override the default link rendering behavior by defining custom rules for `link` and `blocklink` within the `rules` prop of the Markdown component. This provides more granular control over link presentation and interaction.

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

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

const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;

const rules = {
  link: (node, children, parent, styles) => {
    return (
      <Text key={node.key} style={styles.link} onPress={() => yourCustomHandlerFunctionOrLogicHere(node.attributes.href) }>
        {children}
      </Text>
    );
  },
};

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

export default App;
```

--------------------------------

### Disable Markdown Features (React Native)

Source: https://context7.com/iamacup/react-native-markdown-display/llms.txt

This snippet shows how to disable specific markdown features like links, images, and HTML tags using markdown-it's `disable` method. This is useful for security or simplifying rendered output. The code takes a markdown string and renders it with specified features turned off.

```jsx
import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import Markdown, { MarkdownIt } from 'react-native-markdown-display';

// Create markdown-it instance with specific features disabled
const restrictedMarkdownIt = MarkdownIt({ typographer: true })
  .disable(['link', 'image', 'html_inline', 'html_block']);

// Features that can be disabled:
// 'link', 'image', 'backticks', 'fence', 'code',
// 'blockquote', 'hr', 'list', 'table', 'heading',
// 'emphasis', 'strikethrough', 'html_inline', 'html_block'

const copy = `
# User Generated Content

This content has restricted markdown:

[This link won't be clickable](https://malicious-site.com)

![This image won't load](https://example.com/image.jpg)

**Bold** and *italic* still work.

- Lists work too
- Item two

\`\`\`
Code blocks work
\`\`\`

<script>alert('This HTML is disabled')</script>
`;

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView style={{ padding: 16 }}>
      <Markdown markdownit={restrictedMarkdownIt}>{copy}</Markdown>
    </ScrollView>
  </SafeAreaView>
);

export default App;

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.