react-native-markdown-native 1.0.0

package/lib/module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MarkdownElementType","DEFAULT_MARKDOWN_RULES","HEADING1","fontSize","fontWeight","marginTop","marginBottom","HEADING2","HEADING3","HEADING4","HEADING5","HEADING6","PARAGRAPH","BLOCKQUOTE","marginLeft","paddingLeft","borderLeftWidth","borderLeftColor","fontStyle","color","LIST","LIST_ITEM","listLeftInset","bulletIndent","ORDERED_LIST","ORDERED_LIST_ITEM","CODE_INLINE","fontFamily","backgroundColor","paddingRight","paddingTop","paddingBottom","borderRadius","CODE_BLOCK","padding","STRONG","EM","STRIKETHROUGH","textDecorationLine","LINK","HR","borderBottomWidth","borderBottomColor"],"sourceRoot":"../../src","sources":["types.ts"],"mappings":";;AAEA;AACA;AACA;AACA,WAAYA,mBAAmB,0BAAnBA,mBAAmB;EAC7B;EADUA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EAS7B;EATUA,mBAAmB;EAAnBA,mBAAmB;EAa7B;EAbUA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EAmB7B;EAnBUA,mBAAmB;EAAnBA,mBAAmB;EAuB7B;EAvBUA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EAAnBA,mBAAmB;EA6B7B;EA7BUA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;;AAiC/B;AACA;AACA;AACA;;AA8BA;AACA;AACA;;AAuBA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAqC,GAAG;EACnD,CAACD,mBAAmB,CAACE,QAAQ,GAAG;IAC9BC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACO,QAAQ,GAAG;IAC9BJ,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACQ,QAAQ,GAAG;IAC9BL,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACS,QAAQ,GAAG;IAC9BN,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACU,QAAQ,GAAG;IAC9BP,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACW,QAAQ,GAAG;IAC9BR,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,MAAM;IAClBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACY,SAAS,GAAG;IAC/BN,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACa,UAAU,GAAG;IAChCC,UAAU,EAAE,EAAE;IACdT,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE,CAAC;IACfS,WAAW,EAAE,EAAE;IACfC,eAAe,EAAE,CAAC;IAClBC,eAAe,EAAE,SAAS;IAC1BC,SAAS,EAAE,QAAQ;IACnBC,KAAK,EAAE;EACT,CAAC;EACD,CAACnB,mBAAmB,CAACoB,IAAI,GAAG;IAC1Bf,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACqB,SAAS,GAAG;IAC/Bf,YAAY,EAAE,CAAC;IACfgB,aAAa,EAAE,EAAE;IACjBC,YAAY,EAAE;EAChB,CAAC;EACD,CAACvB,mBAAmB,CAACwB,YAAY,GAAG;IAClCnB,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACyB,iBAAiB,GAAG;IACvCnB,YAAY,EAAE,CAAC;IACfgB,aAAa,EAAE,EAAE;IACjBC,YAAY,EAAE;EAChB,CAAC;EACD,CAACvB,mBAAmB,CAAC0B,WAAW,GAAG;IACjCC,UAAU,EAAE,uCAAuC;IACnDC,eAAe,EAAE,SAAS;IAC1Bb,WAAW,EAAE,CAAC;IACdc,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE;EAChB,CAAC;EACD,CAAChC,mBAAmB,CAACiC,UAAU,GAAG;IAChCN,UAAU,EAAE,uCAAuC;IACnDC,eAAe,EAAE,SAAS;IAC1BM,OAAO,EAAE,EAAE;IACXF,YAAY,EAAE,CAAC;IACf3B,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACD,CAACN,mBAAmB,CAACmC,MAAM,GAAG;IAC5B/B,UAAU,EAAE;EACd,CAAC;EACD,CAACJ,mBAAmB,CAACoC,EAAE,GAAG;IACxBlB,SAAS,EAAE;EACb,CAAC;EACD,CAAClB,mBAAmB,CAACqC,aAAa,GAAG;IACnCC,kBAAkB,EAAE;EACtB,CAAC;EACD,CAACtC,mBAAmB,CAACuC,IAAI,GAAG;IAC1BpB,KAAK,EAAE,SAAS;IAChBmB,kBAAkB,EAAE;EACtB,CAAC;EACD,CAACtC,mBAAmB,CAACwC,EAAE,GAAG;IACxBnC,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,EAAE;IAChBmC,iBAAiB,EAAE,CAAC;IACpBC,iBAAiB,EAAE;EACrB;AACF,CAAC","ignoreList":[]}

