React-native-maps: onPress event not firing on Polygons when using custom styling

[limoragni]

Hi! Great work on the library.

I want to draw one polygon for each country in a custom styled map and bind to the onPress event for adding interaction.

import React, { Component } from 'react';
import { Dimensions, Text, View } from 'react-native';
import { MapView } from 'expo';
import countries from './countries';
import mapStyle from './mapStyle';

const { width, height } = Dimensions.get('window');

export default class App extends Component {
  constructor() {
    super();

    let polygons = []
     countries.forEach((country) =>{
      country.polygons.forEach((p) => {
        polygons.push(p) 
      })
    })
    this.state = {
      region: {
        latitude: 24.889831,
        longitude: 67.0672087,
        latitudeDelta: 100,
        longitudeDelta: 100,
      },
      polygons: polygons
    }
  }

  onPolygonPress(polygon) {
    console.log('onPress');

  }

  render() {
    return (
      <View style={styles.container}>
        <MapView 
          provider={MapView.PROVIDER_GOOGLE}
          style={styles.map} 
          initialRegion={this.state.region}
          customMapStyle={mapStyle}
        >
          {this.state.polygons.map((polygon, index) => (
            <View key={index}>
              <MapView.Polygon
                coordinates={polygon}
                fillColor="rgba(255,255,255,0.5)"
                onPress={() => this.onPolygonPress(polygon)}
              />
            </View>
          ))}
        </MapView>
      </View>
    );
  }
}

const styles = {
  container: {
    alignItems: 'stretch',
    flex: 1,
  },
  map: {
    flex: 1,
  },
};

This is working ok except for the onPress event not firing on the polygons.
The weird thing is that if I remove this line provider={MapView.PROVIDER_GOOGLE} the onPress event starts working, but I lose the custom styling.

This is only occurring on IOS. If I remove the provider line and open the app in an android device it works with the styling and the onPress event.
Any ideas on how can I get both functionalities?

Cheers!

[childv]

Hi! Any updates on this? I'm having the same problem too.

Thanks!

[childv]

Hey @limoragni, so I just revisited the Polygon component API, and apparently there's a prop called "tappable" that enables onPress events, and it defaults to false on iOS. Just set it to true and it works! Not sure if I just missed it before or if it came with a recent update - hope this helps.

[rborn]

@limoragni closing, this as @childv seems to have found the solution. Please ping me if you still have issues.