How to access all the MapView.Markers of a react-native-maps MapView?

Question

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?

Darwindarwinian

Answer 1

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();

Checked

OMG! Thank you so much. – Gazo

Very simple and helpful – Hitandmiss