expo-paste-input 0.1.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/README.md

@@ -0,0 +1,123 @@
+# TextInputWrapper
+
+A native Expo module for cross-platform paste event handling in React Native TextInput components.
+
+## Demo
+
+| iOS                                                                                             | Android                                                                                         |
+| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| <video src="https://github.com/user-attachments/assets/b54b15ac-5b98-4dc7-84d7-2e7d48e53e24" /> | <video src="https://github.com/user-attachments/assets/4d709a2c-2dca-431d-8972-05f01b7e5276" /> |
+
+## Overview
+
+This is **not a published npm package**. This is the exact production-ready module used inside a real app. If you want to use it, copy the `modules/text-input-wrapper` folder into your Expo project and run it.
+
+### What it does
+
+- Intercepts paste events on TextInput components
+- Handles pasted text and images consistently across iOS and Android
+- Supports pasting multiple images, including GIFs
+- Returns file URIs for pasted images that you can use directly
+
+### Paste event payload
+
+```typescript
+type PasteEventPayload =
+  | { type: "text"; value: string }
+  | { type: "images"; uris: string[] }
+  | { type: "unsupported" };
+```
+
+## How it works
+
+The module wraps a TextInput and intercepts paste events at the native level before they reach the default handler.
+
+### iOS
+
+On iOS, the module uses method swizzling to intercept `paste(_:)` on the underlying `UITextField`/`UITextView`. When a paste is detected:
+
+- For **images**: The paste is intercepted, images are extracted from `UIPasteboard`, saved to temp files, and URIs are sent to JavaScript. GIFs are preserved as-is.
+- For **text**: The original paste proceeds normally, and the pasted text is forwarded to JavaScript.
+
+The wrapper view is transparent and passes through all touch events to children.
+
+### Android
+
+On Android, the module uses `OnReceiveContentListener` (API 31+) and a custom `ActionMode.Callback` to intercept paste events from both keyboard and context menu:
+
+- For **images**: The paste is consumed before Android shows the "Can't add images" toast. Images are decoded, saved to cache, and URIs are sent to JavaScript.
+- For **text**: The original paste proceeds normally, and the pasted text is forwarded to JavaScript.
+
+The wrapper view is non-interactive and delegates all touch events to children.
+
+## Usage
+
+### 1. Copy the module
+
+Copy the `modules/text-input-wrapper` folder into your Expo project's `modules` directory.
+
+### 2. Run prebuild / pod install
+
+```bash
+# If using Expo prebuild
+npx expo prebuild
+
+# Or if you already have native projects
+cd ios && pod install
+```
+
+### 3. Import and use
+
+Wrap your TextInput with `TextInputWrapper` and handle the `onPaste` callback:
+
+```tsx
+import {
+  TextInputWrapper,
+  PasteEventPayload,
+} from "@/modules/text-input-wrapper";
+import { TextInput } from "react-native";
+
+function MyInput() {
+  const handlePaste = (payload: PasteEventPayload) => {
+    if (payload.type === "images") {
+      // payload.uris contains file:// URIs for each pasted image
+      console.log("Pasted images:", payload.uris);
+    } else if (payload.type === "text") {
+      // payload.value contains the pasted text
+      console.log("Pasted text:", payload.value);
+    }
+  };
+
+  return (
+    <TextInputWrapper onPaste={handlePaste}>
+      <TextInput placeholder="Paste here..." />
+    </TextInputWrapper>
+  );
+}
+```
+
+## Notes
+
+- This is **intentionally not packaged as a library**
+- It's meant to be copied, modified, and extended for your specific needs
+- The image URIs point to temporary files — move or copy them if you need persistence
+- Text paste events fire _after_ the text is inserted into the input
+- Image paste events _prevent_ the default paste (since TextInput can't display images)
+
+If you want to build a library on top of this, feel free. Please credit **Arunabh Verma** as inspiration.
+
+## Inspiration
+
+This project exists because of inspiration from:
+
+- **[Fernando Rojo](https://x.com/fernandorojo)** — Inspired by his blog post how paste input is implemented in the v0 app
+  - Blog + context: how native paste handling works in v0
+  - 𝕏: **[How we built the v0 iOS app](https://x.com/fernandorojo/status/1993098916456452464)**
+- **[v0](https://v0.dev)** — The real-world product discussed in Fernando Rojo’s writing
+
+Their work on pushing React Native closer to native platform conventions was the catalyst for building this.
+
+---
+
+Built by **Arunabh Verma**  
+Demo: [X post ↗](https://x.com/iamarunabh/status/1997738168247062774)

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

@@ -0,0 +1,2 @@
+#Mon Feb 02 16:33:27 IST 2026
+gradle.version=8.9

package/android/build.gradle

@@ -0,0 +1,43 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.pasteinput'
+version = '0.7.6'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 36)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 24)
+      targetSdkVersion safeExtGet("targetSdkVersion", 36)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.pasteinput"
+  defaultConfig {
+    versionCode 1
+    versionName "0.7.6"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/expo/modules/pasteinput/ExpoPasteInputModule.kt

@@ -0,0 +1,14 @@
+package expo.modules.pasteinput
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoPasteInputModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ExpoPasteInput")
+    
+    View(ExpoPasteInputView::class) {
+      Events("onPaste")
+    }
+  }
+}

package/android/src/main/java/expo/modules/pasteinput/ExpoPasteInputView.kt

@@ -0,0 +1,418 @@
+package expo.modules.pasteinput
+
+import android.content.ClipboardManager
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.net.Uri
+import android.os.Build
+import android.view.View
+import android.view.ViewGroup
+import android.view.ActionMode
+import android.widget.EditText
+import androidx.core.view.ContentInfoCompat
+import androidx.core.view.OnReceiveContentListener
+import androidx.core.view.ViewCompat
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+import java.io.File
+import java.io.FileOutputStream
+import java.io.InputStream
+import java.io.IOException
+
+class ExpoPasteInputView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  private val onPaste by EventDispatcher()
+  private var textInputView: EditText? = null
+  private var isMonitoring: Boolean = false
+  private var contentListener: OnReceiveContentListener? = null
+  private var originalActionModeCallback: ActionMode.Callback? = null
+  private var customActionModeCallback: ActionMode.Callback? = null
+  
+  init {
+    // Make view completely transparent and non-interactive - only monitor paste events
+    setBackgroundColor(android.graphics.Color.TRANSPARENT)
+    isClickable = false
+    isFocusable = false
+    isFocusableInTouchMode = false
+    isEnabled = true // Keep enabled so children can receive events
+    
+    // Enable monitoring when view is attached
+    addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
+      override fun onViewAttachedToWindow(v: View) {
+        startMonitoring()
+      }
+      
+      override fun onViewDetachedFromWindow(v: View) {
+        stopMonitoring()
+      }
+    })
+  }
+  
+  // Pass through all touch events to children - never intercept
+  override fun onInterceptTouchEvent(ev: android.view.MotionEvent?): Boolean {
+    return false
+  }
+  
+  override fun onTouchEvent(event: android.view.MotionEvent?): Boolean {
+    return false
+  }
+  
+  override fun dispatchTouchEvent(ev: android.view.MotionEvent?): Boolean {
+    return super.dispatchTouchEvent(ev)
+  }
+  
+  override fun onViewAdded(child: View?) {
+    super.onViewAdded(child)
+    // Re-scan for text input when a new child is added
+    if (!isMonitoring) {
+      startMonitoring()
+    } else {
+      // If already monitoring, check if the new child is a text input
+      val newTextInput = findTextInputInView(child)
+      if (newTextInput != null && newTextInput != textInputView) {
+        // Found a different text input, switch to it
+        stopMonitoring()
+        startMonitoring()
+      }
+    }
+  }
+  
+  private fun startMonitoring() {
+    if (isMonitoring) return
+    
+    // Find TextInput (EditText) in view hierarchy
+    val foundTextInput = findTextInputInView(this) as? EditText
+    
+    if (foundTextInput != null) {
+      textInputView = foundTextInput
+      isMonitoring = true
+      setupPasteHandling(foundTextInput)
+    }
+  }
+  
+  private fun stopMonitoring() {
+    if (!isMonitoring) return
+    
+    val editText = textInputView
+    if (editText != null) {
+      cleanupPasteHandling(editText)
+    }
+    
+    isMonitoring = false
+    textInputView = null
+    contentListener = null
+    originalActionModeCallback = null
+    customActionModeCallback = null
+  }
+  
+  private fun setupPasteHandling(editText: EditText) {
+    // Set up OnReceiveContentListener for Android 12+ (API 31+)
+    // This is the primary mechanism for handling image pastes
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+      contentListener = createContentListener()
+      ViewCompat.setOnReceiveContentListener(
+        editText,
+        arrayOf("image/*", "text/plain"),
+        contentListener!!
+      )
+    }
+    
+    // Intercept paste from context menu to prevent toast
+    enhanceOnTextContextMenuItem(editText)
+  }
+  
+  private fun cleanupPasteHandling(editText: EditText) {
+    // Remove OnReceiveContentListener
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S && contentListener != null) {
+      ViewCompat.setOnReceiveContentListener(editText, null, null)
+    }
+    
+    // Restore original ActionMode.Callback
+    if (customActionModeCallback != null) {
+      editText.customSelectionActionModeCallback = originalActionModeCallback
+    }
+  }
+  
+  private fun createContentListener(): OnReceiveContentListener {
+    return OnReceiveContentListener { view, payload ->
+      val clip = payload.clip
+      val itemCount = clip.itemCount
+      
+      if (itemCount == 0) {
+        return@OnReceiveContentListener payload
+      }
+      
+      // Collect images and GIFs separately
+      val imageUris = mutableListOf<Uri>()
+      val gifUris = mutableListOf<Uri>()
+      var textContent: String? = null
+      
+      // Process each item in the clip
+      for (i in 0 until itemCount) {
+        val item = clip.getItemAt(i)
+        
+        // Check for image URI
+        val uri = item.uri
+        if (uri != null) {
+          val mimeType = context.contentResolver.getType(uri)
+          if (mimeType != null && mimeType.startsWith("image/")) {
+            // Separate GIFs from regular images
+            if (mimeType == "image/gif") {
+              gifUris.add(uri)
+            } else {
+              imageUris.add(uri)
+            }
+          }
+        }
+        
+        // Check for text
+        val text = item.text
+        if (!text.isNullOrEmpty() && textContent == null) {
+          textContent = text.toString()
+        }
+      }
+      
+      // Handle GIFs and images (always as array, even for single item)
+      if (gifUris.isNotEmpty() || imageUris.isNotEmpty()) {
+        processMultipleImagePaste(imageUris, gifUris)
+        // Return null to completely consume the content and prevent default paste
+        // This prevents Android from showing the "Can't add images" toast
+        return@OnReceiveContentListener null
+      }
+      
+      // Handle text
+      if (textContent != null) {
+        handleTextPaste(textContent)
+        // Allow default text paste behavior
+        return@OnReceiveContentListener payload
+      }
+      
+      // Unsupported content type
+      handleUnsupportedPaste()
+      return@OnReceiveContentListener payload
+    }
+  }
+  
+  private fun enhanceOnTextContextMenuItem(editText: EditText) {
+    // Intercept paste from context menu to prevent toast
+    // This must happen BEFORE Android tries to paste, otherwise the toast appears
+    try {
+      // Store original callback if it exists
+      originalActionModeCallback = editText.customSelectionActionModeCallback
+      
+      // Set up a custom ActionMode.Callback to intercept paste from context menu
+      // This is the most reliable way to intercept paste before the toast appears
+      customActionModeCallback = object : ActionMode.Callback {
+        override fun onCreateActionMode(mode: ActionMode?, menu: android.view.Menu?): Boolean {
+          // Delegate to original callback if it exists
+          return originalActionModeCallback?.onCreateActionMode(mode, menu) ?: true
+        }
+        
+        override fun onPrepareActionMode(mode: ActionMode?, menu: android.view.Menu?): Boolean {
+          // Delegate to original callback if it exists
+          return originalActionModeCallback?.onPrepareActionMode(mode, menu) ?: false
+        }
+        
+        override fun onActionItemClicked(mode: ActionMode?, item: android.view.MenuItem?): Boolean {
+          if (item?.itemId == android.R.id.paste) {
+            // Intercept paste action
+            val clipboard = editText.context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+            val clipData = clipboard.primaryClip
+            
+            if (clipData != null && clipData.itemCount > 0) {
+              // Collect images and GIFs separately
+              val imageUris = mutableListOf<Uri>()
+              val gifUris = mutableListOf<Uri>()
+              var textContent: String? = null
+              
+              // Process all items in the clipboard
+              for (i in 0 until clipData.itemCount) {
+                val clipItem = clipData.getItemAt(i)
+                val uri = clipItem.uri
+                
+                // Check if it's an image
+                if (uri != null) {
+                  val mimeType = editText.context.contentResolver.getType(uri)
+                  if (mimeType != null && mimeType.startsWith("image/")) {
+                    // Separate GIFs from regular images
+                    if (mimeType == "image/gif") {
+                      gifUris.add(uri)
+                    } else {
+                      imageUris.add(uri)
+                    }
+                  }
+                }
+                
+                // Check for text (only take first text item)
+                if (textContent == null) {
+                  val text = clipItem.text
+                  if (!text.isNullOrEmpty()) {
+                    textContent = text.toString()
+                  }
+                }
+              }
+              
+              // Handle GIFs and images (always as array, even for single item)
+              if (gifUris.isNotEmpty() || imageUris.isNotEmpty()) {
+                processMultipleImagePaste(imageUris, gifUris)
+                mode?.finish()
+                return true // We handled it, prevent default paste
+              }
+              
+              // Check for text
+              if (textContent != null) {
+                // For text, let the normal paste logic run, then notify JS
+                var handled = false
+                
+                // 1) Let any existing callback handle it
+                if (originalActionModeCallback != null) {
+                  handled = originalActionModeCallback!!.onActionItemClicked(mode, item)
+                }
+                
+                // 2) If nothing handled it, fall back to EditText's default handler
+                if (!handled && item != null) {
+                  handled = editText.onTextContextMenuItem(item.itemId)
+                }
+                
+                if (handled) {
+                  handleTextPaste(textContent)
+                }
+                mode?.finish()
+                return handled
+              }
+            }
+          }
+          
+          // For other actions, delegate to original callback or return false
+          return originalActionModeCallback?.onActionItemClicked(mode, item) ?: false
+        }
+        
+        override fun onDestroyActionMode(mode: ActionMode?) {
+          // Delegate to original callback if it exists
+          originalActionModeCallback?.onDestroyActionMode(mode)
+        }
+      }
+      
+      editText.customSelectionActionModeCallback = customActionModeCallback
+      
+    } catch (e: Exception) {
+      // If ActionMode.Callback approach fails, we'll rely on OnReceiveContentListener
+      // which should still work but may show the toast briefly
+    }
+  }
+  
+  private fun findTextInputInView(view: View?): View? {
+    if (view == null) return null
+    
+    val className = view.javaClass.simpleName
+    if (className.contains("ReactTextInput") || 
+        className.contains("EditText") ||
+        view is EditText) {
+      return view
+    }
+    
+    if (view is ViewGroup) {
+      for (i in 0 until view.childCount) {
+        val child = view.getChildAt(i)
+        val found = findTextInputInView(child)
+        if (found != null) {
+          return found
+        }
+      }
+    }
+    
+    return null
+  }
+  
+  internal fun processMultipleImagePaste(imageUris: List<Uri>, gifUris: List<Uri> = emptyList()) {
+    try {
+      val filePaths = mutableListOf<String>()
+      
+      // Process GIFs first - copy them directly without decoding
+      for (gifUri in gifUris) {
+        val gifPath = copyGifFile(gifUri)
+        if (gifPath != null) {
+          filePaths.add(gifPath)
+        }
+      }
+      
+      // Process regular images - decode and compress
+      for (uri in imageUris) {
+        val inputStream = context.contentResolver.openInputStream(uri) ?: continue
+        
+        // Use try-with-resources equivalent (use block) to ensure stream is closed
+        inputStream.use { stream ->
+          val bitmap = BitmapFactory.decodeStream(stream)
+          
+          if (bitmap == null) {
+            return@use // Skip this image if we can't decode it
+          }
+          
+          // Save to cache directory
+          val cacheDir = context.cacheDir
+          // Use UUID-like approach for better uniqueness: timestamp + counter
+          val fileName = "${System.currentTimeMillis()}_${filePaths.size}.jpg"
+          val file = File(cacheDir, fileName)
+          
+          FileOutputStream(file).use { outputStream ->
+            bitmap.compress(Bitmap.CompressFormat.JPEG, 80, outputStream)
+            outputStream.flush()
+          }
+          
+          val filePath = "file://${file.absolutePath}"
+          filePaths.add(filePath)
+        }
+      }
+      
+      if (filePaths.isEmpty()) {
+        handleUnsupportedPaste()
+        return
+      }
+      
+      // Always use images format with array, even for single image
+      onPaste(mapOf(
+        "type" to "images",
+        "uris" to filePaths
+      ))
+    } catch (e: Exception) {
+      handleUnsupportedPaste()
+    }
+  }
+  
+  private fun copyGifFile(uri: Uri): String? {
+    return try {
+      val inputStream = context.contentResolver.openInputStream(uri) ?: return null
+      
+      // Save to cache directory
+      val cacheDir = context.cacheDir
+      // Use timestamp + counter for better uniqueness instead of random
+      val fileName = "${System.currentTimeMillis()}_${System.nanoTime()}.gif"
+      val file = File(cacheDir, fileName)
+      
+      inputStream.use { input ->
+        FileOutputStream(file).use { output ->
+          input.copyTo(output)
+          output.flush()
+        }
+      }
+      
+      "file://${file.absolutePath}"
+    } catch (e: Exception) {
+      null
+    }
+  }
+  
+  private fun handleTextPaste(text: String) {
+    onPaste(mapOf(
+      "type" to "text",
+      "value" to text
+    ))
+  }
+  
+  private fun handleUnsupportedPaste() {
+    onPaste(mapOf(
+      "type" to "unsupported"
+    ))
+  }
+}

