React-native-maps: onCalloutPress doesn't fire when using customMapStyle and provider

[jackcbrown89]

Is this a bug report?

Yes

Environment

"react": "16.3.1"
"react-native": "0.55.3"
"react-native-maps": "^0.21.0"

Expected Behavior

Clicking a Callout should trigger the onCalloutPress event.

Actual Behavior

onCalloutPress is not triggered; however, when customMapStyle and provider are not provided to <MapView>, onCalloutPress is triggered. Additionally, the Callouts and Markers look different now that I've passed in a customMapStyle.

Here's a comparison (first one is without customMapStyle):

Reproducible Demo

class SomeScreen extends React.PureComponent {

renderMarkers = () => {
  return this.state.venue_list.map((venue, key) => {
    return (
      <Marker
        ...
        onCalloutPress={() => console.log("It worked with a custom map")}
      >
      ...
      </Marker>
    )
  })
}

render() {
  return (
    <View style={styles.container}>
    ...
    <MapView
      ref="map"
      customMapStyle={mapStyle}
      provider={PROVIDER_GOOGLE}
      onRegionChangeComplete={this.onRegionChange}
      ...
    >
    {this.renderMarkers()}
    </MapView>
    ...
    </View>
  )
}

onRegionChange = () => {
    this.refs.fitToElements(true);
}

}

PLEASE DON'T COMMENT +1's

That's why a higher power invented the 👍

[rborn]

PLEASE DON'T COMMENT +1's
That's why a higher power invented the 👍

Love this one ❤️

[gorobets-da]

You can use callout as a temporary solution:

<Marker
    key={project.id}
    coordinate={{
      longitude: project.longitude,
      latitude: project.latitude
    }}
  >
    <Callout
      onPress={() => this.onMarkerPress(project)}
     >
       <Text>{project.name}</Text>
     </Callout>
</Marker>

Worked for me with specified provider.

[chrise86]

This is still an issue when using Google maps. on iOS. When using native maps it works fine.