[SOLVED] React Native Maps: can't click on marker if there's a POI

React Native Maps: can't click on marker if there's a POI

I'm using React Native Maps library to build a React Native (Android/iOS) app. I found out that I cannot click on a marker if there's a POI (like a city or place name) below it. The MapView.onPOIClick listener is fired but the Marker.onPress isn't. I've tried the app both in Android emulator and real Android phone.

Have someone faced this issue and was able to solve it? I've already tried playing with RN Maps properties but still no luck.

Thank you very much in advance!

Solution

I know I am very late here, but I as far as I understand your problem is placing a marker exactly on a POI. If I am correct, the code below can help you (I had the same problem and just solved it). I am working with:

React Native: 0.72.6
Expo: 49.0.15
react-native-maps: 1.7.1

Here's my code:

    const [markerData, setMarkerData] = useState({});
    
    /* ...Rest of the code... */
    
    return (
        <MapView
            className="flex-1 rounded-md"
            initialRegion={initialRegion}
            onPress={(data) => setMarkerData(data?.nativeEvent.coordinate)}
            onMarkerDragEnd={(data) => setMarkerData(data?.nativeEvent.coordinate)}
            onPoiClick={(data) => setMarkerData(data?.nativeEvent.coordinate)}
        >
            {Object.keys(markerData).length > 0 && <Marker draggable coordinate{markerData} />}
        </MapView>
    );

Basically, I get the co-ordinates of the location that the user pressed upon by firing these events. The onPoiClick event gets the coords of a POI, you can pass that data to a state variable (markerData in my case) and use that data to render the marker.

onPress={(data) => setMarkerData(data?.nativeEvent.coordinate)}
onMarkerDragEnd={(data) => setMarkerData(data?.nativeEvent.coordinate)}
// Using onPoiClick gets the coords of a POI
onPoiClick={(data) => setMarkerData(data?.nativeEvent.coordinate)}

Hope this helps!