[Bug]: LongPress on marker propagates to map LongPress

[Jzuni97]

Mapbox Implementation

Mapbox

Mapbox Version

11.0.0

Platform

iOS

@rnmapbox/maps version

10.1.8

Standalone component to reproduce

import React, { useMemo, useState } from "react";
import { Pressable, View } from "react-native";
import { Camera, MapView, MarkerView } from "@rnmapbox/maps";

const Map = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState(0);

  const markers = useMemo(
    () => [
      {
        id: 0,
        lat: 41.393042,
        lng: 2.1848,
      },
      {
        id: 1,
        lat: 41.393242,
        lng: 2.1853,
      },
      {
        id: 2,
        lat: 41.392747,
        lng: 2.185167,
      },
    ],
    [],
  );

  return (
    <MapView
      style={{ flex: 1 }}
      onLongPress={(event) => console.log('Map Long Press Fired...')}
    >
      <Camera centerCoordinate={[2.1848, 41.393042]} zoomLevel={14} />
      {markers.map((marker) => (
        <MarkerView key={marker.id} coordinate={[marker.lng, marker.lat]}>
          <Pressable onPress={() => setSelectedMarkerId(marker.id)}>
            <View
              style={{
                height: 30,
                width: 30,
                backgroundColor:
                  marker.id === selectedMarkerId ? "red" : "blue",
              }}
            />
          </Pressable>
        </MarkerView>
      ))}
    </MapView>
  );
};

export default Map;

Observed behavior and steps to reproduce

I am trying to handle a long press event on the marker, but the map also has a long press function that handles initiating a task. Unfortunately, when the marker is pressed, both long press events are fired (marker & map). I noticed a similar bug report earlier on Android but was closed due to it not being reproducible. Not sure if it was fixed in Android but iOS seems to cause this issue.

Expected behavior

I would like the long press to be fired only on the marker and not propagate to the map long press event.

Notes / preliminary analysis

I tried adding e.stopPropagation() but didn't work as planned and saw a comment stating it's not currently supported but maybe planned in the future. See second link in additional links and references.

Additional links and references

• Noticed a similar bug report on android but this is happening on iOS: #2598
• Plan for event propagation handling: #2836