Skip to content

feat(fabric): Implement Drag and Drop on View - #2713

Merged
Saad Najmi (Saadnajmi) merged 24 commits into
microsoft:mainfrom
Saadnajmi:drag-drop
Oct 7, 2025
Merged

feat(fabric): Implement Drag and Drop on View#2713
Saad Najmi (Saadnajmi) merged 24 commits into
microsoft:mainfrom
Saadnajmi:drag-drop

Conversation

@Saadnajmi

@SaadnajmiSaad Najmi (Saadnajmi) commented Oct 1, 2025

Copy link
Copy Markdown
Collaborator

Summary:

Cherry pick more commits from #2117 to implement Drag and Drop Support on View.

Test Plan:

Moved the TextInput example (which doesn't work on Fabric yet) to a new page, and added a View example (which does work on Fabric)

Screen.Recording.2025-10-03.at.4.39.11.PM.mov

Summary: Add support for `draggedTypes` to the View component, enabling the configuration of a native view as a drop target.
Test Plan:
* Run Zeratul with Fabric enabled
* Drag a file over the messages view and check that the cursor is changing indicating a drop target
https://pxl.cl/4ldkW
Reviewers: shawndempsey, #rn-desktop
Reviewed By: shawndempsey
Subscribers: taskcreeper
Differential Revision: https://phabricator.intern.facebook.com/D53674739
Nick Lefever added 2 commits October 1, 2025 15:25
Summary: Add the drag and drop event emitters to View with the payload conversion matching the Paper API for dragEnter/dragLeave/drop events.
Test Plan: Tested later in this stack.
Reviewers: shawndempsey, #rn-desktop
Reviewed By: shawndempsey
Differential Revision: https://phabricator.intern.facebook.com/D53674738
Summary: Add support for drag and drop to the `ViewComponent` for files and images. The implementation converts the dropped pasteboard items the same way as in Paper. The `DataTransferItem` resulting from the pasteboard conversion of the dragged items is used to build the JS payload for the dragEnter/dragLeave/drop events.
Test Plan:
* Run Zeratul with Fabric enabled
* Drag and drop an image on the messages view
* Send the attachment
https://pxl.cl/4ldB7
Reviewers: shawndempsey, #rn-desktop
Reviewed By: shawndempsey
Differential Revision: https://phabricator.intern.facebook.com/D53674742
Comment threadpackages/rn-tester/js/examples/Pressable/PressableExample.js
@PPatBoyd

Copy link
Copy Markdown

fascinating -- would love to see a video and also a link to relevant docs for the current (core or community) API being supported here!

@Saadnajmi

Copy link
Copy Markdown
CollaboratorAuthor

fascinating -- would love to see a video and also a link to relevant docs for the current (core or community) API being supported here!

I can link the PR where it was implemented for paper.. we have a demo in RNTester

@SaadnajmiSaad Najmi (Saadnajmi) changed the title feat(fabric): Implement Drag and Drop on View and TextInputfeat(fabric): Implement Drag and Drop on ViewOct 3, 2025
@Saadnajmi
Saad Najmi (Saadnajmi) marked this pull request as ready for review October 4, 2025 01:22
Comment threadpackages/react-native/Libraries/Types/CoreEventTypes.d.ts
Comment threadpackages/react-native/Libraries/Types/CoreEventTypes.js Outdated
@Saadnajmi
Saad Najmi (Saadnajmi) enabled auto-merge (squash) October 7, 2025 08:07
@Saadnajmi
Saad Najmi (Saadnajmi) merged commit 8a41f83 into microsoft:mainOct 7, 2025
21 checks passed
@Saadnajmi
Saad Najmi (Saadnajmi) deleted the drag-drop branch October 7, 2025 08:07
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@Saadnajmi@PPatBoyd@tido64