OnPress not working for Marker in react-native-maps

Question

I would like to perform some action when pressing one of the Markers on a map. What I have:

1) A MapView , like this:

<MapView
    provider={PROVIDER_GOOGLE}
    initialRegion={this.state.region}
    style={styles.map}>
    {this.displayRouteLocations(locations)}
</MapView>

2) My method displayRouteLocations does the following:

displayRouteLocations(locations) {
    return locations.map((location, i) => {
        return (
            <PointMarker
                key={i}
                coordinate={location}
                title={location.name}
                description={location.description}
                onPress={() => alert('test')}
            />
        );
    });
}

3) Finally, PointMarker is a separate component like this:

import {Marker} from 'react-native-maps';

class PointMarker extends Component {
    render() {
        return (
            <Marker
                {...this.props}
                pinColor={'#f6c23d'}
                tracksViewChanges={false}
            />
        );
    }
}

I don't know why onPress doesn't work on PointMarker . I pass it to react-native-maps Marker , but somehow it isn't triggered when I press on the markers.

I already tried searching for answers in react-native-maps official documentation on GitHub. In this example they do pretty much the same (call an arrow function onPress). However, it doesn't work in my case.

I'm testing the app on Android.

Answer 1

According to the docs you should set stopPropagation to true. Like this :

displayRouteLocations(locations) {
    return locations.map((location, i) => {
        return (
            <PointMarker
                key={i}
                coordinate={location}
                title={location.name}
                description={location.description}
                onPress={(e) => {e.stopPropagation(); alert('test');}}
            />
        );
    });
}

For more information : <Marker /> Component API

More information 2 : Suggestion