Marker onPress not triggered - touchable area is different than marker itself

[mishkeTz]

Summary

Map-View-record.mov

Reproducible sample code

const Markers = useMemo(() => markers?.map(marker => {
  const { coordinate: { latitude, longitude } } = marker;
  return (
    <Marker
      key={`marker-${latitude}-${longitude}`}
      tracksViewChanges={false}
      coordinate={marker.coordinate}
      onPress={() => onMarkerPress(marker)}
    >
      <View style={styles.markerTextWrapper} >
        <Text style={styles.markerText}>{marker.count}</Text>
      </View>
    </Marker>
  );
}), [markers]);

<MapView
  ref={mapRef}
  mapType='hybrid'
  initialRegion={region}
  style={styles.mapView}
  loadingEnabled
  showsBuildings={false}
  showsMyLocationButton={false}
  showsPointsOfInterest={false}
  showsCompass={false}
  showsScale={false}
  showsIndoors={false}
>
  {Markers}
</MapView>

Steps to reproduce

• Build on Android using google maps provider

Expected result

Marker is clickable whenever I click on the rendered marker.

Actual result

The marker touchable area is somewhere around (above) the actual marker. The marker is sometimes not clickable or only part of it is.

React Native Maps Version

1.1.0

What platforms are you seeing the problem on?

Android

React Native Version

0.63.4

What version of Expo are you using?

Not using Expo

Device(s)

Android

Additional information

No response

[wordisthebird]

I'm far from an expert but heres my code that works:
Ive shared a link of an article with the repo link where I got solution to work!

        <ClusteredMapView
        provider={PROVIDER_GOOGLE}
        clusterColor="red"
        ref={map}
        customMapStyle={MAP_LIGHT_STYLE}
        style={styles.mapView}
        initialRegion={region}
        onRegionChangeComplete={onRegionChangeComplete}>
        {markers.map((marker, index) => (
          <Marker
            ref={markerRef}
            key={index}
            tracksInfoWindowChanges={false}
            tracksViewChanges={Platform.OS === 'android' ? false : true}

            coordinate={{
              latitude: marker.coordinate.latitude,
              longitude: marker.coordinate.longitude,
            }}
            onPress={(e) => onMarkerPress(index)}
          >
            <Animated.View style={[styles.markerWrap]}>
                <Image
                  fadeDuration={0}
                  resizeMode="contain"
                  onLoadEnd={doRedraw}
                  style={styles.markerLogo}
                  source={require("../../../image.png")}
                />
            </Animated.View>

          </Marker>
        ))}
      </ClusteredMapView>

on marker press:

const onMarkerPress = (index) => {
   console.log("Marker : ", index)

   setVisible(true)
   LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
   setCurrent(index);
 };

most help came from here:

https://dev.to/upsilon_it/how-to-do-map-clustering-with-react-native-10ih

[monholm]

Hi @mishkeTz 👋

My guess is that this is caused by the new renderer on android.

The touchable area is the same as always, but the labels beneath your markers are intercepting the taps/clicks (both the markers you are pressing are above city labels). Check out my comment regarding changed behaviour on the new renderer.

You are able to trigger the markers onclick "around" it because of this.

If you aren't using the POI click listener, you should be able to "fix" this by not registrering the listener (e.g. commenting out):

react-native-maps/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java

Line 220 in c447dea

this.map.setOnPoiClickListener(this);

Could you try to patch that line and report back if that's the case for you as well?

[mishkeTz]

@Simon-TechForm
That was the issue for me. Changing that fixed this weird behaviour.
I forgot to mention that I do use the new renderer.

I created a patch for this, if anyone finds himself in similar situation:

diff --git a/node_modules/react-native-maps/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java b/node_modules/react-native-maps/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java
index 38755bb..c05a08b 100644
--- a/node_modules/react-native-maps/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java
+++ b/node_modules/react-native-maps/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java
@@ -221,7 +221,7 @@ public class AirMapView extends MapView implements GoogleMap.InfoWindowAdapter,
     this.map = map;
     this.map.setInfoWindowAdapter(this);
     this.map.setOnMarkerDragListener(this);
-    this.map.setOnPoiClickListener(this);
+    // this.map.setOnPoiClickListener(this);
     this.map.setOnIndoorStateChangeListener(this);
 
     applyBridgedProps();

[Nuno1123]

I'm having a similar issue.

I have multiple markers and clusters.
I am not able to onPress any marker or cluster if over a POI. It always calls onPoiClick instead.
I am not willing to disable all onPoiClick as I want to be able to do so. Just when marker or cluster is over it.

Any idea how to do so?

<MapView
        clusterColor="#0f0f0f"
        clusterTextColor="#fd9432"
        clusterFontFamily="Poppins"
        extent={250}
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        customMapStyle={mapStyle}
        initialRegion={{
          latitude: 38.7099,
          longitude: -9.1365,
          latitudeDelta: 80.0,
          longitudeDelta: 80.0,
        }}
        region={{
          latitude: coordinates.latitude,
          latitudeDelta: zoom,
          longitude: coordinates.longitude,
          longitudeDelta: zoom,
        }}
        onPoiClick={e => console.log('Poi clicked')}
        onPress={
          addCourtInvisible === true
            ? e => console.log(e)
            : e => handleNewMarker(e.nativeEvent.coordinate)
        }>
            <Marker
                  key={index}
                  coordinate={{
                    latitude: parseFloat(value.court.lat),
                    longitude: parseFloat(value.court.lng),
                  }}
                  onPress={() => {
                    navigation.navigate('CourtView', value);
                  }}
                  style={styles.icons}
                  anchor={{x: 0.5, y: 0.5}}
                  icon={
                    value.court.is_hoopers === true ? HoopersCourtLogo : CourtLogo
                  }>
          </Marker>
</MapView>

[GoktuqCan]

Hi, I've created a repository based on the solution I'm using in my current project. I hope you'd find it useful:
https://github.com/GoktuqCan/react-native-maps-touchables

[maXXCZ1]

Hello, was this addressed in any recent stable release? I struggle to find more discussion about this topic, but at the same time i don't see any viable solution. I disabled mentioned this.map.setOnPoiClickListener(this); in my MapView.java but even this workaround did not work.
I am on 1.7.1 version and run into this issue once i started to use enableLatestRenderer().

[findhumane]

I had this same issue (unable to click marker on top of a city name) and the patch for recent releases is slightly different as AirMapView.java has been renamed to MapView.java:

diff --git a/node_modules/react-native-maps/android/src/main/java/com/rnmaps/maps/MapView.java b/node_modules/react-native-maps/android/src/main/java/com/rnmaps/maps/MapView.java
--- a/node_modules/react-native-maps/android/src/main/java/com/rnmaps/maps/MapView.java
+++ b/node_modules/react-native-maps/android/src/main/java/com/rnmaps/maps/MapView.java
@@ -242,7 +242,7 @@ public class MapView extends com.google.android.gms.maps.MapView implements Goog
 
     markerCollection.setInfoWindowAdapter(this);
     markerCollection.setOnMarkerDragListener(this);
-    this.map.setOnPoiClickListener(this);
+    //this.map.setOnPoiClickListener(this);
     this.map.setOnIndoorStateChangeListener(this);
 
     applyBridgedProps();

[christophemenager]

Thank you @findhumane ! I confirm this fixed my issue

[MariuzM]

This also fixed the issue @findhumane.
I wonder how to make this perm change?