package/build/TextInputWrapper.types.d.ts

@@ -0,0 +1,22 @@
+import type { ViewProps } from "react-native";
+export type PasteEventPayload = {
+    type: "text";
+    value: string;
+} | {
+    type: "images";
+    uris: string[];
+} | {
+    type: "unsupported";
+};
+export interface TextInputWrapperViewProps extends ViewProps {
+    /**
+     * Callback fired when a paste event is detected.
+     * @param payload - The paste event payload containing type and content
+     */
+    onPaste?: (payload: PasteEventPayload) => void;
+    /**
+     * Child components to wrap. Typically a TextInput component.
+     */
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=TextInputWrapper.types.d.ts.map

package/build/TextInputWrapper.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputWrapper.types.d.ts","sourceRoot":"","sources":["../src/TextInputWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GACzB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AAE5B,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/build/TextInputWrapper.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextInputWrapper.types.js.map

package/build/TextInputWrapper.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputWrapper.types.js","sourceRoot":"","sources":["../src/TextInputWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nexport type PasteEventPayload =\n  | { type: \"text\"; value: string }\n  | { type: \"images\"; uris: string[] }\n  | { type: \"unsupported\" };\n\nexport interface TextInputWrapperViewProps extends ViewProps {\n  /**\n   * Callback fired when a paste event is detected.\n   * @param payload - The paste event payload containing type and content\n   */\n  onPaste?: (payload: PasteEventPayload) => void;\n\n  /**\n   * Child components to wrap. Typically a TextInput component.\n   */\n  children?: React.ReactNode;\n}\n"]}

package/build/TextInputWrapperView.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { View } from "react-native";
+import type { TextInputWrapperViewProps } from "./TextInputWrapper.types";
+export declare const TextInputWrapperView: React.ForwardRefExoticComponent<TextInputWrapperViewProps & React.RefAttributes<View>>;
+//# sourceMappingURL=TextInputWrapperView.d.ts.map

package/build/TextInputWrapperView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputWrapperView.d.ts","sourceRoot":"","sources":["../src/TextInputWrapperView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAEV,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAIlC,eAAO,MAAM,oBAAoB,wFAqB/B,CAAC"}