[Bug]: MarkerView and iOS (Gestures won't work on iOS with 20 MarkerViews)

[atif089]

Mapbox Implementation

Mapbox

Mapbox Version

11.4.1 and up to 11.9.0

React Native Version

0.76.5

Platform

iOS

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

Observed behavior and steps to reproduce

I am running into this issue where I have a bunch of MarkerViews (roughly 20-30). As soon as I render these, I'm unable to pan or zoom the map anymore. It would work at some points, but mostly won't work on the map

I don't know if it is related to hit boxes or anything else, but if I zoom out to a different location where I don't have markers anymore, then it works.

Is there any way I can debug and publish more report on whats going on?

And it works perfectly fine on Android, but not on iOS

I can try to recreate this for the demo, but I fear it might not be reproducible.

react-native": "^0.76.5",
"expo": "~52.0.20",
"@rnmapbox/maps": "^10.1.33",

app.config

RNMapboxMapsVersion: "11.9.0"

Expected behavior

Panning and Zooming Gestures should work

Notes / preliminary analysis

1. Works fine on Android but not on iOS
2. If I render null inside MarkerView then it works fine
3. Doesn't matter what is inside MarkerView (Text/View etc and not does its width/height)

Additional links and references

console.log(1);

[atif089]

Additional Info: It works fine when I have 1 MarkerViews and starts breaking with 8.

[atif089]

Stumbled upon this, wondering if it has anything to do.

maps/src/components/MarkerView.tsx

Lines 102 to 107 in fa80ae5

	if (Platform.OS === 'ios' && !Mapbox.MapboxV10) {
	return (
	<PointAnnotation id={this._idForPointAnnotation()} {...this.props} />
	);
	}

[jamesbtlr]

Same issue here!

[yuriydrobniy]

Images may overlap the map view. Try debugging the images used for markers (e.g., add a backgroundColor to the image wrapper)