package/lib/typescript/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ViewProps, NativeSyntheticEvent } from 'react-native';
+import { MarkdownRules } from './types';
+export type NativeMarkdownSizeEvent = {
+    width: number;
+    height: number;
+};
+export interface NativeMarkdownViewProps extends ViewProps {
+    markdownText: string;
+    markdownFontSize?: number;
+    markdownColor?: string;
+    markdownFontFamily?: string;
+    markdownSelectionColor?: string;
+    markdownScrollEnabled?: boolean;
+    markdownSelectable?: boolean;
+    markdownLinkColor?: string;
+    markdownLineSpacing?: number;
+    markdownParagraphSpacing?: number;
+    markdownBulletIndent?: number;
+    markdownListLeftInset?: number;
+    markdownListSpacingBefore?: number;
+    markdownListSpacingAfter?: number;
+    markdownRules?: MarkdownRules;
+    markdownRulesJson?: string;
+    onNativeSizeChange?: (event: NativeSyntheticEvent<NativeMarkdownSizeEvent>) => void;
+}
+export type { MarkdownRules, MarkdownElementStyle } from './types';
+export { MarkdownElementType, DEFAULT_MARKDOWN_RULES } from './types';
+export declare const MarkdownView: React.FC<NativeMarkdownViewProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAEL,SAAS,EACT,oBAAoB,EACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAA0B,MAAM,SAAS,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,CACnB,KAAK,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KACjD,IAAI,CAAC;CACX;AAGD,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAKtE,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsE1D,CAAC"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,80 @@
+import { TextStyle } from 'react-native';
+/**
+ * All supported markdown element types
+ */
+export declare enum MarkdownElementType {
+    HEADING1 = "heading1",
+    HEADING2 = "heading2",
+    HEADING3 = "heading3",
+    HEADING4 = "heading4",
+    HEADING5 = "heading5",
+    HEADING6 = "heading6",
+    PARAGRAPH = "paragraph",
+    BLOCKQUOTE = "blockquote",
+    LIST = "list",
+    LIST_ITEM = "listItem",
+    ORDERED_LIST = "orderedList",
+    ORDERED_LIST_ITEM = "orderedListItem",
+    CODE_INLINE = "codeInline",
+    CODE_BLOCK = "codeBlock",
+    STRONG = "strong",
+    EM = "em",
+    STRIKETHROUGH = "strikethrough",
+    LINK = "link",
+    HR = "hr"
+}
+/**
+ * Style definition for a markdown element
+ * Extends React Native TextStyle with additional custom properties
+ */
+export interface MarkdownElementStyle extends TextStyle {
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    padding?: number;
+    bulletIndent?: number;
+    listLeftInset?: number;
+    borderLeftWidth?: number;
+    borderLeftColor?: string;
+    backgroundColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    borderBottomWidth?: number;
+    borderBottomColor?: string;
+}
+/**
+ * Complete rules configuration for all markdown elements
+ */
+export type MarkdownRules = Partial<{
+    [MarkdownElementType.HEADING1]: MarkdownElementStyle;
+    [MarkdownElementType.HEADING2]: MarkdownElementStyle;
+    [MarkdownElementType.HEADING3]: MarkdownElementStyle;
+    [MarkdownElementType.HEADING4]: MarkdownElementStyle;
+    [MarkdownElementType.HEADING5]: MarkdownElementStyle;
+    [MarkdownElementType.HEADING6]: MarkdownElementStyle;
+    [MarkdownElementType.PARAGRAPH]: MarkdownElementStyle;
+    [MarkdownElementType.BLOCKQUOTE]: MarkdownElementStyle;
+    [MarkdownElementType.LIST]: MarkdownElementStyle;
+    [MarkdownElementType.LIST_ITEM]: MarkdownElementStyle;
+    [MarkdownElementType.ORDERED_LIST]: MarkdownElementStyle;
+    [MarkdownElementType.ORDERED_LIST_ITEM]: MarkdownElementStyle;
+    [MarkdownElementType.CODE_INLINE]: MarkdownElementStyle;
+    [MarkdownElementType.CODE_BLOCK]: MarkdownElementStyle;
+    [MarkdownElementType.STRONG]: MarkdownElementStyle;
+    [MarkdownElementType.EM]: MarkdownElementStyle;
+    [MarkdownElementType.STRIKETHROUGH]: MarkdownElementStyle;
+    [MarkdownElementType.LINK]: MarkdownElementStyle;
+    [MarkdownElementType.HR]: MarkdownElementStyle;
+}>;
+/**
+ * Default markdown rules that match the current behavior
+ * These ensure consistent rendering across iOS and Android
+ */
+export declare const DEFAULT_MARKDOWN_RULES: MarkdownRules;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "react-native-markdown-native",
+  "version": "1.0.0",
+  "description": "Native markdown rendering for React Native",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "author": "Sandeep Mansotra",
+  "license": "MIT",
+  "homepage": "https://github.com/sandeepmansotra/react-native-markdown-native",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sandeepmansotra/react-native-markdown-native.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sandeepmansotra/react-native-markdown-native/issues"
+  },
+  "keywords": [
+    "react-native",
+    "markdown",
+    "native",
+    "text",
+    "ios",
+    "android"
+  ],
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "react-native.config.js",
+    "package.json",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "build": "bob build",
+    "release": "release-it",
+    "prepare": "bob build",
+    "prepublishOnly": "npm run build"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": "eslint --fix",
+    "*.{js,ts,tsx,json,md}": "prettier --write"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.json"
+        }
+      ]
+    ]
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.83.1",
+    "@react-native/eslint-config": "^0.83.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "husky": "^9.1.7",
+    "jest": "^30.2.0",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
+    "react-native-builder-bob": "^0.40.17",
+    "react-test-renderer": "^19.2.4",
+    "release-it": "^19.2.4",
+    "ts-jest": "^29.4.6",
+    "typescript": "^4.0.0"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        packageImportPath: 'import com.markdownnative.MarkdownPackage;',
+        packageInstance: 'new MarkdownPackage()',
+      },
+      ios: {},
+    },
+  },
+};

