react-native-swiftui-markdown 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+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,132 @@
+# react-native-swiftui-markdown
+
+A lightweight React Native component for rendering Markdown content with native iOS performance using SwiftUI.
+
+## Features
+
+- ✅ Markdown rendering with native performance
+- ✅ Support for headings, bold, italic, lists, code blocks
+- ✅ Customizable fonts and colors
+- ✅ TypeScript support
+- 🍎 iOS 15.0+ (Android support coming soon)
+
+## Installation
+
+```bash
+npm install react-native-swiftui-markdown
+# or
+yarn add react-native-swiftui-markdown
+```
+
+### iOS Setup
+
+```bash
+cd ios && pod install
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import MarkdownView from 'react-native-swiftui-markdown';
+
+export default function App() {
+  const markdown = `
+# Hello, Markdown!
+
+This is **bold** text and this is *italic*.
+
+- List item 1
+- List item 2
+
+\`\`\`javascript
+const greeting = "Hello, World!";
+console.log(greeting);
+\`\`\`
+  `;
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <MarkdownView
+        markdown={markdown}
+        style={styles.markdown}
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  markdown: {
+    flex: 1,
+    padding: 16,
+  },
+});
+```
+
+### Customization
+
+```tsx
+<MarkdownView
+  markdown={content}
+  h1FontSize={32}
+  h2FontSize={26}
+  h3FontSize={20}
+  tintColor="#007AFF"
+  codeBlockTintColor="#FF6B6B"
+  inlineCodeTintColor="#4ECDC4"
+  style={{ flex: 1, padding: 16 }}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `markdown` | `string` | **required** | Markdown content to render |
+| `style` | `ViewStyle` | - | Container style |
+| `h1FontSize` | `number` | `34` | Font size for H1 headings |
+| `h2FontSize` | `number` | `28` | Font size for H2 headings |
+| `h3FontSize` | `number` | `22` | Font size for H3 headings |
+| `h4FontSize` | `number` | `20` | Font size for H4 headings |
+| `h5FontSize` | `number` | `18` | Font size for H5 headings |
+| `h6FontSize` | `number` | `16` | Font size for H6 headings |
+| `fontFamily` | `string` | - | Base font family |
+| `tintColor` | `string` | - | Tint color for headings |
+| `codeBlockTintColor` | `string` | - | Tint color for code blocks |
+| `inlineCodeTintColor` | `string` | - | Tint color for inline code |
+| `quoteTintColor` | `string` | - | Tint color for quotes |
+
+## Supported Markdown Features
+
+- ✅ Headings (H1-H6)
+- ✅ Bold (`**text**`)
+- ✅ Italic (`*text*`)
+- ✅ Inline code (`` `code` ``)
+- ✅ Code blocks (` ``` `)
+- ✅ Unordered lists (`- item`)
+- 🔄 More features coming soon
+
+## Platform Support
+
+- ✅ iOS 15.0+
+- ⏳ Android (planned)
+
+## Requirements
+
+- React Native 0.60+
+- iOS 15.0+
+- Not compatible with Expo Go (use Expo dev client or bare workflow)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/ios/RNMarkdownView-Bridging-Header.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewManager.h>
+#import <React/RCTBridgeModule.h>
+#import <React/RCTView.h>

package/ios/RNMarkdownViewManager.m

@@ -0,0 +1,21 @@
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(RNMarkdownViewManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(markdown, NSString)
+RCT_EXPORT_VIEW_PROPERTY(h1FontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(h2FontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(h3FontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(h4FontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(h5FontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(h6FontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(fontFamily, NSString)
+RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(codeBlockTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(inlineCodeTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(quoteTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(enableLatex, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(enableSyntaxHighlighting, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(syntaxTheme, NSString)
+
+@end

package/ios/RNMarkdownViewManager.swift

@@ -0,0 +1,252 @@
+import Foundation
+import SwiftUI
+#if __has_include(<React/RCTViewManager.h>)
+import React
+#elseif __has_include("RCTViewManager.h")
+import React
+#else
+@_exported import React
+#endif
+
+@objc(RNMarkdownViewManager)
+class RNMarkdownViewManager: RCTViewManager {
+
+  override func view() -> UIView! {
+    return RNMarkdownViewWrapper()
+  }
+
+  override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+}
+
+class RNMarkdownViewWrapper: UIView {
+
+  private var hostingController: UIHostingController<RNMarkdownViewContent>?
+
+  @objc var markdown: String = "" {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var h1FontSize: NSNumber = 34 {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var h2FontSize: NSNumber = 28 {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var h3FontSize: NSNumber = 22 {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var fontFamily: String? {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var tintColor: UIColor? {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var codeBlockTintColor: UIColor? {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var inlineCodeTintColor: UIColor? {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var quoteTintColor: UIColor? {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var enableLatex: Bool = true {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var enableSyntaxHighlighting: Bool = true {
+    didSet {
+      updateContent()
+    }
+  }
+
+  @objc var syntaxTheme: String? {
+    didSet {
+      updateContent()
+    }
+  }
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupHostingController()
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  private func setupHostingController() {
+    let contentView = RNMarkdownViewContent(
+      markdown: markdown,
+      config: makeConfig()
+    )
+
+    let controller = UIHostingController(rootView: contentView)
+    controller.view.backgroundColor = .clear
+    controller.view.translatesAutoresizingMaskIntoConstraints = false
+
+    addSubview(controller.view)
+
+    NSLayoutConstraint.activate([
+      controller.view.topAnchor.constraint(equalTo: topAnchor),
+      controller.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+      controller.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+      controller.view.bottomAnchor.constraint(equalTo: bottomAnchor)
+    ])
+
+    hostingController = controller
+  }
+
+  private func makeConfig() -> MarkdownConfig {
+    return MarkdownConfig(
+      h1FontSize: CGFloat(truncating: h1FontSize),
+      h2FontSize: CGFloat(truncating: h2FontSize),
+      h3FontSize: CGFloat(truncating: h3FontSize),
+      fontFamily: fontFamily,
+      tintColor: tintColor.map { Color($0) },
+      codeBlockTintColor: codeBlockTintColor.map { Color($0) },
+      inlineCodeTintColor: inlineCodeTintColor.map { Color($0) },
+      quoteTintColor: quoteTintColor.map { Color($0) },
+      enableLatex: enableLatex,
+      enableSyntaxHighlighting: enableSyntaxHighlighting,
+      syntaxTheme: syntaxTheme
+    )
+  }
+
+  private func updateContent() {
+    hostingController?.rootView = RNMarkdownViewContent(
+      markdown: markdown,
+      config: makeConfig()
+    )
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    hostingController?.view.frame = bounds
+  }
+}
+
+struct MarkdownConfig {
+  let h1FontSize: CGFloat
+  let h2FontSize: CGFloat
+  let h3FontSize: CGFloat
+  let fontFamily: String?
+  let tintColor: Color?
+  let codeBlockTintColor: Color?
+  let inlineCodeTintColor: Color?
+  let quoteTintColor: Color?
+  let enableLatex: Bool
+  let enableSyntaxHighlighting: Bool
+  let syntaxTheme: String?
+}
+
+struct RNMarkdownViewContent: View {
+  let markdown: String
+  let config: MarkdownConfig
+
+  var body: some View {
+    ScrollView {
+      VStack(alignment: .leading, spacing: 8) {
+        renderMarkdown(markdown)
+      }
+      .padding(8)
+    }
+  }
+
+  @ViewBuilder
+  private func renderMarkdown(_ text: String) -> some View {
+    let lines = text.components(separatedBy: .newlines)
+    ForEach(Array(lines.enumerated()), id: \.offset) { index, line in
+      renderLine(line)
+    }
+  }
+
+  @ViewBuilder
+  private func renderLine(_ line: String) -> some View {
+    if line.hasPrefix("# ") {
+      Text(line.dropFirst(2))
+        .font(.system(size: config.h1FontSize, weight: .bold))
+        .foregroundColor(config.tintColor ?? .primary)
+    } else if line.hasPrefix("## ") {
+      Text(line.dropFirst(3))
+        .font(.system(size: config.h2FontSize, weight: .bold))
+        .foregroundColor(config.tintColor ?? .primary)
+    } else if line.hasPrefix("### ") {
+      Text(line.dropFirst(4))
+        .font(.system(size: config.h3FontSize, weight: .semibold))
+        .foregroundColor(config.tintColor ?? .primary)
+    } else if line.hasPrefix("- ") || line.hasPrefix("* ") {
+      HStack(alignment: .top, spacing: 8) {
+        Text("•")
+        Text(line.dropFirst(2))
+      }
+    } else if !line.isEmpty {
+      Text(parseInlineMarkdown(line))
+    } else {
+      Text(" ")
+        .font(.system(size: 4))
+    }
+  }
+
+  private func parseInlineMarkdown(_ text: String) -> AttributedString {
+    var result = AttributedString(text)
+
+    // Bold **text**
+    if let range = text.range(of: "\\*\\*(.+?)\\*\\*", options: .regularExpression) {
+      let content = String(text[range]).replacingOccurrences(of: "**", with: "")
+      var attr = AttributedString(content)
+      attr.font = .boldSystemFont(ofSize: 16)
+      return attr
+    }
+
+    // Italic *text*
+    if let range = text.range(of: "\\*(.+?)\\*", options: .regularExpression) {
+      let content = String(text[range]).replacingOccurrences(of: "*", with: "")
+      var attr = AttributedString(content)
+      attr.font = .italicSystemFont(ofSize: 16)
+      return attr
+    }
+
+    // Code `text`
+    if let range = text.range(of: "`(.+?)`", options: .regularExpression) {
+      let content = String(text[range]).replacingOccurrences(of: "`", with: "")
+      var attr = AttributedString(content)
+      attr.font = .monospacedSystemFont(ofSize: 14, weight: .regular)
+      attr.foregroundColor = config.inlineCodeTintColor ?? .secondary
+      attr.backgroundColor = config.inlineCodeTintColor?.opacity(0.1) ?? Color.gray.opacity(0.1)
+      return attr
+    }
+
+    return result
+  }
+}

