WebView intercepts drop events

[thespacemanatee]

Repro: https://github.com/thespacemanatee/expo-dnd-webview-repro

Thank you for this wonderful library!

I'm trying to wrap DragDropContentView around a react-native-webview WebView component. The WebView intercepts the drop events and the DragDropContentView is unable to handle them. The WebView on Android doesn't seem to do this. Are there any workarounds available?

Here is my code:

<DragDropContentView
    onDrop={(event) => {
      alert(`onDrop: ${event.assets[0].uri}`)
    }}
    style={tw('rounded-t-2.5xl flex-1 overflow-hidden')}>
    <WebView style={tw('flex-1')} />
</DragDropContentView>

[AlirezaHadjar]

Hey @thespacemanatee 👋 I will check this out next week. But in the mean time it would be very helpful if you could provide a repo that reproduces the issue.

[thespacemanatee]

@AlirezaHadjar thank you for the reply! I've just created a very minimal repro here: https://github.com/thespacemanatee/expo-dnd-webview-repro I also just found out that in this repro, the drag and drop event is also intercepted by the WebView on Android :/

[thespacemanatee]

@AlirezaHadjar Update: if I position DragDropContentView absolutely over the WebView and set pointerEvents="none", then it works on Android only. I think that was my initial workaround.

[AlirezaHadjar]

Hey @thespacemanatee sorry for the long delay. Lately, I found some time to look into this issue and TBH since the WebView source code is written in Obj-C I couldn't figure out what the problem is.

As a workaround, if you just want to display the webview and not interact with it, you can display the DragDropView on top of it.

import { DragDropContentView } from "expo-drag-drop-content-view";
import { SafeAreaView, StyleSheet } from "react-native";
import WebView from "react-native-webview";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <DragDropContentView
        onDrop={(event) => {
          alert(`Dropped ${event.assets.length} items`);
        }}
        style={styles.dragDropContentView}
      />
      <WebView
        source={{ uri: "https://www.dragdrop.com/test/" }}
        style={styles.webView}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  dragDropContentView: {
    position: "absolute",
    width: "100%",
    height: "100%",
    zIndex: 1,
  },
  webView: { position: "absolute", width: "100%", height: "100%" },
});

[thespacemanatee]

@AlirezaHadjar thank you for digging into this issue! Unfortunately we do want the interactions with the WebView and I've already tried this solution which runs into the problem you mentioned. Let's keep this open in case we find any workarounds!