@codearcade/expo-markdown-native 🚀

A powerful, fully customizable, pure JavaScript/TypeScript Markdown renderer for React Native and Expo.

Featuring beautiful native syntax highlighting, interactive code blocks, copy-to-clipboard functionality, and dark mode support out of the box.

✨ Features (v2.0)

• 100% Pure JS/TS: No native linking required! Works seamlessly with Expo Go and bare React Native.
• Beautiful Code Blocks: Built-in syntax highlighting using highlight.js.
• Standalone CodeBlock: Exported component for when you just need to highlight a snippet without parsing full markdown.
• Highly Customizable: Style every single markdown node, plus granular control over code block containers, headers, and padding via the new codeStyle prop.
• Interactive: Built-in support for intercepting links and copying code to the clipboard.

📦 Installation

npm install @codearcade/expo-markdown-native  
# or  
yarn add @codearcade/expo-markdown-native  

Note: If you haven't already, you may need to install peer dependencies depending on your package manager: react-native-svg and react-native-safe-area-context.

🚀 Quick Start

import React from 'react';  
import { SafeAreaView, Alert } from 'react-native';  
import { Markdown } from '@codearcade/expo-markdown-native';  
  
const content = \`  
\# Hello World  
This is a \*\*bold\*\* statement.  
  
Here is some code:  
\\\`\\\`\\\`javascript  
const greeting = "Hello, React Native!";  
console.log(greeting);  
\\\`\\\`\\\`  
\`;  
  
export default function App() {  
return (  
<SafeAreaView style={{ flex: 1, padding: 20 }}>  
<Markdown  
content={content}  
theme="dark"  
onCopy={(text) => Alert.alert('Copied to clipboard!')}  
onLinkPress={(url) => {  
console.log(\`Navigating to ${url}\`);  
return true; // Return true to prevent default opening behavior  
}}  
/>  
</SafeAreaView>  
);  
} 

🎨 Styling Guide

1. Styling Code Blocks (codeStyle)

In v2, we introduced a single, powerful codeStyle object to give you granular control over code blocks without prop-clutter.

<Markdown  
content={content}  
codeStyle={{  
// 1. Outer Box: Border radius, margins, border colors  
container: {  
borderRadius: 16,  
borderColor: '#444',  
borderWidth: 1,  
},  
// 2. Header Bar: Height, background color, padding  
header: {  
backgroundColor: '#1e1e1e',  
paddingVertical: 10,  
},  
// 3. Header Text: The "JAVASCRIPT" label  
headerText: {  
color: '#a0a0a0',  
},  
// 4. Inner Padding: Give the code some breathing room  
content: {  
padding: 20,  
},  
// 5. Code Text: Font size, line height  
text: {  
fontSize: 14,  
}  
}}  
/>  

2. Styling Markdown Nodes (styles)

You can override the default text and layout styles by passing a styles object. The keys correspond to the Markdown nodes.

<Markdown  
content={content}  
styles={{  
body: { fontSize: 16, color: '#333' },  
heading1: { fontSize: 32, fontWeight: 'bold' },  
code\_inline: { backgroundColor: '#f0f0f0', color: '#e01e5a', borderRadius: 4 },  
link: { color: '#007AFF', textDecorationLine: 'underline' },  
}}  
/>  

Available Style Keys:

body, heading1 through heading6, hr, strong, em, s (strikethrough), blockquote, bullet_list, ordered_list, list_item, code_inline, code_block, fence, table, thead, tbody, th, tr, td, link, image.

🧩 Standalone <CodeBlock />

Don't need a full markdown parser? You can use our syntax highlighter completely standalone!

import { CodeBlock } from '@codearcade/expo-markdown-native';  
  
<CodeBlock  
content="console.log('Just a standalone snippet!');"  
language="javascript"  
appTheme="dark"  
onCopy={() => console.log('Copied!')}  
/>  

📖 API Reference

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | content | string | Required | The raw markdown string to render. | | theme | 'light' | 'dark' | 'light' | Base theme for background/text colors. | | codeTheme | ReactStyle | github / monokai | Highlight.js theme object for syntax. | | styles | Record<string, Style> | {} | Override styles for specific markdown nodes. | | codeStyle | MarkdownCodeStyle | {} | Advanced styling for code block containers. | | onLinkPress | (url) => boolean | undefined | Fired when a link is pressed. | | onCopy | (text) => void | undefined | Fired when the code block copy button is pressed. |

⚠️ Upgrading to v2.0

Version 2.0 is a complete rewrite to 100% TypeScript/JavaScript.

• Native Modules Removed: You no longer need to rebuild your native app or deal with auto-linking.
• Prop Changes: Individual props like codePadding, codeRadius, and codeHeaderHeight have been removed. Please use the new unified codeStyle prop instead.

📄 License

MIT