package/lib/commonjs/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MarkdownView = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LINKING_ERROR = `The package 'react-native-markdown-view' doesn't seem to be linked. Make sure: \n\n` + _reactNative.Platform.select({
+  ios: "- You have run 'pod install'\n",
+  default: ''
+}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo Go\n';
+const ComponentName = 'RNMarkdownView';
+const RNMarkdownViewNative = _reactNative.UIManager.getViewManagerConfig(ComponentName) != null ? (0, _reactNative.requireNativeComponent)(ComponentName) : () => {
+  throw new Error(LINKING_ERROR);
+};
+const MarkdownView = props => {
+  if (_reactNative.Platform.OS !== 'ios') {
+    console.warn('MarkdownView is currently only supported on iOS. Falling back to empty view.');
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(RNMarkdownViewNative, props);
+};
+exports.MarkdownView = MarkdownView;
+var _default = exports.default = MarkdownView;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","LINKING_ERROR","Platform","select","ios","ComponentName","RNMarkdownViewNative","UIManager","getViewManagerConfig","requireNativeComponent","Error","MarkdownView","props","OS","console","warn","createElement","exports","_default"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAMsB,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtB,MAAMG,aAAa,GACjB,qFAAqF,GACrFC,qBAAQ,CAACC,MAAM,CAAC;EAAEC,GAAG,EAAE,gCAAgC;EAAEJ,OAAO,EAAE;AAAG,CAAC,CAAC,GACvE,sDAAsD,GACtD,+BAA+B;AAgEjC,MAAMK,aAAa,GAAG,gBAAgB;AAEtC,MAAMC,oBAAoB,GACxBC,sBAAS,CAACC,oBAAoB,CAACH,aAAa,CAAC,IAAI,IAAI,GACjD,IAAAI,mCAAsB,EAAoBJ,aAAa,CAAC,GACxD,MAAM;EACJ,MAAM,IAAIK,KAAK,CAACT,aAAa,CAAC;AAChC,CAAC;AAEA,MAAMU,YAAyC,GAAIC,KAAK,IAAK;EAClE,IAAIV,qBAAQ,CAACW,EAAE,KAAK,KAAK,EAAE;IACzBC,OAAO,CAACC,IAAI,CACV,8EACF,CAAC;IACD,OAAO,IAAI;EACb;EAEA,oBAAOrB,MAAA,CAAAM,OAAA,CAAAgB,aAAA,CAACV,oBAAoB,EAAKM,KAAQ,CAAC;AAC5C,CAAC;AAACK,OAAA,CAAAN,YAAA,GAAAA,YAAA;AAAA,IAAAO,QAAA,GAAAD,OAAA,CAAAjB,OAAA,GAEaW,YAAY","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { requireNativeComponent, UIManager, Platform } from 'react-native';
+const LINKING_ERROR = `The package 'react-native-markdown-view' doesn't seem to be linked. Make sure: \n\n` + Platform.select({
+  ios: "- You have run 'pod install'\n",
+  default: ''
+}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo Go\n';
+const ComponentName = 'RNMarkdownView';
+const RNMarkdownViewNative = UIManager.getViewManagerConfig(ComponentName) != null ? requireNativeComponent(ComponentName) : () => {
+  throw new Error(LINKING_ERROR);
+};
+export const MarkdownView = props => {
+  if (Platform.OS !== 'ios') {
+    console.warn('MarkdownView is currently only supported on iOS. Falling back to empty view.');
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(RNMarkdownViewNative, props);
+};
+export default MarkdownView;
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","requireNativeComponent","UIManager","Platform","LINKING_ERROR","select","ios","default","ComponentName","RNMarkdownViewNative","getViewManagerConfig","Error","MarkdownView","props","OS","console","warn","createElement"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,sBAAsB,EACtBC,SAAS,EACTC,QAAQ,QAGH,cAAc;AAErB,MAAMC,aAAa,GACjB,qFAAqF,GACrFD,QAAQ,CAACE,MAAM,CAAC;EAAEC,GAAG,EAAE,gCAAgC;EAAEC,OAAO,EAAE;AAAG,CAAC,CAAC,GACvE,sDAAsD,GACtD,+BAA+B;AAgEjC,MAAMC,aAAa,GAAG,gBAAgB;AAEtC,MAAMC,oBAAoB,GACxBP,SAAS,CAACQ,oBAAoB,CAACF,aAAa,CAAC,IAAI,IAAI,GACjDP,sBAAsB,CAAoBO,aAAa,CAAC,GACxD,MAAM;EACJ,MAAM,IAAIG,KAAK,CAACP,aAAa,CAAC;AAChC,CAAC;AAEP,OAAO,MAAMQ,YAAyC,GAAIC,KAAK,IAAK;EAClE,IAAIV,QAAQ,CAACW,EAAE,KAAK,KAAK,EAAE;IACzBC,OAAO,CAACC,IAAI,CACV,8EACF,CAAC;IACD,OAAO,IAAI;EACb;EAEA,oBAAOhB,KAAA,CAAAiB,aAAA,CAACR,oBAAoB,EAAKI,KAAQ,CAAC;AAC5C,CAAC;AAED,eAAeD,YAAY","ignoreList":[]}

package/lib/typescript/index.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+export interface MarkdownViewProps {
+    /**
+     * Markdown content to render
+     */
+    markdown: string;
+    /**
+     * Style for the container view
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Font size for different heading levels
+     */
+    h1FontSize?: number;
+    h2FontSize?: number;
+    h3FontSize?: number;
+    h4FontSize?: number;
+    h5FontSize?: number;
+    h6FontSize?: number;
+    /**
+     * Base font family
+     */
+    fontFamily?: string;
+    /**
+     * Tint color for links and other interactive elements
+     */
+    tintColor?: string;
+    /**
+     * Code block tint color
+     */
+    codeBlockTintColor?: string;
+    /**
+     * Inline code tint color
+     */
+    inlineCodeTintColor?: string;
+    /**
+     * Quote block tint color
+     */
+    quoteTintColor?: string;
+    /**
+     * Enable LaTeX math rendering
+     */
+    enableLatex?: boolean;
+    /**
+     * Enable syntax highlighting for code blocks
+     */
+    enableSyntaxHighlighting?: boolean;
+    /**
+     * Syntax highlighting theme name
+     */
+    syntaxTheme?: string;
+}
+export declare const MarkdownView: React.FC<MarkdownViewProps>;
+export default MarkdownView;

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "react-native-swiftui-markdown",
+  "version": "0.1.0",
+  "description": "A lightweight React Native Markdown renderer with native iOS performance using SwiftUI",
+  "author": "tinglinzh",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "prepack": "bob build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "markdown",
+    "swiftui",
+    "commonmark",
+    "latex",
+    "syntax-highlighting"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tinglinzh/react-native-swiftui-markdown.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tinglinzh/react-native-swiftui-markdown/issues"
+  },
+  "homepage": "https://github.com/tinglinzh/react-native-swiftui-markdown#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@react-native/eslint-config": "^0.73.2",
+    "@types/react": "^18.3.28",
+    "@types/react-native": "^0.73.0",
+    "eslint": "^8.57.1",
+    "prettier": "^3.8.1",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0",
+    "react-native-builder-bob": "^0.23.2",
+    "release-it": "^16.3.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module"
+    ]
+  }
+}

