[Bug]: Event propagation not stopped despite using event.stopPropagation() in TouchableOpacity within MarkerView and MapView

[Nachox07]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

10.0.4

Standalone component to reproduce

import { Camera, MapView, MarkerView } from '@rnmapbox/maps';
import React from 'react';
import { TouchableOpacity } from 'react-native';

class BugReportExample extends React.Component {
  handleMarkerPress = e => {
    console.log('Marker pressed');
    e.stopPropagation();
    e.preventDefault();
  };

  handleMarkerLongPress = e => {
    console.log('Marker long pressed');
    e.stopPropagation();
    e.preventDefault();
  };

  handleMapPress = () => {
    console.log('Map pressed');
  };

  handleMapLongPress = () => {
    console.log('Map long pressed');
  };

  render() {
    return (
      <MapView style={{ flex: 1 }} onLongPress={this.handleMapLongPress}>
        <Camera
          centerCoordinate={[-74.00597, 40.71427]}
          zoomLevel={14}
          animationDuration={0}
        />
        <MarkerView id="marker" coordinate={[-74.00597, 40.71427]}>
          <TouchableOpacity
            onPress={this.handleMarkerPress}
            onLongPress={this.handleMarkerLongPress}
            style={{
              backgroundColor: 'red',
              width: 20,
              height: 20,
              borderRadius: 10,
            }}
          />
        </MarkerView>
      </MapView>
    );
  }
}

export default BugReportExample;

Observed behavior and steps to reproduce

When a MarkerView with a TouchableOpacity child is long-pressed within a MapView that also has an onLongPress event, both the onLongPress event of the TouchableOpacity and the onLongPress event of the MapView are triggered simultaneously, despite using event.stopPropagation() in the TouchableOpacity's onLongPress event handler. What would be the correct way to prevent this scenario? When I use onPress on both, it works as expected.

Expected behavior

The expected behavior is that only the onLongPress event of the TouchableOpacity should be triggered when the marker is long-pressed, preventing the onLongPress event of the MapView from being triggered.

Notes / preliminary analysis

Several approaches have been attempted to prevent the event from propagating to the parent, such as using event.stopPropagation(), event.preventDefault() and implementing custom event handling logic with View onTouchStart callback and the Pressable component from react-native. Still, none have successfully prevented the event's propagation to the parent MapView.

Additional links and references

No response

[mfazekas]

It's not really supported, MapView gesture handling is not fully part of rn gesture system. Closing as not planned for now.

[Nachox07]

It's not really supported, MapView gesture handling is not fully part of rn gesture system. Closing as not planned for now.

@mfazekas FYI, I tried the same using react-native-maps, and it worked there. But of course, I don't know exactly how it is implemented