Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Oct 7, 2025
Merged

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

Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
52f025e
[fabric] Add draggedTypes prop to View
Feb 12, 2024
7a4f466
[fabric] Add drag and drop event emitters to View
Feb 12, 2024
1055d4c
[fabric] Add drag and drop support to View component
Feb 12, 2024
5aff5ca
no longer optional
Saadnajmi Oct 1, 2025
4ff4c7f
take fix from meta/pristine
Saadnajmi Oct 1, 2025
4ac7e98
Add missing header
Saadnajmi Oct 1, 2025
e1ec4de
Update PressableExample
Saadnajmi Oct 1, 2025
f8e51b4
undo event emitter
Saadnajmi Oct 1, 2025
ebc4aea
redo event emitter
Saadnajmi Oct 1, 2025
2851aac
Update HostPlatformViewProps.cpp
Saadnajmi Oct 1, 2025
9a6095c
Apply suggestions from code review
Saadnajmi Oct 2, 2025
42dc769
Add a new drag and drop example
Saadnajmi Oct 3, 2025
3f45e98
Move example to top
Saadnajmi Oct 3, 2025
a6452f8
sendDragEvent -> emitDragEvent
Saadnajmi Oct 3, 2025
e10f5ca
nil check strings
Saadnajmi Oct 3, 2025
0f79940
Use cgImage
Saadnajmi Oct 3, 2025
c3afaf0
update js example
Saadnajmi Oct 3, 2025
d8ab0f4
Update types
Saadnajmi Oct 4, 2025
174c387
update example
Saadnajmi Oct 4, 2025
0957cc8
prettier fix
Saadnajmi Oct 4, 2025
1f887b6
fixup types
Saadnajmi Oct 6, 2025
23c38b1
use UTTypes
Saadnajmi Oct 6, 2025
71e0222
Merge branch 'main' into drag-drop
Saadnajmi Oct 6, 2025
dcbd439
missing endif
Saadnajmi Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update example
  • Loading branch information
@Saadnajmi
Saadnajmi committed Oct 4, 2025
commit 174c387fba58b28bebcc128d98dda94adbe9e0fc
14 changes: 10 additions & 4 deletions packages/rn-tester/js/examples/DragAndDrop/DragAndDropExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ function DragDropView(): React.Node {
onDrop={e => {
appendLog('onDrop');
setIsDraggingOver(false);
if (e.nativeEvent.dataTransfer.files && e.nativeEvent.dataTransfer.files[0]) {
const file = e.nativeEvent.dataTransfer.files[0];
const file = e.nativeEvent.dataTransfer?.files?.[0];
if (file) {
if (file.type.startsWith('image/')) {
appendLog('Dropped image file: ' + file.name);
} else {
Expand Down Expand Up @@ -164,7 +164,10 @@ function OnPaste(): React.Node {
style={styles.multiline}
onPaste={(e: PasteEvent) => {
appendLog(JSON.stringify(e.nativeEvent.dataTransfer.types));
setImageUri(e.nativeEvent.dataTransfer.files[0].uri);
const file = e.nativeEvent.dataTransfer?.files?.[0];
if (file) {
setImageUri(file.uri);
}
}}
pastedTypes={['string']}
placeholder="MULTI LINE with onPaste() text from clipboard"
Expand All @@ -174,7 +177,10 @@ function OnPaste(): React.Node {
style={styles.multiline}
onPaste={(e: PasteEvent) => {
appendLog(JSON.stringify(e.nativeEvent.dataTransfer.types));
setImageUri(e.nativeEvent.dataTransfer.files[0].uri);
const file = e.nativeEvent.dataTransfer?.files?.[0];
if (file) {
setImageUri(file.uri);
}
}}
pastedTypes={['fileUrl', 'image', 'string']}
placeholder="MULTI LINE with onPaste() for PNG/TIFF images from clipboard or fileUrl (via Finder) and text from clipboard"
Expand Down
Loading