facebook · s77rt · Jul 13, 2024 · Jul 15, 2024 · Jul 18, 2024 · Jul 21, 2024
diff --git a/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js
@@ -455,6 +455,11 @@ export type NativeProps = $ReadOnly<{|
     |}>,
   >,
 
+  /**
+   * Callback that is called when the clipboard content is pasted.
+   */
+  onPaste?: ?DirectEventHandler<$ReadOnly<{|target: Int32|}>>,
+
   /**
    * The string that will be rendered before text input has been entered.
    */
@@ -658,6 +663,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     topScroll: {
       registrationName: 'onScroll',
     },
+    topPaste: {
+      registrationName: 'onPaste',
+    },
   },
   validAttributes: {
     maxFontSizeMultiplier: true,
@@ -712,6 +720,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     textBreakStrategy: true,
     onScroll: true,
     onContentSizeChange: true,
+    onPaste: true,
     disableFullscreenUI: true,
     includeFontPadding: true,
     fontWeight: true,

diff --git a/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js b/packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js
@@ -85,6 +85,9 @@ const RCTTextInputViewConfig = {
     topContentSizeChange: {
       registrationName: 'onContentSizeChange',
     },
+    topPaste: {
+      registrationName: 'onPaste',
+    },
   },
   validAttributes: {
     fontSize: true,
@@ -150,6 +153,7 @@ const RCTTextInputViewConfig = {
       onSelectionChange: true,
       onContentSizeChange: true,
       onScroll: true,
+      onPaste: true,
     }),
   },
 };

diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts
@@ -801,6 +801,11 @@ export interface TextInputProps
     | ((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void)
     | undefined;
 
+  /**
+   * Callback that is called when the clipboard content is pasted.
+   */
+  onPaste?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
+
   /**
    * The string that will be rendered before text input has been entered
    */

diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js
@@ -812,6 +812,11 @@ export type Props = $ReadOnly<{|
    */
   onScroll?: ?(e: ScrollEvent) => mixed,
 
+  /**
+   * Callback that is called when the clipboard content is pasted.
+   */
+  onPaste?: ?(e: TargetEvent) => mixed,
+
   /**
    * The string that will be rendered before text input has been entered.
    */

diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js
@@ -811,6 +811,11 @@ export type Props = $ReadOnly<{|
    */
   onScroll?: ?(e: ScrollEvent) => mixed,
 
+  /**
+   * Callback that is called when the clipboard content is pasted.
+   */
+  onPaste?: ?(e: TargetEvent) => mixed,
+
   /**
    * The string that will be rendered before text input has been entered.
    */

diff --git a/packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm b/packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm
@@ -173,6 +173,7 @@ - (void)paste:(id)sender
 {
   _textWasPasted = YES;
   [super paste:sender];
+  [_textInputDelegateAdapter didPaste];
 }
 
 // Turn off scroll animation to fix flaky scrolling.

diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h
@@ -36,6 +36,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)textInputDidChange;
 
 - (void)textInputDidChangeSelection;
+- (void)textInputDidPaste;
 
 @optional
 

diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.h b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.h
@@ -20,6 +20,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 - (void)skipNextTextInputDidChangeSelectionEventWithTextRange:(UITextRange *)textRange;
 - (void)selectedTextRangeWasSet;
+- (void)didPaste;
 
 @end
 
@@ -30,6 +31,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (instancetype)initWithTextView:(UITextView<RCTBackedTextInputViewProtocol> *)backedTextInputView;
 
 - (void)skipNextTextInputDidChangeSelectionEventWithTextRange:(UITextRange *)textRange;
+- (void)didPaste;
 
 @end
 

diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
@@ -147,6 +147,11 @@ - (void)selectedTextRangeWasSet
   [self textFieldProbablyDidChangeSelection];
 }
 
+- (void)didPaste
+{
+  [_backedTextInputView.textInputDelegate textInputDidPaste];
+}
+
 #pragma mark - Generalization
 
 - (void)textFieldProbablyDidChangeSelection
@@ -292,6 +297,11 @@ - (void)skipNextTextInputDidChangeSelectionEventWithTextRange:(UITextRange *)tex
   _previousSelectedTextRange = textRange;
 }
 
+- (void)didPaste
+{
+  [_backedTextInputView.textInputDelegate textInputDidPaste];
+}
+
 #pragma mark - Generalization
 
 - (void)textViewProbablyDidChangeSelection

diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.h b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.h
@@ -37,6 +37,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onChange;
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onChangeSync;
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onScroll;
+@property (nonatomic, copy, nullable) RCTDirectEventBlock onPaste;
 
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
 @property (nonatomic, assign, readonly) NSInteger nativeEventCount;

diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
@@ -543,6 +543,14 @@ - (void)textInputDidChangeSelection
   });
 }
 
+- (void)textInputDidPaste
+{
+  if (!_onPaste) {
+    return;
+  }
+  _onPaste(@{@"target" : self.reactTag});
+}
+
 - (void)updateLocalData
 {
   [self enforceTextAttributesIfNeeded];

diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputViewManager.mm b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputViewManager.mm
@@ -65,6 +65,7 @@ @implementation RCTBaseTextInputViewManager {
 RCT_EXPORT_VIEW_PROPERTY(onChangeSync, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onSelectionChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPaste, RCTDirectEventBlock)
 
 RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
 

diff --git a/packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm b/packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm
@@ -223,6 +223,7 @@ - (void)paste:(id)sender
 {
   _textWasPasted = YES;
   [super paste:sender];
+  [_textInputDelegateAdapter didPaste];
 }
 
 #pragma mark - Layout

diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -2324,6 +2324,7 @@ export type NativeProps = $ReadOnly<{|
       |}>,
     |}>,
   >,
+  onPaste?: ?DirectEventHandler<$ReadOnly<{| target: Int32 |}>>,
   placeholder?: ?Stringish,
   placeholderTextColor?: ?ColorValue,
   secureTextEntry?: ?boolean,
@@ -2711,6 +2712,7 @@ export type Props = $ReadOnly<{|
   onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
   onSubmitEditing?: ?(e: EditingEvent) => mixed,
   onScroll?: ?(e: ScrollEvent) => mixed,
+  onPaste?: ?(e: TargetEvent) => mixed,
   placeholder?: ?Stringish,
   placeholderTextColor?: ?ColorValue,
   readOnly?: ?boolean,
@@ -3050,6 +3052,7 @@ export type Props = $ReadOnly<{|
   onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
   onSubmitEditing?: ?(e: EditingEvent) => mixed,
   onScroll?: ?(e: ScrollEvent) => mixed,
+  onPaste?: ?(e: TargetEvent) => mixed,
   placeholder?: ?Stringish,
   placeholderTextColor?: ?ColorValue,
   readOnly?: ?boolean,

diff --git a/.../react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/.../react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
@@ -404,6 +404,13 @@ - (void)textInputDidChangeSelection
   }
 }
 
+- (void)textInputDidPaste
+{
+  if (_eventEmitter) {
+    static_cast<const TextInputEventEmitter &>(*_eventEmitter).onPaste();
+  }
+}
+
 #pragma mark - RCTBackedTextInputDelegate (UIScrollViewDelegate)
 
 - (void)scrollViewDidScroll:(UIScrollView *)scrollView

diff --git a/...ct-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/PasteWatcher.java b/...ct-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/PasteWatcher.java
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.textinput;
+
+/**
+ * Implement this interface to be informed of paste event in the
+ * ReactTextEdit This is used by the ReactTextInputManager to forward events
+ * from the EditText to JS
+ */
+interface PasteWatcher {
+  public void onPaste();
+}
diff --git a/...t-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/...t-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
@@ -109,6 +109,7 @@ public class ReactEditText extends AppCompatEditText {
   private @Nullable SelectionWatcher mSelectionWatcher;
   private @Nullable ContentSizeWatcher mContentSizeWatcher;
   private @Nullable ScrollWatcher mScrollWatcher;
+  private @Nullable PasteWatcher mPasteWatcher;
   private InternalKeyListener mKeyListener;
   private boolean mDetectScrollMovement = false;
   private boolean mOnKeyPress = false;
@@ -154,6 +155,7 @@ public ReactEditText(Context context) {
       mKeyListener = new InternalKeyListener();
     }
     mScrollWatcher = null;
+    mPasteWatcher = null;
     mTextAttributes = new TextAttributes();
 
     applyTextAttributes();
@@ -321,8 +323,13 @@ public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
    */
   @Override
   public boolean onTextContextMenuItem(int id) {
-    if (id == android.R.id.paste) {
+    if (id == android.R.id.paste || id == android.R.id.pasteAsPlainText) {
       id = android.R.id.pasteAsPlainText;
+      boolean actionPerformed = super.onTextContextMenuItem(id);
+      if (mPasteWatcher != null) {
+        mPasteWatcher.onPaste();
+      }
+      return actionPerformed;
     }
     return super.onTextContextMenuItem(id);
   }
@@ -384,6 +391,10 @@ public void setScrollWatcher(@Nullable ScrollWatcher scrollWatcher) {
     mScrollWatcher = scrollWatcher;
   }
 
+  public void setPasteWatcher(@Nullable PasteWatcher pasteWatcher) {
+    mPasteWatcher = pasteWatcher;
+  }
+
   /**
    * Attempt to set a selection or fail silently. Intentionally meant to handle bad inputs.
    * EventCounter is the same one used as with text.

diff --git a/.../ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/.../ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
@@ -260,6 +260,9 @@ public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
             .put(
                 ScrollEventType.getJSEventName(ScrollEventType.SCROLL),
                 MapBuilder.of("registrationName", "onScroll"))
+            .put(
+                "topPaste",
+                MapBuilder.of("registrationName", "onPaste"))
             .build());
     return eventTypeConstants;
   }
@@ -476,6 +479,15 @@ public void setOnScroll(final ReactEditText view, boolean onScroll) {
     }
   }
 
+  @ReactProp(name = "onPaste", defaultBoolean = false)
+  public void setOnPaste(final ReactEditText view, boolean onPaste) {
+    if (onPaste) {
+      view.setPasteWatcher(new ReactPasteWatcher(view));
+    } else {
+      view.setPasteWatcher(null);
+    }
+  }
+
   @ReactProp(name = "onKeyPress", defaultBoolean = false)
   public void setOnKeyPress(final ReactEditText view, boolean onKeyPress) {
     view.setOnKeyPress(onKeyPress);
@@ -1307,6 +1319,25 @@ public void onScrollChanged(int horiz, int vert, int oldHoriz, int oldVert) {
     }
   }
 
+  private static class ReactPasteWatcher implements PasteWatcher {
+    private final ReactEditText mReactEditText;
+    private final EventDispatcher mEventDispatcher;
+    private final int mSurfaceId;
+
+    public ReactPasteWatcher(ReactEditText editText) {
+      mReactEditText = editText;
+      ReactContext reactContext = getReactContext(editText);
+      mEventDispatcher = getEventDispatcher(reactContext, editText);
+      mSurfaceId = UIManagerHelper.getSurfaceId(reactContext);
+    }
+
+    @Override
+    public void onPaste() {
+      mEventDispatcher.dispatchEvent(
+          new ReactTextInputPasteEvent(mSurfaceId, mReactEditText.getId()));
+    }
+  }
+
   @Override
   public @Nullable Map<String, Object> getExportedViewConstants() {
     return MapBuilder.of(

diff --git a/...actAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputPasteEvent.java b/...actAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputPasteEvent.java
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.textinput;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.common.ViewUtil;
+import com.facebook.react.uimanager.events.Event;
+
+/**
+ * Event emitted by EditText native view when clipboard content is pasted
+ */
+class ReactTextInputPasteEvent extends Event<ReactTextInputPasteEvent> {
+
+  private static final String EVENT_NAME = "topPaste";
+
+  @Deprecated
+  public ReactTextInputPasteEvent(int viewId) {
+    this(ViewUtil.NO_SURFACE_ID, viewId);
+  }
+
+  public ReactTextInputPasteEvent(int surfaceId, int viewId) {
+    super(surfaceId, viewId);
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public boolean canCoalesce() {
+    return false;
+  }
+
+  @Nullable
+  @Override
+  protected WritableMap getEventData() {
+    WritableMap eventData = Arguments.createMap();
+    return eventData;
+  }
+}
diff --git a/...s/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.cpp b/...s/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.cpp
@@ -172,6 +172,10 @@ void TextInputEventEmitter::onScroll(const Metrics& textInputMetrics) const {
   });
 }
 
+void TextInputEventEmitter::onPaste() const {
+  dispatchEvent("onPaste");
+}
+
 void TextInputEventEmitter::dispatchTextInputEvent(
     const std::string& name,
     const Metrics& textInputMetrics) const {

diff --git a/...nts/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.h b/...nts/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.h
@@ -43,6 +43,7 @@ class TextInputEventEmitter : public ViewEventEmitter {
   void onSubmitEditing(const Metrics& textInputMetrics) const;
   void onKeyPress(const KeyPressMetrics& keyPressMetrics) const;
   void onScroll(const Metrics& textInputMetrics) const;
+  void onPaste() const;
 
  private:
   void dispatchTextInputEvent(