How to show callout in Airbnb maps? - react-native

Question

I have a static map with one marker and want to always display the marker callout.
Some folks advise to use MapView's onLayout, but this doesn't work for some time now.
I'm attempting to solve it with onRegionChangeComplete which sometimes works (it gets called once or twice), but in about 10% cases it gets stuck in a loop and gets called again and again until the app crashes. This happens only on iOS.
This is my code
setMarkerRef = (ref) => {
this.marker = ref
}
showCallout = () => {
this.marker.showCallout()
}
render() {
...
<MapView
style={{...StyleSheet.absoluteFillObject}}
region={{
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.00922,
longitudeDelta: 0.00421,
}}
showsMyLocationButton={false}
showsCompass={false}
showsTraffic={false}
zoomEnabled={false}
rotateEnabled={false}
scrollEnabled={false}
pitchEnabled={false}
onRegionChangeComplete={this.showCallout}
onPress={this.openMap}
>
<MapView.Marker
coordinate={{
latitude: latitude,
longitude: longitude,
}}
title={address}
ref={this.setMarkerRef}
/>
</MapView>
Any idea what's wrong with my approach? Does anyone have a better workaround?
Edit: I want the component to look like this, without the need for user interaction. Simply display a map, marker and callout.

Answer 1

Since you're rendering a fixed map with no intended region change, there's no need for you to listen to regionChangeComplete. It's really not a fun event to work with as its behaviour isn't that consistent.
initialRegion would work for showing your map. Or if you would like more fancy animation, trying using MapView animateToRegion.
Anyway, all you need to listen to is componentDidMount.
I suspect your refs code might be wrong, but anyway this works for me.
componentDidMount () {
this.refs['mymarker'].showCallout()
}
render () {
return (
<MapView>
<MapView.Marker
coordinate={YOUR_COORDINATES}
title='my callout'
ref='mymarker'>
</MapView.Marker>
</MapView>
)
}
If you still have problems, it could be that your title prop in MapView.Marker isn't receiving the address you are passing in when showCallout was called. In such a case, the call out doesn't render.
Updated Answer: (seemed like the above wasn't working for Apple Maps)
render () {
return (
<MapView
onLayout={() => this.refs["mymarker"].showCallout()}>
<MapView.Marker
coordinate={YOUR_COORDINATES}
title='my callout'
ref='mymarker'>
</MapView.Marker>
</MapView>
)
}