package/react-native-markdown-view.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-markdown-view"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "15.0" }
+  s.source       = { :git => "https://github.com/yourusername/react-native-markdown-view.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+
+  s.swift_version = '5.5'
+end

package/src/index.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+
+const LINKING_ERROR =
+  `The package 'react-native-markdown-view' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+export interface MarkdownViewProps {
+  /**
+   * Markdown content to render
+   */
+  markdown: string;
+
+  /**
+   * Style for the container view
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Font size for different heading levels
+   */
+  h1FontSize?: number;
+  h2FontSize?: number;
+  h3FontSize?: number;
+  h4FontSize?: number;
+  h5FontSize?: number;
+  h6FontSize?: number;
+
+  /**
+   * Base font family
+   */
+  fontFamily?: string;
+
+  /**
+   * Tint color for links and other interactive elements
+   */
+  tintColor?: string;
+
+  /**
+   * Code block tint color
+   */
+  codeBlockTintColor?: string;
+
+  /**
+   * Inline code tint color
+   */
+  inlineCodeTintColor?: string;
+
+  /**
+   * Quote block tint color
+   */
+  quoteTintColor?: string;
+
+  /**
+   * Enable LaTeX math rendering
+   */
+  enableLatex?: boolean;
+
+  /**
+   * Enable syntax highlighting for code blocks
+   */
+  enableSyntaxHighlighting?: boolean;
+
+  /**
+   * Syntax highlighting theme name
+   */
+  syntaxTheme?: string;
+}
+
+const ComponentName = 'RNMarkdownView';
+
+const RNMarkdownViewNative =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<MarkdownViewProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+
+export const MarkdownView: React.FC<MarkdownViewProps> = (props) => {
+  if (Platform.OS !== 'ios') {
+    console.warn(
+      'MarkdownView is currently only supported on iOS. Falling back to empty view.'
+    );
+    return null;
+  }
+
+  return <RNMarkdownViewNative {...props} />;
+};
+
+export default MarkdownView;