React Native Maps Custom Marker blocking Marker onPress

Question

I have custom markers being rendered to my map and do so exactly as I want. I'm using Custom Marker which is a View, Image, and then text specific to an event over the image.

For some reason using a custom marker view is blocking the onPress on the Marker component.

I've tested the onPress event as similiar to below for testing:

<Marker onPress={() => {console.log('Pressed')}}> ... but only logs the press message when I remove my custom marker view inside the Marker component.

Is there a reason why the custom marker view would be stopping the onPress? How do I get around this and fire an onPress event for a custom marker?

Added full code below for better look. Right now it is working but only because I am using the onSelect event for iOS. The onPress works the way it is for Android but not iOS.

<MapView 
    style={styles.map} 
    ref={ map => {this.map = map }}
    region={this.state.region}
    onRegionChangeComplete={this.onRegionChange}
    rotateEnabled={false}
    loadingEnabled={true}
>
    {matches.map((marker, index) => {
            return (
                <MapMarker 
                    key={index}
                    mapMarker={marker}
                    handlePress={() => {
                        this.map.animateToRegion({
                            latitude: marker.location.latlng.latitude,
                            longitude: marker.location.latlng.longitude
                        }, 100)
                    }}
                />
            )
    })} 
</MapView>

MapMarker.js

render() {
        const { mapMarker } = this.props;

        return (
            <Marker
                ref={(ref) => {this.markerRef = ref; }}
                coordinate={mapMarker.location.latlng}
                title={mapMarker.location.streetName}
                stopPropagation={true}
                pointerEvents='auto'
                onPress={() => console.log('pressed')}
                onSelect={() => {
                    this.props.handlePress();
                }}
            >

                <CustomMapMarker 
                    gameType={mapMarker.matchType} 
                    isSanctioned={mapMarker.isSanctioned}
                    startDate={mapMarker.startAt}
                />

                <Callout style={styles.customCallout}>
                    <CustomMarkerCallout markerInfo={mapMarker} /> 
                </Callout>
            </Marker>
        );
    }

Can you show us the code on how to use your custom marker into the Marker class? — FreakyCoder
@Kuray-FreakyCoder- added the code. Also got it working using the onSelect for iOS and the onPress works for Android — SKeney

SKeney SKeney · Accepted Answer · 2019-11-15T01:07:51

Fixed the issue by adding onSelect which is iOS specific. The onPress was only working for Android so don't know if this is the right answer but is working for me as of now.

React Native Maps Custom Marker blocking Marker onPress

1 Answers