Stop marker event propagation in order to prevent onPress for MapView…

…… (#2068)

* Stop marker event propagation in order to prevent onPress for MapViews from being called when a marker is clicked. This makes the behavior of Apple Maps identical to that of the behavior of Google Maps on Android. This fixes react-native-maps/react-native-maps#1132.

* Added a new Marker prop called stopPropagation. This allows the user to control whether or not onPress events from Markers propagate up and trigger MapView onPress events. This is iOS only. The default behavior is disabled (false) to prevent a breaking change from the current behavior.

docs/marker.md

@@ -19,6 +19,7 @@
 | `draggable` | `<null>` |  | This is a non-value based prop. Adding this allows the marker to be draggable (re-positioned).
 | `tracksViewChanges` | `Boolean` | true | Sets whether this marker should track view changes. It's recommended to turn it off whenever it's possible to improve custom marker performance. **Note**: iOS Google Maps only.
 | `tracksInfoWindowChanges` | `Boolean` | false | Sets whether this marker should track view changes in info window. Enabling it will let marker change content of info window after first render pass, but will lead to decreased performance, so it's recommended to disable it whenever you don't need it. **Note**: iOS Google Maps only.
+| `stopPropagation` | `Boolean` | false | Sets whether this marker should propagate `onPress` events. Enabling it will stop the parent `MapView`'s `onPress` from being called. **Note**: iOS only. Android does not propagate `onPress` events. See [#1132](https://github.com/react-community/react-native-maps/issues/1132) for more information.
 
 ## Events
 

index.d.ts

@@ -146,6 +146,7 @@ declare module "react-native-maps" {
         rotation?: number;
         tracksViewChanges?: boolean
         tracksInfoWindowChanges?: boolean
+        stopPropagation?: boolean
     }
 
     export interface MapPolylineProps {

lib/components/MapMarker.js

@@ -185,6 +185,14 @@ const propTypes = {
 
   tracksInfoWindowChanges: PropTypes.bool,
 
+  /**
+   * Stops Marker onPress events from propagating to and triggering MapView onPress events.
+   *
+   * @platform ios
+   */
+
+  stopPropagation: PropTypes.bool,
+
   /**
    * Callback that is called when the user presses on the marker
    */
@@ -227,7 +235,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-  onPress() {},
+  stopPropagation: false,
 };
 
 class MapMarker extends React.Component {
@@ -295,6 +303,14 @@ class MapMarker extends React.Component {
         {...this.props}
         image={image}
         style={[styles.marker, this.props.style]}
+        onPress={event => {
+          if (this.props.stopPropagation) {
+            event.stopPropagation();
+          }
+          if (this.props.onPress) {
+            this.props.onPress(event);
+          }
+        }}
       />
     );
   }