In a react-native app usig react-native-maps, I'm trying to programmatically show the MapView.Callout
of a specific MapView.Marker
amongst many. I'm planning to use the showCallout-method, but haven't yet found out how to access all of the MapView's markers, from where I could select the correct one based on it's id/key/ref.
The markers are rendered onto the MapView in a map-loop as below.
Sofar I've tried without success to get hold of all the MapView's markers using this.refs.mapView.refs / this.refs.mapView.children but I don't get anything there.
<MapView>
ref={'mapView'}
...
>
{this.props.screenProps.appState.cachedDeviations.map(deviation => {
return (
<MapView.Marker
coordinate={
deviation.position
}
key={deviation.Id}
ref={deviation.Id}
>
<MapView.Callout style={styles.callout}>
<DeviationCallout
...
/>
</MapView.Callout>
</MapView.Marker>
)
})
}
</MapView>
Any hints?
You can use functional ref.
Example
<MapView.Marker
coordinate={ deviation.position }
key={deviation.Id}
ref={(ref) => this.markers[deviation.Id] = ref}
>
// ...
</<MapView.Marker>
// ...
this.markers[someId].showCallout();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With