rnmapbox / rnmapbox/maps

[Bug]: LongPress on marker propagates to map LongPress

Open
#3,346 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug 🪲
Dominant language
Kotlin
Stars
2.9k
Forks
947
Avg merge
6d 37m
Merged PRs (30d)
1

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the standalone React Native reproduction using MapView, MarkerView, and Pressable, then review the event-propagation discussion in #2836 and the related Android report #2598. Done means a long press on a marker fires only the marker handler and does not trigger MapView's onLongPress on iOS.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.