package/src/index.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  requireNativeComponent,
+  ViewProps,
+  NativeSyntheticEvent,
+} from 'react-native';
+import { MarkdownRules, DEFAULT_MARKDOWN_RULES } from './types';
+
+export type NativeMarkdownSizeEvent = {
+  width: number;
+  height: number;
+};
+
+export interface NativeMarkdownViewProps extends ViewProps {
+  markdownText: string;
+  markdownFontSize?: number;
+  markdownColor?: string;
+  markdownFontFamily?: string;
+  markdownSelectionColor?: string;
+  markdownScrollEnabled?: boolean;
+  markdownSelectable?: boolean;
+  // Customization props (deprecated - use markdownRules instead)
+  markdownLinkColor?: string;
+  markdownLineSpacing?: number;
+  markdownParagraphSpacing?: number;
+  markdownBulletIndent?: number;
+  // List styling props (deprecated - use markdownRules instead)
+  markdownListLeftInset?: number; // Left margin for bullets
+  markdownListSpacingBefore?: number; // Space above list section
+  markdownListSpacingAfter?: number; // Space below list section
+  // New rules-based styling system
+  markdownRules?: MarkdownRules;
+  // Serialized rules for native (internal use)
+  markdownRulesJson?: string;
+  onNativeSizeChange?: (
+    event: NativeSyntheticEvent<NativeMarkdownSizeEvent>
+  ) => void;
+}
+
+// Re-export types for convenience
+export type { MarkdownRules, MarkdownElementStyle } from './types';
+export { MarkdownElementType, DEFAULT_MARKDOWN_RULES } from './types';
+
+const NativeMarkdownView =
+  requireNativeComponent<NativeMarkdownViewProps>('MarkdownView');
+
+export const MarkdownView: React.FC<NativeMarkdownViewProps> = (props) => {
+  const { onNativeSizeChange, markdownRules } = props;
+  const [nativeHeight, setNativeHeight] = useState<number>(0);
+
+  // Merge user rules with defaults
+  const finalRules = useMemo(() => {
+    if (!markdownRules) {
+      return DEFAULT_MARKDOWN_RULES;
+    }
+    return { ...DEFAULT_MARKDOWN_RULES, ...markdownRules };
+  }, [markdownRules]);
+
+  // Serialize rules to JSON for native modules
+  const rulesJson = useMemo(() => {
+    return JSON.stringify(finalRules);
+  }, [finalRules]);
+
+  // Default values (maintained for backward compatibility)
+  const defaultProps = {
+    markdownFontSize: 16,
+    markdownColor: '#000000',
+    markdownFontFamily: undefined,
+    markdownSelectionColor: '#ACCEF7',
+    markdownScrollEnabled: false,
+    markdownSelectable: true,
+    markdownLinkColor: '#007AFF',
+    markdownLineSpacing: 0,
+    markdownParagraphSpacing: 0,
+    markdownBulletIndent: 20,
+    markdownListLeftInset: 10,
+    markdownListSpacingBefore: 0,
+    markdownListSpacingAfter: 0,
+  };
+
+  const mergedProps = {
+    ...defaultProps,
+    ...props,
+    markdownRulesJson: rulesJson,
+  };
+
+  const fontSize = mergedProps.markdownFontSize;
+  // Minimum height based on font size (single line)
+  const minHeight = fontSize * 1.5;
+
+  const handleNativeSizeChange = useCallback(
+    (event: NativeSyntheticEvent<NativeMarkdownSizeEvent>) => {
+      const { height } = event.nativeEvent;
+      if (height > 0 && Math.abs(height - nativeHeight) > 0.5) {
+        setNativeHeight(height);
+      }
+      onNativeSizeChange?.(event);
+    },
+    [nativeHeight, onNativeSizeChange]
+  );
+
+  // Use nativeHeight if available, otherwise minHeight ensures visibility
+  const dynamicStyle = {
+    minHeight: minHeight,
+    height: nativeHeight > 0 ? nativeHeight : undefined,
+  };
+
+  const nativeView = (
+    <NativeMarkdownView
+      {...mergedProps}
+      style={[dynamicStyle, props.style]}
+      onNativeSizeChange={handleNativeSizeChange}
+    />
+  );
+
+  return nativeView;
+};

