hs-react-native-custom-markdown 0.0.1 → 0.0.4

package/LICENSE

@@ -0,0 +1,3 @@
+MIT License
+
+Copyright (c) 2025 Herika Sethi

package/README.md

@@ -1,97 +1,15 @@
-This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+# hs-react-native-custom-markdown
 
-# Getting Started
+A lightweight React Native component to render custom markdown content, including custom image resolvers.
 
-> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
+## ✨ Features
 
-## Step 1: Start Metro
+- Parses and renders markdown content
+- Supports custom image resolution logic 
+- Optimized for React Native apps
+- Written in TypeScript
 
-First, you will need to run **Metro**, the JavaScript build tool for React Native.
+## 📦 Installation
 
-To start the Metro dev server, run the following command from the root of your React Native project:
-
-```sh
-# Using npm
-npm start
-
-# OR using Yarn
-yarn start
-```
-
-## Step 2: Build and run your app
-
-With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
-
-### Android
-
-```sh
-# Using npm
-npm run android
-
-# OR using Yarn
-yarn android
-```
-
-### iOS
-
-For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
-
-The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
-
-```sh
-bundle install
-```
-
-Then, and every time you update your native dependencies, run:
-
-```sh
-bundle exec pod install
-```
-
-For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
-
-```sh
-# Using npm
-npm run ios
-
-# OR using Yarn
-yarn ios
-```
-
-If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
-
-This is one way to run your app — you can also build it directly from Android Studio or Xcode.
-
-## Step 3: Modify your app
-
-Now that you have successfully run the app, let's make changes!
-
-Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
-
-When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
-
-- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
-- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
-
-## Congratulations! :tada:
-
-You've successfully run and modified your React Native App. :partying_face:
-
-### Now what?
-
-- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
-- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
-
-# Troubleshooting
-
-If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
-
-# Learn More
-
-To learn more about React Native, take a look at the following resources:
-
-- [React Native Website](https://reactnative.dev) - learn more about React Native.
-- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
-- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
-- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
-- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
+```bash
+npm install hs-react-native-custom-markdown

package/dist/src/CustomMarkdown.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { StyleProp, TextStyle, ViewStyle, ImageStyle } from 'react-native';
+type MarkdownStyle = StyleProp<TextStyle | ViewStyle | ImageStyle>;
 type CustomMarkdownProps = {
     content: string;
-    styles?: Partial<typeof defaultStyles>;
+    styles?: Partial<Record<keyof typeof defaultStyles, MarkdownStyle>>;
     resolveImageSource?: (path: string) => any;
 };
 declare const CustomMarkdown: React.FC<CustomMarkdownProps>;

package/dist/src/CustomMarkdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMarkdown.d.ts","sourceRoot":"","sources":["../../src/CustomMarkdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAc,MAAM,OAAO,CAAC;AASnC,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,aAAa,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoNjD,CAAC;AAEF,eAAe,cAAc,CAAC;AAE9B,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FjB,CAAC"}
+{"version":3,"file":"CustomMarkdown.d.ts","sourceRoot":"","sources":["../../src/CustomMarkdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,EAML,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACX,MAAM,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;IACpE,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkNjD,CAAC;AAEF,eAAe,cAAc,CAAC;AAE9B,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FjB,CAAC"}

package/dist/src/CustomMarkdown.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
-    const mergedStyles = Object.assign(Object.assign({}, defaultStyles), styles);
+    const getMergedStyle = (key) => {
+        return [defaultStyles[key], styles[key]];
+    };
     const parseInlineMarkdown = (text) => {
         const elements = [];
         let remaining = text;
         let index = 0;
-        const applyRegex = (regex, style, isLink = false, isCode = false, isHtmlTag = false, renderText) => {
+        const applyRegex = (regex, styleKey, isLink = false, isCode = false, isHtmlTag = false, renderText) => {
             const match = regex.exec(remaining);
             if (match) {
                 const [full, inner, link] = match;
@@ -20,17 +22,17 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
                 if (before)
                     elements.push(before);
                 if (isLink) {
-                    elements.push(<react_native_1.Text key={`link-${index++}`} style={style} onPress={() => react_native_1.Linking.openURL(link)}>
+                    elements.push(<react_native_1.Text key={`link-${index++}`} style={getMergedStyle(styleKey)} onPress={() => react_native_1.Linking.openURL(link)}>
               {inner}
             </react_native_1.Text>);
                 }
                 else if (isHtmlTag && renderText) {
-                    elements.push(<react_native_1.Text key={`html-${index++}`} style={style}>
+                    elements.push(<react_native_1.Text key={`html-${index++}`} style={getMergedStyle(styleKey)}>
               {renderText(inner)}
             </react_native_1.Text>);
                 }
                 else {
-                    elements.push(<react_native_1.Text key={`styled-${index++}`} style={style}>
+                    elements.push(<react_native_1.Text key={`styled-${index++}`} style={getMergedStyle(styleKey)}>
               {inner}
             </react_native_1.Text>);
                 }
@@ -41,19 +43,24 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
         };
         while (remaining.length) {
             const patterns = [
-                { regex: /\*\*\*(.*?)\*\*\*/g, style: [mergedStyles.bold, mergedStyles.italic] },
-                { regex: /\*\*(.*?)\*\*/g, style: mergedStyles.bold },
-                { regex: /_(.*?)_/g, style: mergedStyles.italic },
-                { regex: /`([^`]+)`/g, style: mergedStyles.code, isCode: true },
-                { regex: /\[(.*?)\]\((.*?)\)/g, style: mergedStyles.link, isLink: true },
-                { regex: /<b>(.*?)<\/b>/i, style: mergedStyles.bold, isHtmlTag: true },
-                { regex: /<i>(.*?)<\/i>/i, style: mergedStyles.italic, isHtmlTag: true },
-                { regex: /<u>(.*?)<\/u>/i, style: mergedStyles.underline, isHtmlTag: true },
-                { regex: /<br\s*\/?>/i, style: mergedStyles.paragraph, isHtmlTag: true, renderText: () => '\n' },
+                { regex: /\*\*\*(.*?)\*\*\*/g, style: ['bold', 'italic'] },
+                { regex: /\*\*(.*?)\*\*/g, style: ['bold'] },
+                { regex: /_(.*?)_/g, style: ['italic'] },
+                { regex: /`([^`]+)`/g, style: ['code'], isCode: true },
+                { regex: /\[(.*?)\]\((.*?)\)/g, style: ['link'], isLink: true },
+                { regex: /<b>(.*?)<\/b>/i, style: ['bold'], isHtmlTag: true },
+                { regex: /<i>(.*?)<\/i>/i, style: ['italic'], isHtmlTag: true },
+                { regex: /<u>(.*?)<\/u>/i, style: ['underline'], isHtmlTag: true },
+                {
+                    regex: /<br\s*\/?>/i,
+                    style: ['paragraph'],
+                    isHtmlTag: true,
+                    renderText: () => '\n',
+                },
             ];
             let matched = false;
             for (const pattern of patterns) {
-                if (applyRegex(pattern.regex, pattern.style, pattern.isLink, pattern.isCode, pattern.isHtmlTag, pattern.renderText)) {
+                if (applyRegex(pattern.regex, pattern.style[0], pattern.isLink, pattern.isCode, pattern.isHtmlTag, pattern.renderText)) {
                     matched = true;
                     break;
                 }
@@ -74,8 +81,8 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
             if (line.trim() === '```') {
                 inCodeBlock = !inCodeBlock;
                 if (!inCodeBlock) {
-                    result.push(<react_native_1.View key={`code-${index}`} style={mergedStyles.codeBlock}>
-              <react_native_1.Text style={mergedStyles.code}>
+                    result.push(<react_native_1.View key={`code-${index}`} style={getMergedStyle('codeBlock')}>
+              <react_native_1.Text style={getMergedStyle('code')}>
                 {codeBlockContent.join('\n')}
               </react_native_1.Text>
             </react_native_1.View>);
@@ -87,64 +94,55 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
                 codeBlockContent.push(line);
                 return;
             }
-            // Image
             const imgMatch = line.match(/!\[(.*?)\]\((.*?)\)/);
             if (imgMatch) {
                 const altText = imgMatch[1];
                 const imgPath = imgMatch[2];
-                let source;
-                if (resolveImageSource) {
-                    source = resolveImageSource(imgPath);
-                }
-                else {
-                    source = { uri: imgPath }; // fallback: remote URL
-                }
-                result.push(<react_native_1.Image key={`img-${index}`} source={source} style={mergedStyles.image} accessibilityLabel={altText}/>);
+                const source = resolveImageSource
+                    ? resolveImageSource(imgPath)
+                    : { uri: imgPath };
+                result.push(<react_native_1.Image key={`img-${index}`} source={source} style={getMergedStyle('image')} accessibilityLabel={altText}/>);
                 return;
             }
-            // Heading
             const headingMatch = line.match(/^(#{1,6})\s+(.*)/);
             if (headingMatch) {
                 const level = headingMatch[1].length;
                 const headingText = headingMatch[2];
                 const styleKey = `heading${level}`;
-                result.push(<react_native_1.Text key={`heading-${index}`} style={mergedStyles[styleKey]}>
+                result.push(<react_native_1.Text key={`heading-${index}`} style={getMergedStyle(styleKey)}>
             {headingText}
           </react_native_1.Text>);
                 return;
             }
-            // Blockquote
             if (line.startsWith('>')) {
-                result.push(<react_native_1.View key={`quote-${index}`} style={mergedStyles.blockquoteContainer}>
-            <react_native_1.Text style={mergedStyles.blockquoteText}>
+                result.push(<react_native_1.View key={`quote-${index}`} style={getMergedStyle('blockquoteContainer')}>
+            <react_native_1.Text style={getMergedStyle('blockquoteText')}>
               {line.replace(/^>\s?/, '')}
             </react_native_1.Text>
           </react_native_1.View>);
                 return;
             }
-            // Bullet list
             if (line.trim().startsWith('- ')) {
-                result.push(<react_native_1.View key={`list-${index}`} style={mergedStyles.bulletRow}>
-            <react_native_1.Text style={mergedStyles.bullet}>{'\u2022'}</react_native_1.Text>
-            <react_native_1.Text style={mergedStyles.listText}>
+                result.push(<react_native_1.View key={`list-${index}`} style={getMergedStyle('bulletRow')}>
+            <react_native_1.Text style={getMergedStyle('bullet')}>{'\u2022'}</react_native_1.Text>
+            <react_native_1.Text style={getMergedStyle('listText')}>
               {parseInlineMarkdown(line.replace('- ', ''))}
             </react_native_1.Text>
           </react_native_1.View>);
                 return;
             }
-            // Numbered list
             const numberedMatch = line.trim().match(/^(\d+)\.\s+(.*)/);
             if (numberedMatch) {
-                result.push(<react_native_1.View key={`list-num-${index}`} style={mergedStyles.bulletRow}>
-            <react_native_1.Text style={mergedStyles.bullet}>{numberedMatch[1] + '.'}</react_native_1.Text>
-            <react_native_1.Text style={mergedStyles.listText}>
+                result.push(<react_native_1.View key={`list-num-${index}`} style={getMergedStyle('bulletRow')}>
+            <react_native_1.Text style={getMergedStyle('bullet')}>{numberedMatch[1] + '.'}</react_native_1.Text>
+            <react_native_1.Text style={getMergedStyle('listText')}>
               {parseInlineMarkdown(numberedMatch[2])}
             </react_native_1.Text>
           </react_native_1.View>);
                 return;
             }
             if (line.trim()) {
-                result.push(<react_native_1.Text key={`text-${index}`} style={mergedStyles.paragraph}>
+                result.push(<react_native_1.Text key={`text-${index}`} style={getMergedStyle('paragraph')}>
             {parseInlineMarkdown(line)}
           </react_native_1.Text>);
             }

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "hs-react-native-custom-markdown",
-  "version": "0.0.1",
+  "version": "0.0.4",
+  "description": "A React Native component to render custom markdown content.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "react-native": "dist/index.js",
   "private": false,
-  "description": "A React Native component to render custom markdown content.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/HerikaAFIDigital/custom-markdown-converter.git"
-  },
   "author": "Herika Sethi",
   "license": "MIT",
   "keywords": [
@@ -18,6 +14,10 @@
     "custom-markdown",
     "markdown-renderer"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HerikaAFIDigital/custom-markdown-converter.git"
+  },
   "files": [
     "dist",
     "README.md"
@@ -30,12 +30,13 @@
     "start": "react-native start",
     "test": "jest"
   },
-  "dependencies": {
-    "react": "19.1.0",
-    "react-native": "0.80.0",
-    "@react-native/new-app-screen": "0.80.0"
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
   },
   "devDependencies": {
+    "react": "19.1.0",
+    "react-native": "0.80.0",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",