Can't press on markers that are too close to a callout

[antoinerousseau]

Summary

I want to show callouts but I don't want them to be interactive. I tried multiple techniques, from pointerEvents="none" to zIndex

Reproducible sample code

import MapView, { Callout, Marker } from "react-native-maps";

export const MapScreen = () => {
  const handleSelect = () => {
    console.log("tapped marker");
  }

  return (
    <MapView initialRegion={PARIS} onMarkerSelect={handleSelect}>
      <Marker coordinates={M1}>
        <Circle />
        <Callout tooltip>
          <Text>M1</Text>
        </Callout>
      </Marker>
      <Marker coordinates={M2}>
        <Circle />
        <Callout tooltip>
          <Text>M2</Text>
        </Callout>
      </Marker>
    </MapView>
  )
}

Steps to reproduce

• Click on the first marker to open its callout
• Click on the second marker that is too close to the opened callout

Here for example, tapping the marker on the right does nothing, because the touch is captured by the callout of the marker in the middle:

Expected result

call onMarkerSelect

Actual result

no reaction

React Native Maps Version

1.15.4

What platforms are you seeing the problem on?

Android, iOS (Apple Maps)

React Native Version

0.72.10

What version of Expo are you using?

Not using Expo

Device(s)

Pixel 6a, iPhone 15

Additional information

No response

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.

[antoinerousseau]

Still relevant