Fix callouts appearing behind markers

[olofd]

For use with tooltip={true}. Ugly, but works.

[Frexuz]

+1, tested and works. AirBnB needs to step up! 😠 772 issues and 40 PRs

react-native-maps is the worst-best-package out there

[tpisto]

I can also confirm that this works!

[rborn]

LGTM

[rborn]

@alvelig @christopherdro 🐽

[jbcrestot]

Working here too 👍

[alvelig]

Experiencing problems with this commit in production when markers are added after callout is open (react-native-maps-super-cluster for example) :(

seems to be fixed with 921fffb

[GarimaMathur07]

@alvelig I have about 600 markers. So, i am using https://github.com/novalabio/react-native-maps-super-cluster uses MapBox's SuperCluster as clustering engine. I am facing Callout behind markers issue. I am using renderMarker as follows:

<ClusteredMapView
			style={styles.map}
			data={this.state.pins}
			ref={o => (this.mapRef = o)}
		        renderMarker={this.renderMarker}
			renderCluster={this.renderCluster}
			fitToElements={ClusteredMapView.ANIMATED_FIT}
			edgePadding={styles.edgePaddingStyle}
			clusteringEnabled={true}
			initialRegion={{
						latitude: this.initialRegionLat,
						longitude: this.initialRegionLong,
						latitudeDelta: this.LATITUDE_DELTA,
						longitudeDelta: this.LONGITUDE_DELTA
					        }}/>

renderMarker (pin) {
	const styles = this.styleSheet();
	return (
		<Marker
			key={pin.id || Math.random()}
			coordinate={pin.location}
			ref={o => (this.marker = o)}
			calloutOffset={{ x: -8, y: 28 }}
			calloutAnchor={{ x: 0.5, y: 0.4 }}
			onCalloutPress={() => this.onPressCallout(pin)}
			image={map_pin.source}
		>
			<Callout tooltip style={styles.customCalloutView}>
				<LocationMarkerCallout title={pin.storeloc.name} description={pin.storeloc.address} />
			</Callout>
		</Marker>
	);
};

Can you please suggest how can i resolve this issue.