package/src/types.ts

@@ -0,0 +1,205 @@
+import { TextStyle } from 'react-native';
+
+/**
+ * All supported markdown element types
+ */
+export enum MarkdownElementType {
+  // Headers
+  HEADING1 = 'heading1',
+  HEADING2 = 'heading2',
+  HEADING3 = 'heading3',
+  HEADING4 = 'heading4',
+  HEADING5 = 'heading5',
+  HEADING6 = 'heading6',
+
+  // Text blocks
+  PARAGRAPH = 'paragraph',
+  BLOCKQUOTE = 'blockquote',
+
+  // Lists
+  LIST = 'list',
+  LIST_ITEM = 'listItem',
+  ORDERED_LIST = 'orderedList',
+  ORDERED_LIST_ITEM = 'orderedListItem',
+
+  // Code
+  CODE_INLINE = 'codeInline',
+  CODE_BLOCK = 'codeBlock',
+
+  // Inline styles
+  STRONG = 'strong',
+  EM = 'em',
+  STRIKETHROUGH = 'strikethrough',
+  LINK = 'link',
+
+  // Other
+  HR = 'hr',
+}
+
+/**
+ * Style definition for a markdown element
+ * Extends React Native TextStyle with additional custom properties
+ */
+export interface MarkdownElementStyle extends TextStyle {
+  // Additional spacing properties
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  padding?: number;
+
+  // List-specific properties
+  bulletIndent?: number;
+  listLeftInset?: number;
+
+  // Blockquote-specific properties (these overlap with View styles)
+  borderLeftWidth?: number;
+  borderLeftColor?: string;
+
+  // Code block-specific properties
+  backgroundColor?: string;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  borderBottomWidth?: number;
+  borderBottomColor?: string;
+}
+
+/**
+ * Complete rules configuration for all markdown elements
+ */
+export type MarkdownRules = Partial<{
+  [MarkdownElementType.HEADING1]: MarkdownElementStyle;
+  [MarkdownElementType.HEADING2]: MarkdownElementStyle;
+  [MarkdownElementType.HEADING3]: MarkdownElementStyle;
+  [MarkdownElementType.HEADING4]: MarkdownElementStyle;
+  [MarkdownElementType.HEADING5]: MarkdownElementStyle;
+  [MarkdownElementType.HEADING6]: MarkdownElementStyle;
+  [MarkdownElementType.PARAGRAPH]: MarkdownElementStyle;
+  [MarkdownElementType.BLOCKQUOTE]: MarkdownElementStyle;
+  [MarkdownElementType.LIST]: MarkdownElementStyle;
+  [MarkdownElementType.LIST_ITEM]: MarkdownElementStyle;
+  [MarkdownElementType.ORDERED_LIST]: MarkdownElementStyle;
+  [MarkdownElementType.ORDERED_LIST_ITEM]: MarkdownElementStyle;
+  [MarkdownElementType.CODE_INLINE]: MarkdownElementStyle;
+  [MarkdownElementType.CODE_BLOCK]: MarkdownElementStyle;
+  [MarkdownElementType.STRONG]: MarkdownElementStyle;
+  [MarkdownElementType.EM]: MarkdownElementStyle;
+  [MarkdownElementType.STRIKETHROUGH]: MarkdownElementStyle;
+  [MarkdownElementType.LINK]: MarkdownElementStyle;
+  [MarkdownElementType.HR]: MarkdownElementStyle;
+}>;
+
+/**
+ * Default markdown rules that match the current behavior
+ * These ensure consistent rendering across iOS and Android
+ */
+export const DEFAULT_MARKDOWN_RULES: MarkdownRules = {
+  [MarkdownElementType.HEADING1]: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  [MarkdownElementType.HEADING2]: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  [MarkdownElementType.HEADING3]: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  [MarkdownElementType.HEADING4]: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  [MarkdownElementType.HEADING5]: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  [MarkdownElementType.HEADING6]: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  [MarkdownElementType.PARAGRAPH]: {
+    marginBottom: 12,
+  },
+  [MarkdownElementType.BLOCKQUOTE]: {
+    marginLeft: 16,
+    marginTop: 8,
+    marginBottom: 8,
+    paddingLeft: 12,
+    borderLeftWidth: 4,
+    borderLeftColor: '#CCCCCC',
+    fontStyle: 'italic',
+    color: '#666666',
+  },
+  [MarkdownElementType.LIST]: {
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  [MarkdownElementType.LIST_ITEM]: {
+    marginBottom: 4,
+    listLeftInset: 10,
+    bulletIndent: 20,
+  },
+  [MarkdownElementType.ORDERED_LIST]: {
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  [MarkdownElementType.ORDERED_LIST_ITEM]: {
+    marginBottom: 4,
+    listLeftInset: 10,
+    bulletIndent: 20,
+  },
+  [MarkdownElementType.CODE_INLINE]: {
+    fontFamily: 'Menlo, Monaco, Courier New, monospace',
+    backgroundColor: '#F5F5F5',
+    paddingLeft: 4,
+    paddingRight: 4,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 3,
+  },
+  [MarkdownElementType.CODE_BLOCK]: {
+    fontFamily: 'Menlo, Monaco, Courier New, monospace',
+    backgroundColor: '#F5F5F5',
+    padding: 12,
+    borderRadius: 4,
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  [MarkdownElementType.STRONG]: {
+    fontWeight: 'bold',
+  },
+  [MarkdownElementType.EM]: {
+    fontStyle: 'italic',
+  },
+  [MarkdownElementType.STRIKETHROUGH]: {
+    textDecorationLine: 'line-through',
+  },
+  [MarkdownElementType.LINK]: {
+    color: '#007AFF',
+    textDecorationLine: 'underline',
+  },
+  [MarkdownElementType.HR]: {
+    marginTop: 16,
+    marginBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#CCCCCC',
+  },
+};