react-native-markdown-native 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sandeep Mansotra
+
+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/MarkdownNative.podspec

@@ -0,0 +1,19 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "MarkdownNative"
+  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/sandeepmansotra/react-native-markdown-native.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+end

package/README.md

@@ -0,0 +1,109 @@
+# React Native Markdown Native
+
+A high-performance, native Markdown rendering library for React Native that uses native `TextView` (Android) and `UITextView` (iOS 15+) for superior text handling, selection, and accessibility.
+
+## Features
+
+- 🚀 **Native Performance**: Uses native text components instead of WebViews or complex JS view hierarchies.
+- 📱 **Native Text Selection**: Supports standard OS text selection, copy/paste, and context menus.
+- 🎨 **Full Styling Control**: Customizable fonts, colors, spacing, and layout.
+- 🔗 **Link Handling**: Native handling of links with customizable colors.
+- 🧵 **Complex Layouts**: Supports lists, paragraphs, and standard markdown formatting.
+- ⚡ **Autolinking**: Easy installation with React Native autolinking.
+
+## Installation
+
+```bash
+npm install react-native-markdown-native
+# or
+yarn add react-native-markdown-native
+```
+
+### iOS Setup
+
+Requires iOS 15.0 or higher.
+Run `pod install` in your `ios` directory.
+
+### Android Setup
+
+The library supports React Native autolinking. No manual configuration is required in `settings.gradle` or `build.gradle`.
+
+## Usage
+
+```tsx
+import { MarkdownView } from 'react-native-markdown-native';
+
+const MyComponent = () => {
+  return (
+    <MarkdownView
+      markdownText="# Hello World\nThis is **bold** and *italic* text."
+      style={{ width: '100%', height: 200 }}
+      markdownFontSize={16}
+      markdownColor="#000000"
+    />
+  );
+};
+```
+
+## Props API
+
+| Prop                       | Type       | Default      | Description                                                              |
+| -------------------------- | ---------- | ------------ | ------------------------------------------------------------------------ |
+| `markdownText`             | `string`   | **Required** | The markdown content to render.                                          |
+| `markdownFontSize`         | `number`   | `16`         | Font size in points.                                                     |
+| `markdownColor`            | `string`   | `#000000`    | Text color (hex code).                                                   |
+| `markdownFontFamily`       | `string`   | `undefined`  | Font family name. Must be linked in your app.                            |
+| `markdownLinkColor`        | `string`   | `#007AFF`    | Color of links.                                                          |
+| `markdownSelectionColor`   | `string`   | `#ACCEF7`    | Background color for selected text.                                      |
+| `markdownSelectable`       | `boolean`  | `true`       | Enables/disables text selection.                                         |
+| `markdownScrollEnabled`    | `boolean`  | `false`      | Enables/disables internal scrolling (useful for long content).           |
+| `markdownLineSpacing`      | `number`   | `0`          | Extra spacing between lines.                                             |
+| `markdownParagraphSpacing` | `number`   | `0`          | Spacing between paragraphs.                                              |
+| `onNativeSizeChange`       | `function` | `undefined`  | Callback when content size changes `{ nativeEvent: { width, height } }`. |
+
+### List Styling
+
+| Prop                        | Type     | Default | Description                      |
+| --------------------------- | -------- | ------- | -------------------------------- |
+| `markdownBulletIndent`      | `number` | `20`    | Indentation for bullet points.   |
+| `markdownListLeftInset`     | `number` | `10`    | Left margin for the entire list. |
+| `markdownListSpacingBefore` | `number` | `0`     | Spacing before a list block.     |
+| `markdownListSpacingAfter`  | `number` | `0`     | Spacing after a list block.      |
+
+## Platform Differences
+
+### iOS
+
+- Uses `UITextView` with `try AttributedString(markdown: options:)`.
+- Requires iOS 15+.
+- Supports native data detectors (links, phone numbers, etc).
+
+### Android
+
+- Uses `TextView` with `Markwon` library.
+- Supports smart touch handling for seamless integration with `FlatList` and `ScrollView`.
+- **Note**: When using inside a `FlatList`, ensure `removeClippedSubviews={false}` is set on the FlatList to allow the selection context menu to appear correctly.
+
+## Troubleshooting
+
+### Text Selection in FlatList (Android)
+
+If you are using `MarkdownView` inside a `FlatList` on Android, the text selection context menu might not appear if `removeClippedSubviews` is true.
+
+**Fix:**
+
+```tsx
+<FlatList
+  removeClippedSubviews={false} // REQUIRED for Android selection menu
+  nestedScrollEnabled={true}
+  // ... other props
+/>
+```
+
+### Autolinking Issues
+
+If the native module is not found:
+
+1. Ensure `react-native.config.js` exists in the module root.
+2. Run `npx react-native config` to verify the module is detected.
+3. Clean build: `cd android && ./gradlew clean`.

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Thu Mar 19 13:26:55 ICT 2026
+gradle.version=8.9

package/android/build.gradle

@@ -0,0 +1,36 @@
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:7.3.1'
+    }
+}
+
+apply plugin: 'com.android.library'
+
+android {
+    namespace 'com.markdownnative'
+    compileSdkVersion 33
+
+    defaultConfig {
+        minSdkVersion 21
+        targetSdkVersion 33
+    }
+
+    lintOptions {
+        abortOnError false
+    }
+}
+
+repositories {
+    mavenCentral()
+    google()
+}
+
+dependencies {
+    implementation 'com.facebook.react:react-native:+'
+    implementation 'io.noties.markwon:core:4.6.2'
+    implementation 'io.noties.markwon:html:4.6.2'
+}

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/markdownnative/MarkdownPackage.java

@@ -0,0 +1,25 @@
+package com.markdownnative;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class MarkdownPackage implements ReactPackage {
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        List<ViewManager> viewManagers = new ArrayList<>();
+        viewManagers.add(new MarkdownViewManager());
+        return viewManagers;
+    }
+
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}