react-native-maps - polygon onPress event

Question

I'm using react-native-maps and I'm rendering Polygons on my map that I want to be pressable.

My problem is that AFAIK react-native-maps Polygon doesn't have an onPress event.

I also thought about wrapping each Polygon with a Touchable component, but then my problem is that (again, AFAIK...), overlays in react-native-maps have to be direct children of the MapView component or else they won't render...

Any way to get this working?

Thanks!
Uri

Answer 1

Now there is an onPress event on the Polygon.

Reference: https://github.com/react-community/react-native-maps/blob/master/docs/polygon.md

<Polygon
    coordinates={this.props.coordinates}
    strokeColor="rgba(0, 0, 0, 1)"
    strokeWidth={3}
    tappable={true}
    onPress={() => this.onPress('foo')}
/>

Answer 2

Ok, so I got this answer from https://github.com/airbnb/react-native-maps/issues/488.

The idea is to add an onPress event to the MapView component like so:

<MapView onPress={ this.mapPressed }>

Then, using geojson-js-utils you can do (double array is on purpose, that's the way the function works):

import { pointInPolygon } from 'geojson-utils';

mapPressed(event) {
 const pointCoords = [event.nativeEvent.coordinate.longitude,
                     event.nativeEvent.coordinate.latitude];

 const polygonCoords = [ [lngA, latA], [lngB, latB] ... etc... ];

 const  inPolygon = pointInPolygon(
   { 'type': 'Point', 'coordinates': pointCoords },
   { 'type': 'Polygon', 'coordinates': [plotCoords] }
 );

 if (inPolygon) {
  // do something 
 }


}