Add onPaste to TextInput

[s77rt]

Summary:

Detect Paste event. In our use case this is needed to unlock the possibility to support image pasting.

Changelog:

[GENERAL] [ADDED] - Add onPaste prop to TextInput component

Test Plan:

1. Open RNTester
2. Go to TextInput > Event handling
3. Paste clipboard content
4. Verify onPaste is logged before onChange
5. Go to TextInput > Pasteboard
6. Paste clipboard content
7. Verify the clipboard content is displayed

iOS	Android
Screen.Recording.2024-07-13.at.7.08.40.PM.mov	Screen.Recording.2024-07-21.at.3.40.31.PM.mov
Screen.Recording.2024-07-25.at.6.16.22.PM.mov	Screen.Recording.2024-07-25.at.6.28.29.PM.mov

[s77rt]

PR for docs update: facebook/react-native-website#4161

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	21,367,709	+12,853
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	24,564,442	+14,451
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: fcd526d
Branch: main

[cipolleschi]

Hi @s77rt, thanks for this contributions.

I see that there are some failures in CI for the JS side. This is happening because there is a new method in the spec and this is changing the public API of the component. We have a check that warn us about API changes.

In this case is a safe change, but can you update the test case? The failure is here.

Also, to set expectation, this kind of changes, that touches at the same time JS and native code, can take a little more to be merged and we might have to split the JS part from the Native part to land them properly.

[s77rt]

@cipolleschi Updated! Thanks!

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[cipolleschi]

Hi @s77rt, we were evaluating the PR internally and we figured a couple of things:

1. This change is for the Old Architecture only. Would it be possible to implement it for the New Architecture also?
2. This is a new feature that was missing from React Native. Being a new feature, the right approach would have been to first open a proposal in this repo and then, after the suggestions/questions from the core team and other main partners, work on the PR. Would it be possible for you to sketch a proposal as a PR in that repo?

Thank you so much for your patience.

[s77rt]

@cipolleschi Thanks for your quick actions on this.

Would it be possible to implement it for the New Architecture also?

The new arch is already supported and tested with RNTester. Can you please elaborate if I'm missing something here?

Would it be possible for you to sketch a proposal as a PR in that repo?

Sure! react-native-community/discussions-and-proposals#804

[s77rt]

Making this a draft until we land on an approved proposal react-native-community/discussions-and-proposals#804

[huhuanming]

will there be any new progress? 😳

[s77rt]

@huhuanming Code-wise this is ready. You can port this as a patch for your needs. Feedback is much appreciated. For now this is still marked as draft because there is no approval on the proposal yet (and code could change)

[s77rt]

Replace with RCTTempFilePath

[s77rt]

Same ^

[magrinj]

Hey @s77rt,

Thanks a lot for your work !
I've patched react-native based on your work.
On iOS I need it to work for copy-pasting files too so I've edited the code to make it work with files and it's working good.
But I've issues with android, pasting is not working at all, nothing happens, even putting a log at top of onTextContextMenuItem is never called.
Also on android it seems that in the keyboard we can directly access the clipboard history and click on a pictures, when I try that way it says the app can't handle pasting images.
Any input or suggestions ?

[s77rt]

@magrinj

But I've issues with android, pasting is not working at all, nothing happens, even putting a log at top of onTextContextMenuItem is never called.

You are very likely using a precompiled artifact. You'd have to build react-native from source.

Also on android it seems that in the keyboard we can directly access the clipboard history and click on a pictures, when I try that way it says the app can't handle pasting images.

Ah I think I missed that, it's probably something to raise on react-native-community/discussions-and-proposals#804. BTW This is also missing the paste event from the keyboard suggestion list, check unresolved questions.

[magrinj]

Hey @s77rt, you're absolutely right! Since we're in an Expo app, we'll keep the feature Android-only for now and wait for your PR to be merged 🙂

In case you'd like to include iOS file pasting support in your PR, I’ve added some code to enable file pasting on iOS alongside image pasting.
It’s been a while since I last touched Objective-C, so apologies in advance if it's a bit rough — I did get some help from ChatGPT to piece it together haha.

I created a small utility class to handle it:

RCTPasterHandlerUtil.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface RCTPasteHandlerUtil : NSObject

/**
 Process the UIPasteboard and returns an array of info dictionaries for pasted items.
 
 Each dictionary contains:
  - fileName: (NSString) the temporary file name.
  - fileSize: (NSNumber) length of the file data.
  - type: (NSString) the MIME type.
  - uri: (NSString) the temporary file’s URI.
 
 This method will process both images and non‑image files.
 
 @param pasteboard The UIPasteboard instance to process.
 @return An array of info dictionaries.
 */
+ (NSArray<NSDictionary *> *)itemInfosFromPasteboard:(UIPasteboard *)pasteboard;
/**
 Checks if the provided pasteboard has pasteable content.
 
 @param pasteboard The UIPasteboard instance to check.
 @return YES if there is content that can be pasted, NO otherwise.
 */
+ (BOOL)hasPasteableContent:(UIPasteboard *)pasteboard;

@end

NS_ASSUME_NONNULL_END

RCTPasterHandlerUtil.mm

#import "RCTPasteHandlerUtil.h"
#import <MobileCoreServices/MobileCoreServices.h>
#import <UniformTypeIdentifiers/UniformTypeIdentifiers.h>

@implementation RCTPasteHandlerUtil

