IOS OnMapPress called when press the marker

[felangga]

This problem using Google Maps and doesn't occurred on Android.

[ghost]

In my case, that is same.
Who can help me?

[hysan]

I dug into the code and after reading through a lot of issues, in particular #14 and #758, I understand what is going on with event bubbling and how to potentially fix this. However, before doing so, the larger question of what the proper behavior needs to be answered.

Note: All iOS behavior being described is for Apple Maps, not Google Maps, as that behaves differently on iOS and appears to be similar to Android.

Current Behavior of MapView

On Android, clicking on a Marker, regardless of defining onPress or not, will not trigger onPress for your MapView. This behavior is consistent with other children such as Polygon and PolyLine. Clicks on children never trigger the parent MapView's onPress. An easy way to visualize what's happening is that child objects are effectively covering that part of the map.

On iOS, onPress events for children such as Marker and Polygon (see #1713) will always trigger the onPress prop for MapView. The reasons are different for each, such as Markers bubbling up events (this occurs in AIRMapMarker.m line 223), but the end result is the same - MapView's onPress will be triggered. This is the opposite of Android; child objects don't cover up the map - they let clicks pass through.

Current Behavior of Markers, Polygons, PolyLines, possibly others

On Android, these components appear to have a set hierarchy in how they are layered:

Marker > PolyLine > Polygon

They do not propagate click events down even if onPress is not defined. For example, PolyLine with no onPress will prevent the onPress of a Polygon underneath it to be triggered. The order of the components in render does not matter which also means that zIndex does not matter.

I haven't tested the other components like Circle, but there's probably similar behavior there as well.

On iOS, the logic makes less sense:

• Markers that are positioned on top of Polygons or PolyLines do not pass onPress events pass down to the Polygon or PolyLine.

• PolyLines pass through clicks to Polygon if they are on top of each other.

• PolyLines also have an undocumented threshold that allows them to trigger their onPress event if you click close enough to them. So clearly clicking on a Polygon can cause a nearby PolyLine to be clicked (AirMapManager.m line 410 and line 481):

  #define MAX_DISTANCE_PX 10.0f

What's the "correct" behavior?

On iOS Apple Maps, the onPress behavior is a mess. There's no consistent paradigm for understanding how the onPress events of the various components interact with each other.

On Android, it's more consistent but there are still some gotchas such as they ignoring of render order for children.

Do we attempt to bring iOS behavior more in line with Android?

Workarounds and Fixes for Markers

Solution 1 is a documentation fix. Right now, users can stop this behavior by stopping propagation with:

event.stopPropagation();

in their onPress function.

All we have to do is update the documentation to explain the different behavior and add examples of how to stop the event propagation.

Caveat: While this does give iOS greater fine grain control over click behavior, it also means that users have to add code to all marker onPresses if they want iOS behavior to be identical to Android.

Solution 2 is to push this fix downward into react-native-maps.

Caveat: This would be a breaking change. Anyone who is relying on this difference in behavior would be forced to not upgrade or fork.

Solution 3 is to push this fix downward into react-native-maps and add a new prop (probably to Marker) that is iOS-only and controls whether or not propagation occurs. The default would be false in order to align iOS behavior with Android behavior.

It's the same breaking change, but it would give users relying on this behavior a fallback.

Polygons, PolyLines, and others

TODO: I still need to investigate how to "fix" these use cases, but I would still have the same question about "proper" behavior here. It's also out of scope for this particular issue.

Thoughts?

@lelandrichardson Not sure who else to ping for this issue.

I'll submit a PR for the fix I explained in Solution 2 with a fix via Solution 3 being trivially easy to do. However, I'm not sure if it should be accepted until the question of overall behavior is answered. How should onPress behave and how should the various components interact with each other? Should iOS behave exactly like Android in all cases? Or maybe it should be the reverse?

[saadmutahar]

@hysan
The same error is occurred in latest version of maps.
When I press the marker, it triggers the onPress of parent Maps also. Can you please have a look for this.

I am using these versions.

"react-native": "0.59.8",
"react-native-maps": "0.25.0"

Thanks

[saadmutahar]

It's fixed the issue for me, As I forgot to add the stopPropagation event on marker click.

Thanks.