onPress event not firing on Polygons when using custom styling #1447
Description
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!