@codearcade/expo-markdown-native 1.0.0

package/ExpoMarkdownNativeMarkdown.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ExpoMarkdownNativeMarkdown"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/codearcade-io/expo-markdown-native.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Abhishek Singh
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# @codearcade/expo-markdown-native-markdown
+
+Native Markdown rendering for Expo & React Native with built-in syntax highlighting.
+
+## Installation
+
+
+```sh
+npm install @codearcade/expo-markdown-native-markdown
+```
+
+
+## Usage
+
+
+```js
+import { ExpoMarkdownNativeMarkdownView } from "@codearcade/expo-markdown-native-markdown";
+
+// ...
+
+<ExpoMarkdownNativeMarkdownView color="tomato" />
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,67 @@
+buildscript {
+  ext.ExpoMarkdownNativeMarkdown = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return ExpoMarkdownNativeMarkdown[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.codearcade.expomarkdownnativemarkdown"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/codearcade/expomarkdownnativemarkdown/ExpoMarkdownNativeMarkdownPackage.kt

@@ -0,0 +1,17 @@
+package com.codearcade.expomarkdownnativemarkdown
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class ExpoMarkdownNativeMarkdownViewPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(ExpoMarkdownNativeMarkdownViewManager())
+  }
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
+}

package/android/src/main/java/com/codearcade/expomarkdownnativemarkdown/ExpoMarkdownNativeMarkdownView.kt

@@ -0,0 +1,15 @@
+package com.codearcade.expomarkdownnativemarkdown
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.View
+
+class ExpoMarkdownNativeMarkdownView : View {
+  constructor(context: Context?) : super(context)
+  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
+  constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
+    context,
+    attrs,
+    defStyleAttr
+  )
+}

package/android/src/main/java/com/codearcade/expomarkdownnativemarkdown/ExpoMarkdownNativeMarkdownViewManager.kt

@@ -0,0 +1,41 @@
+package com.codearcade.expomarkdownnativemarkdown
+
+import android.graphics.Color
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.ExpoMarkdownNativeMarkdownViewManagerInterface
+import com.facebook.react.viewmanagers.ExpoMarkdownNativeMarkdownViewManagerDelegate
+
+@ReactModule(name = ExpoMarkdownNativeMarkdownViewManager.NAME)
+class ExpoMarkdownNativeMarkdownViewManager : SimpleViewManager<ExpoMarkdownNativeMarkdownView>(),
+  ExpoMarkdownNativeMarkdownViewManagerInterface<ExpoMarkdownNativeMarkdownView> {
+  private val mDelegate: ViewManagerDelegate<ExpoMarkdownNativeMarkdownView>
+
+  init {
+    mDelegate = ExpoMarkdownNativeMarkdownViewManagerDelegate(this)
+  }
+
+  override fun getDelegate(): ViewManagerDelegate<ExpoMarkdownNativeMarkdownView>? {
+    return mDelegate
+  }
+
+  override fun getName(): String {
+    return NAME
+  }
+
+  public override fun createViewInstance(context: ThemedReactContext): ExpoMarkdownNativeMarkdownView {
+    return ExpoMarkdownNativeMarkdownView(context)
+  }
+
+  @ReactProp(name = "color")
+  override fun setColor(view: ExpoMarkdownNativeMarkdownView?, color: Int?) {
+    view?.setBackgroundColor(color ?: Color.TRANSPARENT)
+  }
+
+  companion object {
+    const val NAME = "ExpoMarkdownNativeMarkdownView"
+  }
+}

package/ios/ExpoMarkdownNativeMarkdownView.h

@@ -0,0 +1,14 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#ifndef ExpoMarkdownNativeMarkdownViewNativeComponent_h
+#define ExpoMarkdownNativeMarkdownViewNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ExpoMarkdownNativeMarkdownView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* ExpoMarkdownNativeMarkdownViewNativeComponent_h */

package/ios/ExpoMarkdownNativeMarkdownView.mm

@@ -0,0 +1,48 @@
+#import "ExpoMarkdownNativeMarkdownView.h"
+
+#import <React/RCTConversions.h>
+
+#import <react/renderer/components/ExpoMarkdownNativeMarkdownViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/ExpoMarkdownNativeMarkdownViewSpec/Props.h>
+#import <react/renderer/components/ExpoMarkdownNativeMarkdownViewSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@implementation ExpoMarkdownNativeMarkdownView {
+    UIView * _view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+    return concreteComponentDescriptorProvider<ExpoMarkdownNativeMarkdownViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const ExpoMarkdownNativeMarkdownViewProps>();
+    _props = defaultProps;
+
+    _view = [[UIView alloc] init];
+
+    self.contentView = _view;
+  }
+
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+    const auto &oldViewProps = *std::static_pointer_cast<ExpoMarkdownNativeMarkdownViewProps const>(_props);
+    const auto &newViewProps = *std::static_pointer_cast<ExpoMarkdownNativeMarkdownViewProps const>(props);
+
+    if (oldViewProps.color != newViewProps.color) {
+        [_view setBackgroundColor: RCTUIColorFromSharedColor(newViewProps.color)];
+    }
+
+    [super updateProps:props oldProps:oldProps];
+}
+
+@end

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./markdown.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.tsx"],"mappings":";;AAAA,cAAc,eAAY","ignoreList":[]}

package/lib/module/markdown.js

@@ -0,0 +1,215 @@
+"use strict";
+
+import React, { memo, useMemo, useState } from 'react';
+import { Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import CodeHighlighter from 'react-native-code-highlighter';
+import MarkdownDisplay from 'react-native-markdown-display';
+import { github, monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Markdown = ({
+  content,
+  theme = 'light',
+  codeTheme,
+  styles = {},
+  codeContainerStyle,
+  onLinkPress,
+  codeFontSize = 13,
+  onCopy
+}) => {
+  // 1. Select default Syntax Theme
+  const activeCodeTheme = codeTheme || (theme === 'dark' ? monokai : github);
+
+  // 2. Define Custom Rules
+  const rules = useMemo(() => ({
+    fence: (node, _children, _parent, _style) => {
+      const fenceNode = node;
+      return /*#__PURE__*/_jsx(CodeBlock, {
+        content: node.content,
+        language: fenceNode.sourceInfo,
+        syntaxTheme: activeCodeTheme,
+        appTheme: theme,
+        codeFontSize: codeFontSize,
+        codeContainerStyle: codeContainerStyle,
+        onCopy: onCopy
+      }, node.key);
+    },
+    code_block: (node, _children, _parent, _style) => /*#__PURE__*/_jsx(CodeBlock, {
+      content: node.content,
+      language: null,
+      syntaxTheme: activeCodeTheme,
+      appTheme: theme,
+      codeFontSize: codeFontSize,
+      codeContainerStyle: codeContainerStyle,
+      onCopy: onCopy
+    }, node.key)
+  }), [activeCodeTheme, theme, codeFontSize, onCopy]);
+  const baseStyles = theme === 'dark' ? markdownDark : markdownLight;
+  const mergedStyles = useMemo(() => {
+    const result = {
+      ...baseStyles
+    };
+    for (const key in styles) {
+      const userStyle = styles[key];
+      if (userStyle && typeof userStyle === 'object' && !Array.isArray(userStyle)) {
+        // If it's a style object, merge it with the base (or empty object if base doesn't exist)
+        result[key] = {
+          ...(result[key] || {}),
+          ...userStyle
+        };
+      } else {
+        // If it's not an object (rare edge case) or null/undefined, just overwrite/set it
+        result[key] = userStyle;
+      }
+    }
+    return result;
+  }, [baseStyles, styles]);
+  return /*#__PURE__*/_jsx(MarkdownDisplay, {
+    style: mergedStyles,
+    rules: rules,
+    onLinkPress: onLinkPress,
+    children: content
+  });
+};
+// --- Sub-Component: Code Block ---
+const CodeBlock = /*#__PURE__*/memo(({
+  content,
+  language,
+  syntaxTheme,
+  appTheme,
+  codeFontSize,
+  codeContainerStyle,
+  onCopy
+}) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    if (!onCopy) return;
+    try {
+      const textToCopy = content.replace(/\n$/, '');
+      await onCopy(textToCopy);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (e) {
+      console.warn('[Markdown] Copy failed', e);
+    }
+  };
+
+  // Dynamic Styles based on theme
+  const isDark = appTheme === 'dark';
+  const containerBg = isDark ? '#2d2d2d' : '#f5f5f5';
+  const borderColor = isDark ? 'rgba(255,255,255,0.1)' : '#e0e0e0';
+  const headerBg = isDark ? 'rgba(255,255,255,0.05)' : '#eaeaea';
+  const textColor = isDark ? '#fff' : '#333';
+  const codeStyle = useMemo(() => ({
+    ...staticStyles.codeText,
+    fontSize: codeFontSize
+  }), [codeFontSize]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [staticStyles.codeContainer, {
+      backgroundColor: containerBg,
+      borderColor
+    }, codeContainerStyle],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.codeHeader, {
+        backgroundColor: headerBg,
+        borderBottomColor: borderColor
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: staticStyles.languageLabel,
+        children: language || 'Code'
+      }), onCopy && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleCopy,
+        style: staticStyles.copyButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [staticStyles.copyText, {
+            color: textColor
+          }],
+          children: copied ? 'Copied!' : 'Copy'
+        })
+      })]
+    }), /*#__PURE__*/_jsx(CodeHighlighter, {
+      language: language ?? undefined,
+      hljsStyle: syntaxTheme,
+      textStyle: codeStyle,
+      children: content
+    })]
+  });
+});
+const staticStyles = StyleSheet.create({
+  codeContainer: {
+    marginVertical: 10,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1
+  },
+  codeHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderBottomWidth: 1
+  },
+  languageLabel: {
+    color: '#888',
+    fontSize: 11,
+    fontWeight: '600',
+    textTransform: 'uppercase'
+  },
+  copyButton: {
+    padding: 4
+  },
+  copyText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  codeText: {
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      android: 'monospace',
+      default: 'monospace'
+    }),
+    lineHeight: 20
+  }
+});
+const markdownLight = {
+  body: {
+    color: '#222',
+    fontSize: 16,
+    lineHeight: 24
+  },
+  heading1: {
+    color: '#000',
+    fontSize: 28,
+    fontWeight: '700',
+    marginVertical: 10
+  },
+  code_inline: {
+    backgroundColor: '#f0f0f0',
+    color: '#e01e5a',
+    borderRadius: 4
+  }
+};
+const markdownDark = {
+  body: {
+    color: '#eee',
+    fontSize: 16,
+    lineHeight: 24
+  },
+  heading1: {
+    color: '#fff',
+    fontSize: 28,
+    fontWeight: '700',
+    marginVertical: 10
+  },
+  code_inline: {
+    backgroundColor: '#333',
+    color: '#ff7b72',
+    borderRadius: 4
+  },
+  blockquote: {
+    borderLeftColor: '#555',
+    backgroundColor: '#222',
+    color: '#aaa'
+  }
+};
+//# sourceMappingURL=markdown.js.map

package/lib/module/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","useState","Platform","StyleSheet","Text","TouchableOpacity","View","CodeHighlighter","MarkdownDisplay","github","monokai","jsx","_jsx","jsxs","_jsxs","Markdown","content","theme","codeTheme","styles","codeContainerStyle","onLinkPress","codeFontSize","onCopy","activeCodeTheme","rules","fence","node","_children","_parent","_style","fenceNode","CodeBlock","language","sourceInfo","syntaxTheme","appTheme","key","code_block","baseStyles","markdownDark","markdownLight","mergedStyles","result","userStyle","Array","isArray","style","children","copied","setCopied","handleCopy","textToCopy","replace","setTimeout","e","console","warn","isDark","containerBg","borderColor","headerBg","textColor","codeStyle","staticStyles","codeText","fontSize","codeContainer","backgroundColor","codeHeader","borderBottomColor","languageLabel","onPress","copyButton","copyText","color","undefined","hljsStyle","textStyle","create","marginVertical","borderRadius","overflow","borderWidth","flexDirection","justifyContent","alignItems","paddingHorizontal","paddingVertical","borderBottomWidth","fontWeight","textTransform","padding","fontFamily","select","ios","android","default","lineHeight","body","heading1","code_inline","blockquote","borderLeftColor"],"sourceRoot":"..\\..\\src","sources":["markdown.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './markdown';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/lib/typescript/src/markdown.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ReactStyle } from 'react-native-code-highlighter';
+interface Props {
+    content: string;
+    theme?: 'light' | 'dark';
+    codeTheme?: ReactStyle;
+    styles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
+    codeContainerStyle?: StyleProp<ViewStyle>;
+    codeFontSize?: number;
+    onLinkPress?: (url: string) => boolean;
+    onCopy?: (text: string) => Promise<void> | void;
+}
+export declare const Markdown: React.FC<Props>;
+export {};
+//# sourceMappingURL=markdown.d.ts.map

package/lib/typescript/src/markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../src/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAMhE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;IAC1D,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsFpC,CAAC"}

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@codearcade/expo-markdown-native",
+  "version": "1.0.0",
+  "description": "Native Markdown rendering for Expo & React Native with built-in syntax highlighting.",
+  "main": "./lib/module/index.js",
+  "private": false,
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @codearcade/expo-markdown-native-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "release": "npm publish --access public"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codearcade-io/expo-markdown-native.git"
+  },
+  "author": "Abhishek Singh <official.6packprogrammer@gmail.com> (https://github.com/meabhisingh)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/codearcade-io/expo-markdown-native/issues"
+  },
+  "homepage": "https://github.com/codearcade-io/expo-markdown-native#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@types/react": "^19.1.12",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-code-highlighter": "^1.3.0",
+    "react-native-markdown-display": "^7.0.2",
+    "react-syntax-highlighter": "^16.1.0",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-code-highlighter": "*",
+    "react-native-markdown-display": "*",
+    "react-native-svg": "*",
+    "react-syntax-highlighter": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.57.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './markdown';

package/src/markdown.tsx

@@ -0,0 +1,273 @@
+import React, { memo, useMemo, useState } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type { ReactStyle } from 'react-native-code-highlighter';
+import CodeHighlighter from 'react-native-code-highlighter';
+import type { ASTNode } from 'react-native-markdown-display';
+import MarkdownDisplay from 'react-native-markdown-display';
+import { github, monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+interface Props {
+  content: string;
+  theme?: 'light' | 'dark';
+  codeTheme?: ReactStyle;
+  styles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
+  codeContainerStyle?: StyleProp<ViewStyle>;
+  codeFontSize?: number;
+  onLinkPress?: (url: string) => boolean;
+  onCopy?: (text: string) => Promise<void> | void;
+}
+
+export const Markdown: React.FC<Props> = ({
+  content,
+  theme = 'light',
+  codeTheme,
+  styles = {},
+  codeContainerStyle,
+  onLinkPress,
+  codeFontSize = 13,
+  onCopy,
+}) => {
+  // 1. Select default Syntax Theme
+  const activeCodeTheme = codeTheme || (theme === 'dark' ? monokai : github);
+
+  // 2. Define Custom Rules
+  const rules = useMemo(
+    () => ({
+      fence: (node: ASTNode, _children: any, _parent: any, _style: any) => {
+        const fenceNode = node as ASTNode & { sourceInfo: string };
+
+        return (
+          <CodeBlock
+            key={node.key}
+            content={node.content}
+            language={fenceNode.sourceInfo}
+            syntaxTheme={activeCodeTheme}
+            appTheme={theme}
+            codeFontSize={codeFontSize}
+            codeContainerStyle={codeContainerStyle}
+            onCopy={onCopy}
+          />
+        );
+      },
+      code_block: (
+        node: ASTNode,
+        _children: any,
+        _parent: any,
+        _style: any
+      ) => (
+        <CodeBlock
+          key={node.key}
+          content={node.content}
+          language={null}
+          syntaxTheme={activeCodeTheme}
+          appTheme={theme}
+          codeFontSize={codeFontSize}
+          codeContainerStyle={codeContainerStyle}
+          onCopy={onCopy}
+        />
+      ),
+    }),
+    [activeCodeTheme, theme, codeFontSize, onCopy]
+  );
+
+  const baseStyles = theme === 'dark' ? markdownDark : markdownLight;
+
+  const mergedStyles = useMemo(() => {
+    const result: Record<string, any> = { ...baseStyles };
+
+    for (const key in styles) {
+      const userStyle = styles[key];
+
+      if (
+        userStyle &&
+        typeof userStyle === 'object' &&
+        !Array.isArray(userStyle)
+      ) {
+        // If it's a style object, merge it with the base (or empty object if base doesn't exist)
+        result[key] = { ...(result[key] || {}), ...userStyle };
+      } else {
+        // If it's not an object (rare edge case) or null/undefined, just overwrite/set it
+        result[key] = userStyle;
+      }
+    }
+
+    return result;
+  }, [baseStyles, styles]);
+
+  return (
+    <MarkdownDisplay
+      style={mergedStyles}
+      rules={rules}
+      onLinkPress={onLinkPress}
+    >
+      {content}
+    </MarkdownDisplay>
+  );
+};
+
+interface CodeBlockProps {
+  content: string;
+  language?: string | null;
+  syntaxTheme: ReactStyle;
+  codeContainerStyle?: StyleProp<ViewStyle>;
+  appTheme: 'light' | 'dark';
+  codeFontSize: number;
+  onCopy?: (text: string) => Promise<void> | void;
+}
+
+// --- Sub-Component: Code Block ---
+const CodeBlock = memo(
+  ({
+    content,
+    language,
+    syntaxTheme,
+    appTheme,
+    codeFontSize,
+    codeContainerStyle,
+    onCopy,
+  }: CodeBlockProps) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+      if (!onCopy) return;
+
+      try {
+        const textToCopy = content.replace(/\n$/, '');
+        await onCopy(textToCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (e) {
+        console.warn('[Markdown] Copy failed', e);
+      }
+    };
+
+    // Dynamic Styles based on theme
+    const isDark = appTheme === 'dark';
+    const containerBg = isDark ? '#2d2d2d' : '#f5f5f5';
+    const borderColor = isDark ? 'rgba(255,255,255,0.1)' : '#e0e0e0';
+    const headerBg = isDark ? 'rgba(255,255,255,0.05)' : '#eaeaea';
+    const textColor = isDark ? '#fff' : '#333';
+
+    const codeStyle = useMemo(
+      () => ({
+        ...staticStyles.codeText,
+        fontSize: codeFontSize,
+      }),
+      [codeFontSize]
+    );
+
+    return (
+      <View
+        style={[
+          staticStyles.codeContainer,
+          { backgroundColor: containerBg, borderColor },
+          codeContainerStyle,
+        ]}
+      >
+        <View
+          style={[
+            staticStyles.codeHeader,
+            { backgroundColor: headerBg, borderBottomColor: borderColor },
+          ]}
+        >
+          <Text style={staticStyles.languageLabel}>{language || 'Code'}</Text>
+
+          {onCopy && (
+            <TouchableOpacity
+              onPress={handleCopy}
+              style={staticStyles.copyButton}
+            >
+              <Text style={[staticStyles.copyText, { color: textColor }]}>
+                {copied ? 'Copied!' : 'Copy'}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <CodeHighlighter
+          language={language ?? undefined}
+          hljsStyle={syntaxTheme}
+          textStyle={codeStyle}
+        >
+          {content}
+        </CodeHighlighter>
+      </View>
+    );
+  }
+);
+
+const staticStyles = StyleSheet.create({
+  codeContainer: {
+    marginVertical: 10,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+  },
+  codeHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+  },
+  languageLabel: {
+    color: '#888',
+    fontSize: 11,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  copyButton: {
+    padding: 4,
+  },
+  copyText: {
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  codeText: {
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      android: 'monospace',
+      default: 'monospace',
+    }),
+    lineHeight: 20,
+  },
+});
+
+const markdownLight = {
+  body: { color: '#222', fontSize: 16, lineHeight: 24 },
+  heading1: {
+    color: '#000',
+    fontSize: 28,
+    fontWeight: '700',
+    marginVertical: 10,
+  },
+  code_inline: {
+    backgroundColor: '#f0f0f0',
+    color: '#e01e5a',
+    borderRadius: 4,
+  },
+};
+
+const markdownDark = {
+  body: { color: '#eee', fontSize: 16, lineHeight: 24 },
+  heading1: {
+    color: '#fff',
+    fontSize: 28,
+    fontWeight: '700',
+    marginVertical: 10,
+  },
+  code_inline: { backgroundColor: '#333', color: '#ff7b72', borderRadius: 4 },
+  blockquote: {
+    borderLeftColor: '#555',
+    backgroundColor: '#222',
+    color: '#aaa',
+  },
+};