+ (NSArray<NSDictionary *> *)itemInfosFromPasteboard:(UIPasteboard *)pasteboard {
  NSMutableArray<NSDictionary *> *itemInfos = [NSMutableArray array];
  NSArray<NSDictionary *> *items = pasteboard.items;
  // Generic UTIs to ignore if a more specific UTI is available.
  NSArray<NSString *> *genericUTIs = @[@"public.data", @"public.item"];
  
  for (NSDictionary *item in items) {
    // Pick a UTI: try to choose one that isn't generic.
    NSString *selectedUTI = nil;
    for (NSString *uti in item.allKeys) {
      if (![genericUTIs containsObject:uti]) {
        selectedUTI = uti;
        break;
      }
    }
    if (!selectedUTI) {
      selectedUTI = item.allKeys.firstObject;
    }
    
    @try {
      NSData *fileData = nil;
      id value = item[selectedUTI];
      // If the value is NSData, use it directly.
      if ([value isKindOfClass:[NSData class]]) {
        fileData = value;
      }
      // If it's a UIImage, convert it to data.
      else if ([value isKindOfClass:[UIImage class]]) {
        UIImage *image = (UIImage *)value;
        // Choose PNG or JPEG based on UTI if possible.
        if (@available(iOS 14.0, *)) {
          UTType *utType = [UTType typeWithIdentifier:selectedUTI];
          if (utType && [utType conformsToType:UTTypePNG]) {
            fileData = UIImagePNGRepresentation(image);
          } else {
            fileData = UIImageJPEGRepresentation(image, 1.0);
          }
        } else {
          // Fallback: check the UTI string.
          if (UTTypeConformsTo((__bridge CFStringRef)selectedUTI, kUTTypePNG)) {
            fileData = UIImagePNGRepresentation(image);
          } else {
            fileData = UIImageJPEGRepresentation(image, 1.0);
          }
        }
      }
      // If the value is an NSString, try to retrieve NSData from the pasteboard.
      else if ([value isKindOfClass:[NSString class]]) {
        fileData = [pasteboard dataForPasteboardType:selectedUTI];
      }
      // If we couldn't extract data, skip.
      if (!fileData) {
        continue;
      }
      
      // Determine MIME type and extension.
      NSString *mimeType = @"application/octet-stream";
      NSString *extension = @"bin";
      
      if (@available(iOS 14.0, *)) {
        UTType *utType = [UTType typeWithIdentifier:selectedUTI];
        if (utType) {
          mimeType = utType.preferredMIMEType ?: mimeType;
          extension = utType.preferredFilenameExtension ?: extension;
        }
      } else {
        CFStringRef utiRef = (__bridge CFStringRef)selectedUTI;
        CFStringRef mimeTypeRef = UTTypeCopyPreferredTagWithClass(utiRef, kUTTagClassMIMEType);
        mimeType = mimeTypeRef ? [NSString stringWithString:(__bridge_transfer NSString *)mimeTypeRef] : mimeType;
        
        CFStringRef extRef = UTTypeCopyPreferredTagWithClass(utiRef, kUTTagClassFilenameExtension);
        extension = extRef ? [NSString stringWithString:(__bridge_transfer NSString *)extRef] : extension;
      }
      if (extension.length == 0) {
        extension = @"bin";
      }
      
      // Create a unique file name and write the data to a temporary file.
      NSString *fileName = [NSString stringWithFormat:@"%@.%@", [[NSUUID UUID] UUIDString], extension];
      NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:fileName];
      NSURL *fileURL = [NSURL fileURLWithPath:filePath];
      BOOL success = [fileData writeToURL:fileURL atomically:YES];
      if (success) {
        NSDictionary *info = @{
          @"fileName": fileName,
          @"fileSize": @(fileData.length),
          @"type": mimeType,
          @"uri": fileURL.absoluteString
        };
        [itemInfos addObject:info];
      }
    } @catch (NSException *exception) {
      NSDictionary *errorInfo = @{@"type": selectedUTI, @"error": exception.reason ?: @""};
      [itemInfos addObject:errorInfo];
    }
  }
  
  return itemInfos;
}

+ (BOOL)hasPasteableContent:(UIPasteboard *)pasteboard {
  if (pasteboard.hasStrings || pasteboard.hasImages) {
    return YES;
  }

  NSArray<NSDictionary *> *infos = [self itemInfosFromPasteboard:pasteboard];
  return infos.count > 0;
}

@end

And then in RCTUITextView.mm and RCTUITextField.mm we can do:

- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
  if (action == @selector(paste:)) {
    return [RCTPasteHandlerUtil hasPasteableContent:[UIPasteboard generalPasteboard]];
  }
  return [super canPerformAction:action withSender:sender];
}

- (void)paste:(id)sender {
  if (clipboard.hasStrings) {
    [_textInputDelegateAdapter didPaste:@"text/plain" withData:clipboard.string];
    _textWasPasted = YES;
  } else {
    UIPasteboard *clipboard = [UIPasteboard generalPasteboard];
    NSArray<NSDictionary *> *infos = [RCTPasteHandlerUtil itemInfosFromPasteboard:clipboard];
    if (infos.count > 0) {
      for (NSDictionary *info in infos) {
        NSString *mime = info[@"type"];
        NSString *uri = info[@"uri"];
        [_textInputDelegateAdapter didPaste:mime withData:uri];
      }
      [self resignFirstResponder];
      return;
    }
  }
  [super paste:sender];
}