add example for overlay overpress and docs

Author: frankrowe

docs/polygon.md

@@ -15,6 +15,11 @@
 | `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
 | `lineDashPattern` | `Array<Number>` | `null` | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the  line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on.
 
+## Events
+
+| Event Name | Returns | Notes
+|---|---|---|
+| `onPress` |  | Callback that is called when the user presses on the polygon
 
 ## Types
 

docs/polyline.md

@@ -14,6 +14,11 @@
 | `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
 | `lineDashPattern` | `Array<Number>` | `null` | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the  line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on.
 
+## Events
+
+| Event Name | Returns | Notes
+|---|---|---|
+| `onPress` |  | Callback that is called when the user presses on the polyline
 
 ## Types
 

example/examples/EventListener.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import SyntheticEvent from 'react/lib/SyntheticEvent';
 import {
   StyleSheet,
   View,
@@ -65,13 +66,15 @@ class EventListener extends React.Component {
 
   recordEvent(name) {
     return e => {
-      const { events } = this.state;
-      this.setState({
+      if (e instanceof SyntheticEvent && typeof e.persist === 'function') {
+        e.persist();
+      }
+      this.setState(prevState => ({
         events: [
           this.makeEvent(e, name),
-          ...events.slice(0, 10),
+          ...prevState.events.slice(0, 10),
         ],
-      });
+      }));
     };
   }
 
@@ -123,6 +126,34 @@ class EventListener extends React.Component {
               </View>
             </MapView.Callout>
           </MapView.Marker>
+          <MapView.Polygon
+            fillColor={'rgba(255,0,0,0.3)'}
+            onPress={this.recordEvent('Polygon::onPress')}
+            coordinates={[{
+              latitude: LATITUDE + (LATITUDE_DELTA / 5),
+              longitude: LONGITUDE + (LONGITUDE_DELTA / 4),
+            }, {
+              latitude: LATITUDE + (LATITUDE_DELTA / 3),
+              longitude: LONGITUDE + (LONGITUDE_DELTA / 4),
+            }, {
+              latitude: LATITUDE + (LATITUDE_DELTA / 4),
+              longitude: LONGITUDE + (LONGITUDE_DELTA / 2),
+            }]}
+          />
+          <MapView.Polyline
+            strokeColor={'rgba(255,0,0,1)'}
+            onPress={this.recordEvent('Polyline::onPress')}
+            coordinates={[{
+              latitude: LATITUDE + (LATITUDE_DELTA / 5),
+              longitude: LONGITUDE - (LONGITUDE_DELTA / 4),
+            }, {
+              latitude: LATITUDE + (LATITUDE_DELTA / 3),
+              longitude: LONGITUDE - (LONGITUDE_DELTA / 4),
+            }, {
+              latitude: LATITUDE + (LATITUDE_DELTA / 4),
+              longitude: LONGITUDE - (LONGITUDE_DELTA / 2),
+            }]}
+          />
         </MapView>
         <View style={styles.eventList}>
           <ScrollView>