Add Polyline support to MapView

Summary: Per issue #1925, add support for Polyline to MapView.

Briefly, if you have a MapView declared as:

    <MapView
      annotations={this.state.annotations}
      overlays={this.state.overlays}
      style={styles.map}
      region={this.state.region}
      ref="mapView"
    />

then setting

    this.state.overlays = [{
      coordinates: [
        { latitude: 35.5, longitude: -5.5 },
        { latitude: 35.6, longitude: -5.6 },
        ...
      ],
      strokeColor: 'rgba(255, 0, 0, 0.5)',
      lineWidth: 3,
    }];

will draw a red line between the points in locations with a width of 3 and equally blended with the background.
Closes https://github.com/facebook/react-native/pull/4153

Reviewed By: svcscm

Differential Revision: D2697347

Pulled By: nicklockwood

fb-gh-sync-id: a436e4ed8d4e43f2872b39b4694fad7c02de8fe5

Examples/UIExplorer/MapViewExample.js

@@ -313,6 +313,45 @@ var CustomPinImageMapViewExample = React.createClass({
 
 });
 
+var CustomOverlayMapViewExample = React.createClass({
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+    };
+  },
+
+  render() {
+    if (this.state.isFirstLoad) {
+      var onRegionChangeComplete = (region) => {
+        this.setState({
+          isFirstLoad: false,
+          overlays: [{
+            coordinates:[
+              {latitude: 32.47, longitude: -107.85},
+              {latitude: 45.13, longitude: -94.48},
+              {latitude: 39.27, longitude: -83.25},
+              {latitude: 32.47, longitude: -107.85},
+            ],
+            strokeColor: '#f007',
+            lineWidth: 3,
+          }],
+        });
+      };
+    }
+
+    return (
+      <MapView
+        style={styles.map}
+        onRegionChangeComplete={onRegionChangeComplete}
+        region={this.state.mapRegion}
+        overlays={this.state.overlays}
+      />
+    );
+  },
+
+});
+
 var styles = StyleSheet.create({
   map: {
     height: 150,
@@ -373,4 +412,10 @@ exports.examples = [
       return  <CustomPinImageMapViewExample style={styles.map} />;
     }
   },
+  {
+    title: 'Custom overlay',
+    render() {
+      return  <CustomOverlayMapViewExample style={styles.map} />;
+    }
+  },
 ];

Libraries/Components/MapView/MapView.js

@@ -45,7 +45,6 @@ var MapView = React.createClass({
         // TODO: add a base64 (or similar) encoder here
         annotation.id = encodeURIComponent(JSON.stringify(annotation));
       }
-
       return annotation;
     });
 
@@ -54,16 +53,37 @@ var MapView = React.createClass({
     });
   },
 
+  checkOverlayIds: function (overlays: Array<Object>) {
+
+    var newOverlays = overlays.map(function (overlay) {
+      if (!overlay.id) {
+        // TODO: add a base64 (or similar) encoder here
+        overlay.id = encodeURIComponent(JSON.stringify(overlay));
+      }
+      return overlay;
+    });
+
+    this.setState({
+      overlays: newOverlays
+    });
+  },
+
   componentWillMount: function() {
     if (this.props.annotations) {
       this.checkAnnotationIds(this.props.annotations);
     }
+    if (this.props.overlays) {
+      this.checkOverlayIds(this.props.overlays);
+    }
   },
 
   componentWillReceiveProps: function(nextProps: Object) {
     if (nextProps.annotations) {
       this.checkAnnotationIds(nextProps.annotations);
     }
+    if (nextProps.overlays) {
+      this.checkOverlayIds(nextProps.overlays);
+    }
   },
 
   propTypes: {
@@ -195,11 +215,6 @@ var MapView = React.createClass({
       onLeftCalloutPress: React.PropTypes.func,
       onRightCalloutPress: React.PropTypes.func,
 
-      /**
-       * annotation id
-       */
-      id: React.PropTypes.string,
-
       /**
        * The pin color. This can be any valid color string, or you can use one
        * of the predefined PinColors constants. Applies to both standard pins
@@ -213,7 +228,36 @@ var MapView = React.createClass({
        * @platform ios
        */
       image: Image.propTypes.source,
+      
+      /**
+       * annotation id
+       */
+      id: React.PropTypes.string,
+    })),
 
+    /**
+     * Map overlays
+     */
+    overlays: React.PropTypes.arrayOf(React.PropTypes.shape({
+      /**
+       * Polyline coordinates
+       */
+      coordinates: React.PropTypes.arrayOf(React.PropTypes.shape({
+        latitude: React.PropTypes.number.isRequired,
+        longitude: React.PropTypes.number.isRequired
+      })),
+
+      /**
+       * Line attributes
+       */
+      lineWidth: React.PropTypes.number,
+      strokeColor: React.PropTypes.string,
+      fillColor: React.PropTypes.string,
+
+      /**
+       * Overlay id
+       */
+      id: React.PropTypes.string
     })),
 
     /**
@@ -255,7 +299,7 @@ var MapView = React.createClass({
 
   render: function() {
 
-    let {annotations} = this.props;
+    let {annotations, overlays} = this.props;
     annotations = annotations && annotations.map((annotation: Object) => {
       let {tintColor, image} = annotation;
       return {
@@ -264,10 +308,21 @@ var MapView = React.createClass({
         image: image && resolveAssetSource(image),
       };
     });
+    overlays = overlays && overlays.map((overlay: Object) => {
+      let {strokeColor, fillColor} = overlay;
+      return {
+        ...overlay,
+        strokeColor: strokeColor && processColor(strokeColor),
+        fillColor: fillColor && processColor(fillColor),
+      };
+    });
 
     // TODO: these should be separate events, to reduce bridge traffic
-    if (annotations || this.props.onAnnotationPress) {
+    if (annotations) {
       var onPress = (event: Event) => {
+        if (!annotations) {
+          return;
+        }
         if (event.nativeEvent.action === 'annotation-click') {
           this.props.onAnnotationPress &&
             this.props.onAnnotationPress(event.nativeEvent.annotation);
@@ -308,6 +363,7 @@ var MapView = React.createClass({
       <RCTMap
         {...this.props}
         annotations={annotations}
+        overlays={overlays}
         onPress={onPress}
         onChange={onChange}
       />

React/React.xcodeproj/project.pbxproj

@@ -26,6 +26,7 @@
 		13A1F71E1A75392D00D3D453 /* RCTKeyCommands.m in Sources */ = {isa = PBXBuildFile; fileRef = 13A1F71D1A75392D00D3D453 /* RCTKeyCommands.m */; };
 		13AB90C11B6FA36700713B4F /* RCTComponentData.m in Sources */ = {isa = PBXBuildFile; fileRef = 13AB90C01B6FA36700713B4F /* RCTComponentData.m */; };
 		13AF20451AE707F9005F5298 /* RCTSlider.m in Sources */ = {isa = PBXBuildFile; fileRef = 13AF20441AE707F9005F5298 /* RCTSlider.m */; };
+		13AFBCA01C07247D00BBAEAA /* RCTMapOverlay.m in Sources */ = {isa = PBXBuildFile; fileRef = 13AFBC9F1C07247D00BBAEAA /* RCTMapOverlay.m */; };
 		13B07FEF1A69327A00A75B9A /* RCTAlertManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FE81A69327A00A75B9A /* RCTAlertManager.m */; };
 		13B07FF01A69327A00A75B9A /* RCTExceptionsManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FEA1A69327A00A75B9A /* RCTExceptionsManager.m */; };
 		13B07FF21A69327A00A75B9A /* RCTTiming.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FEE1A69327A00A75B9A /* RCTTiming.m */; };
@@ -38,7 +39,7 @@
 		13B080201A69489C00A75B9A /* RCTActivityIndicatorViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080191A69489C00A75B9A /* RCTActivityIndicatorViewManager.m */; };
 		13B080261A694A8400A75B9A /* RCTWrapperViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080241A694A8400A75B9A /* RCTWrapperViewController.m */; };
 		13B202011BFB945300C07393 /* RCTPasteboard.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B202001BFB945300C07393 /* RCTPasteboard.m */; };
-		13B202041BFB948C00C07393 /* RCTPointAnnotation.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B202031BFB948C00C07393 /* RCTPointAnnotation.m */; };
+		13B202041BFB948C00C07393 /* RCTMapAnnotation.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B202031BFB948C00C07393 /* RCTMapAnnotation.m */; };
 		13C156051AB1A2840079392D /* RCTWebView.m in Sources */ = {isa = PBXBuildFile; fileRef = 13C156021AB1A2840079392D /* RCTWebView.m */; };
 		13C156061AB1A2840079392D /* RCTWebViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13C156041AB1A2840079392D /* RCTWebViewManager.m */; };
 		13CC8A821B17642100940AE7 /* RCTBorderDrawing.m in Sources */ = {isa = PBXBuildFile; fileRef = 13CC8A811B17642100940AE7 /* RCTBorderDrawing.m */; };
@@ -144,6 +145,10 @@
 		13AF1F851AE6E777005F5298 /* RCTDefines.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTDefines.h; sourceTree = "<group>"; };
 		13AF20431AE707F8005F5298 /* RCTSlider.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSlider.h; sourceTree = "<group>"; };
 		13AF20441AE707F9005F5298 /* RCTSlider.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSlider.m; sourceTree = "<group>"; };
+		13AFBC9E1C07247D00BBAEAA /* RCTMapOverlay.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTMapOverlay.h; sourceTree = "<group>"; };
+		13AFBC9F1C07247D00BBAEAA /* RCTMapOverlay.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMapOverlay.m; sourceTree = "<group>"; };
+		13AFBCA11C07287B00BBAEAA /* RCTBridgeMethod.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTBridgeMethod.h; sourceTree = "<group>"; };
+		13AFBCA21C07287B00BBAEAA /* RCTRootViewDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTRootViewDelegate.h; sourceTree = "<group>"; };
 		13B07FC71A68125100A75B9A /* Layout.c */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.c; path = Layout.c; sourceTree = "<group>"; };
 		13B07FC81A68125100A75B9A /* Layout.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = Layout.h; sourceTree = "<group>"; };
 		13B07FE71A69327A00A75B9A /* RCTAlertManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAlertManager.h; sourceTree = "<group>"; };
@@ -170,8 +175,8 @@
 		13B080241A694A8400A75B9A /* RCTWrapperViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWrapperViewController.m; sourceTree = "<group>"; };
 		13B201FF1BFB945300C07393 /* RCTPasteboard.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPasteboard.h; sourceTree = "<group>"; };
 		13B202001BFB945300C07393 /* RCTPasteboard.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPasteboard.m; sourceTree = "<group>"; };
-		13B202021BFB948C00C07393 /* RCTPointAnnotation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPointAnnotation.h; sourceTree = "<group>"; };
+		13B202021BFB948C00C07393 /* RCTMapAnnotation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTMapAnnotation.h; sourceTree = "<group>"; };
-		13B202031BFB948C00C07393 /* RCTPointAnnotation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPointAnnotation.m; sourceTree = "<group>"; };
+		13B202031BFB948C00C07393 /* RCTMapAnnotation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMapAnnotation.m; sourceTree = "<group>"; };
 		13C156011AB1A2840079392D /* RCTWebView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebView.h; sourceTree = "<group>"; };
 		13C156021AB1A2840079392D /* RCTWebView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWebView.m; sourceTree = "<group>"; };
 		13C156031AB1A2840079392D /* RCTWebViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebViewManager.h; sourceTree = "<group>"; };
@@ -342,11 +347,11 @@
 				13CC8A811B17642100940AE7 /* RCTBorderDrawing.m */,
 				13C325281AA63B6A0048765F /* RCTComponent.h */,
 				13AB90BF1B6FA36700713B4F /* RCTComponentData.h */,
+				13456E941ADAD482009F94A7 /* RCTConvert+MapKit.h */,
 				13AB90C01B6FA36700713B4F /* RCTComponentData.m */,
 				13EF7F441BC69646003F47DD /* RCTImageComponent.h */,
 				13456E911ADAD2DE009F94A7 /* RCTConvert+CoreLocation.h */,
 				13456E921ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m */,
-				13456E941ADAD482009F94A7 /* RCTConvert+MapKit.h */,
 				13456E951ADAD482009F94A7 /* RCTConvert+MapKit.m */,
 				133CAE8C1B8E5CFD00F6AD92 /* RCTDatePicker.h */,
 				133CAE8D1B8E5CFD00F6AD92 /* RCTDatePicker.m */,
@@ -354,6 +359,10 @@
 				58C571BF1AA56C1900CDF9C8 /* RCTDatePickerManager.m */,
 				14435CE11AAC4AE100FC20F4 /* RCTMap.h */,
 				14435CE21AAC4AE100FC20F4 /* RCTMap.m */,
+				13B202021BFB948C00C07393 /* RCTMapAnnotation.h */,
+				13B202031BFB948C00C07393 /* RCTMapAnnotation.m */,
+				13AFBC9E1C07247D00BBAEAA /* RCTMapOverlay.h */,
+				13AFBC9F1C07247D00BBAEAA /* RCTMapOverlay.m */,
 				14435CE31AAC4AE100FC20F4 /* RCTMapManager.h */,
 				14435CE41AAC4AE100FC20F4 /* RCTMapManager.m */,
 				83A1FE8A1B62640A00BE0E65 /* RCTModalHostView.h */,
@@ -362,8 +371,6 @@
 				83392EB21B6634E10013B15F /* RCTModalHostViewController.m */,
 				83A1FE8D1B62643A00BE0E65 /* RCTModalHostViewManager.h */,
 				83A1FE8E1B62643A00BE0E65 /* RCTModalHostViewManager.m */,
-				13B202021BFB948C00C07393 /* RCTPointAnnotation.h */,
-				13B202031BFB948C00C07393 /* RCTPointAnnotation.m */,
 				13B0800C1A69489C00A75B9A /* RCTNavigator.h */,
 				13B0800D1A69489C00A75B9A /* RCTNavigator.m */,
 				13B0800E1A69489C00A75B9A /* RCTNavigatorManager.h */,
@@ -484,6 +491,7 @@
 				83CBBA5F1A601EAA00E9B192 /* RCTBridge.m */,
 				1482F9E61B55B927000ADFF3 /* RCTBridgeDelegate.h */,
 				830213F31A654E0800B993E6 /* RCTBridgeModule.h */,
+				13AFBCA11C07287B00BBAEAA /* RCTBridgeMethod.h */,
 				83CBBACA1A6023D300E9B192 /* RCTConvert.h */,
 				83CBBACB1A6023D300E9B192 /* RCTConvert.m */,
 				13AF1F851AE6E777005F5298 /* RCTDefines.h */,
@@ -509,6 +517,7 @@
 				142014171B32094000CC17BA /* RCTPerformanceLogger.m */,
 				830A229C1A66C68A008503DA /* RCTRootView.h */,
 				830A229D1A66C68A008503DA /* RCTRootView.m */,
+				13AFBCA21C07287B00BBAEAA /* RCTRootViewDelegate.h */,
 				83CBBA961A6020BB00E9B192 /* RCTTouchHandler.h */,
 				83CBBA971A6020BB00E9B192 /* RCTTouchHandler.m */,
 				1345A83A1B265A0E00583190 /* RCTURLRequestDelegate.h */,
@@ -619,7 +628,7 @@
 				131B6AF41AF1093D00FFC3E0 /* RCTSegmentedControl.m in Sources */,
 				830A229E1A66C68A008503DA /* RCTRootView.m in Sources */,
 				13B07FF01A69327A00A75B9A /* RCTExceptionsManager.m in Sources */,
-				13B202041BFB948C00C07393 /* RCTPointAnnotation.m in Sources */,
+				13B202041BFB948C00C07393 /* RCTMapAnnotation.m in Sources */,
 				13A0C28A1B74F71200B29F6F /* RCTDevMenu.m in Sources */,
 				14C2CA711B3AC63800E6CBB2 /* RCTModuleMethod.m in Sources */,
 				13CC8A821B17642100940AE7 /* RCTBorderDrawing.m in Sources */,
@@ -658,6 +667,7 @@
 				83CBBA521A601E3B00E9B192 /* RCTLog.m in Sources */,
 				13B0801D1A69489C00A75B9A /* RCTNavItemManager.m in Sources */,
 				13E067571A70F44B002CDEE1 /* RCTView.m in Sources */,
+				13AFBCA01C07247D00BBAEAA /* RCTMapOverlay.m in Sources */,
 				13456E931ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m in Sources */,
 				137327E91AA5CF210034F82E /* RCTTabBarItemManager.m in Sources */,
 				13A1F71E1A75392D00D3D453 /* RCTKeyCommands.m in Sources */,

React/Views/RCTConvert+MapKit.h

@@ -9,21 +9,24 @@
 
 #import <MapKit/MapKit.h>
 
-#import "RCTPointAnnotation.h"
 #import "RCTConvert.h"
 
+@class RCTMapAnnotation;
+@class RCTMapOverlay;
+
 @interface RCTConvert (MapKit)
 
 + (MKCoordinateSpan)MKCoordinateSpan:(id)json;
 + (MKCoordinateRegion)MKCoordinateRegion:(id)json;
-+ (MKShape *)MKShape:(id)json;
 + (MKMapType)MKMapType:(id)json;
-+ (RCTPointAnnotation *)RCTPointAnnotation:(id)json;
 
-typedef NSArray MKShapeArray;
++ (RCTMapAnnotation *)RCTMapAnnotation:(id)json;
-+ (MKShapeArray *)MKShapeArray:(id)json;
++ (RCTMapOverlay *)RCTMapOverlay:(id)json;
 
-typedef NSArray RCTPointAnnotationArray;
+typedef NSArray RCTMapAnnotationArray;
-+ (RCTPointAnnotationArray *)RCTPointAnnotationArray:(id)json;
++ (NSArray<RCTMapAnnotation *> *)RCTMapAnnotationArray:(id)json;
+
+typedef NSArray RCTMapOverlayArray;
++ (NSArray<RCTMapOverlay *> *)RCTMapOverlayArray:(id)json;
 
 @end

React/Views/RCTConvert+MapKit.m

@@ -9,7 +9,8 @@
 
 #import "RCTConvert+MapKit.h"
 #import "RCTConvert+CoreLocation.h"
-#import "RCTPointAnnotation.h"
+#import "RCTMapAnnotation.h"
+#import "RCTMapOverlay.h"
 
 @implementation RCTConvert(MapKit)
 
@@ -30,45 +31,52 @@
   };
 }
 
-+ (MKShape *)MKShape:(id)json
-{
-  json = [self NSDictionary:json];
-
-  // TODO: more shape types
-  MKShape *shape = [MKPointAnnotation new];
-  shape.coordinate = [self CLLocationCoordinate2D:json];
-  shape.title = [RCTConvert NSString:json[@"title"]];
-  shape.subtitle = [RCTConvert NSString:json[@"subtitle"]];
-  return shape;
-}
-
-RCT_ARRAY_CONVERTER(MKShape)
-
 RCT_ENUM_CONVERTER(MKMapType, (@{
   @"standard": @(MKMapTypeStandard),
   @"satellite": @(MKMapTypeSatellite),
   @"hybrid": @(MKMapTypeHybrid),
 }), MKMapTypeStandard, integerValue)
 
-+ (RCTPointAnnotation *)RCTPointAnnotation:(id)json
++ (RCTMapAnnotation *)RCTMapAnnotation:(id)json
 {
   json = [self NSDictionary:json];
-  RCTPointAnnotation *shape = [RCTPointAnnotation new];
+  RCTMapAnnotation *annotation = [RCTMapAnnotation new];
-  shape.coordinate = [self CLLocationCoordinate2D:json];
+  annotation.coordinate = [self CLLocationCoordinate2D:json];
-  shape.title = [RCTConvert NSString:json[@"title"]];
+  annotation.title = [RCTConvert NSString:json[@"title"]];
-  shape.subtitle = [RCTConvert NSString:json[@"subtitle"]];
+  annotation.subtitle = [RCTConvert NSString:json[@"subtitle"]];
-  shape.identifier = [RCTConvert NSString:json[@"id"]];
+  annotation.identifier = [RCTConvert NSString:json[@"id"]];
-  shape.hasLeftCallout = [RCTConvert BOOL:json[@"hasLeftCallout"]];
+  annotation.hasLeftCallout = [RCTConvert BOOL:json[@"hasLeftCallout"]];
-  shape.hasRightCallout = [RCTConvert BOOL:json[@"hasRightCallout"]];
+  annotation.hasRightCallout = [RCTConvert BOOL:json[@"hasRightCallout"]];
-  shape.animateDrop = [RCTConvert BOOL:json[@"animateDrop"]];
+  annotation.animateDrop = [RCTConvert BOOL:json[@"animateDrop"]];
-  shape.tintColor = [RCTConvert UIColor:json[@"tintColor"]];
+  annotation.tintColor = [RCTConvert UIColor:json[@"tintColor"]];
-  shape.image = [RCTConvert UIImage:json[@"image"]];
+  annotation.image = [RCTConvert UIImage:json[@"image"]];
-  if (shape.tintColor && shape.image) {
+  if (annotation.tintColor && annotation.image) {
-    shape.image = [shape.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+    annotation.image = [annotation.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
   }
-  return shape;
+  return annotation;
 }
 
-RCT_ARRAY_CONVERTER(RCTPointAnnotation)
+RCT_ARRAY_CONVERTER(RCTMapAnnotation)
+
++ (RCTMapOverlay *)RCTMapOverlay:(id)json
+{
+  json = [self NSDictionary:json];
+  NSArray<NSDictionary *> *locations = [RCTConvert NSDictionaryArray:json[@"coordinates"]];
+  CLLocationCoordinate2D coordinates[locations.count];
+  NSUInteger index = 0;
+  for (NSDictionary *location in locations) {
+    coordinates[index++] = [RCTConvert CLLocationCoordinate2D:location];
+  }
+
+  RCTMapOverlay *overlay = [RCTMapOverlay polylineWithCoordinates:coordinates
+                                                            count:locations.count];
+
+  overlay.strokeColor = [RCTConvert UIColor:json[@"strokeColor"]];
+  overlay.identifier = [RCTConvert NSString:json[@"id"]];
+  overlay.lineWidth = [RCTConvert CGFloat:json[@"lineWidth"] ?: @1];
+  return overlay;
+}
+
+RCT_ARRAY_CONVERTER(RCTMapOverlay)
 
 @end

React/Views/RCTMap.h

@@ -13,9 +13,9 @@
 #import "RCTConvert+MapKit.h"
 #import "RCTComponent.h"
 
-extern const CLLocationDegrees RCTMapDefaultSpan;
+RCT_EXTERN const CLLocationDegrees RCTMapDefaultSpan;
-extern const NSTimeInterval RCTMapRegionChangeObserveInterval;
+RCT_EXTERN const NSTimeInterval RCTMapRegionChangeObserveInterval;
-extern const CGFloat RCTMapZoomBoundBuffer;
+RCT_EXTERN const CGFloat RCTMapZoomBoundBuffer;
 
 @interface RCTMap: MKMapView
 
@@ -25,11 +25,13 @@ extern const CGFloat RCTMapZoomBoundBuffer;
 @property (nonatomic, assign) CGFloat maxDelta;
 @property (nonatomic, assign) UIEdgeInsets legalLabelInsets;
 @property (nonatomic, strong) NSTimer *regionChangeObserveTimer;
-@property (nonatomic, copy) NSArray<NSString *> *annotationIds;
+@property (nonatomic, copy) NSArray<NSString *> *annotationIDs;
+@property (nonatomic, copy) NSArray<NSString *> *overlayIDs;
 
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
 @property (nonatomic, copy) RCTBubblingEventBlock onPress;
 
-- (void)setAnnotations:(RCTPointAnnotationArray *)annotations;
+- (void)setAnnotations:(RCTMapAnnotationArray *)annotations;
+- (void)setOverlays:(RCTMapOverlayArray *)overlays;
 
 @end

React/Views/RCTMap.m

@@ -11,6 +11,8 @@
 
 #import "RCTEventDispatcher.h"
 #import "RCTLog.h"
+#import "RCTMapAnnotation.h"
+#import "RCTMapOverlay.h"
 #import "RCTUtils.h"
 
 const CLLocationDegrees RCTMapDefaultSpan = 0.005;
@@ -107,32 +109,34 @@ const CGFloat RCTMapZoomBoundBuffer = 0.01;
   [super setRegion:region animated:animated];
 }
 
-- (void)setAnnotations:(RCTPointAnnotationArray *)annotations
+// TODO: this doesn't preserve order. Should it? If so we should change the
+// algorithm. If not, it would be more efficient to use an NSSet
+- (void)setAnnotations:(RCTMapAnnotationArray *)annotations
 {
-  NSMutableArray<NSString *> *newAnnotationIds = [NSMutableArray new];
+  NSMutableArray<NSString *> *newAnnotationIDs = [NSMutableArray new];
-  NSMutableArray<RCTPointAnnotation *> *annotationsToDelete = [NSMutableArray new];
+  NSMutableArray<RCTMapAnnotation *> *annotationsToDelete = [NSMutableArray new];
-  NSMutableArray<RCTPointAnnotation *> *annotationsToAdd = [NSMutableArray new];
+  NSMutableArray<RCTMapAnnotation *> *annotationsToAdd = [NSMutableArray new];
 
-  for (RCTPointAnnotation *annotation in annotations) {
+  for (RCTMapAnnotation *annotation in annotations) {
-    if (![annotation isKindOfClass:[RCTPointAnnotation class]]) {
+    if (![annotation isKindOfClass:[RCTMapAnnotation class]]) {
       continue;
     }
 
-    [newAnnotationIds addObject:annotation.identifier];
+    [newAnnotationIDs addObject:annotation.identifier];
 
-    // If the current set does not contain the new annotation, mark it as add
+    // If the current set does not contain the new annotation, mark it to add
-    if (![self.annotationIds containsObject:annotation.identifier]) {
+    if (![_annotationIDs containsObject:annotation.identifier]) {
       [annotationsToAdd addObject:annotation];
     }
   }
 
-  for (RCTPointAnnotation *annotation in self.annotations) {
+  for (RCTMapAnnotation *annotation in self.annotations) {
-    if (![annotation isKindOfClass:[RCTPointAnnotation class]]) {
+    if (![annotation isKindOfClass:[RCTMapAnnotation class]]) {
       continue;
     }
 
-    // If the new set does not contain an existing annotation, mark it as delete
+    // If the new set does not contain an existing annotation, mark it to delete
-    if (![newAnnotationIds containsObject:annotation.identifier]) {
+    if (![newAnnotationIDs containsObject:annotation.identifier]) {
       [annotationsToDelete addObject:annotation];
     }
   }
@@ -145,14 +149,51 @@ const CGFloat RCTMapZoomBoundBuffer = 0.01;
     [self addAnnotations:(NSArray<id<MKAnnotation>> *)annotationsToAdd];
   }
 
-  NSMutableArray<NSString *> *newIds = [NSMutableArray new];
+  self.annotationIDs = newAnnotationIDs;
-  for (RCTPointAnnotation *annotation in self.annotations) {
+}
-    if ([annotation isKindOfClass:[MKUserLocation class]]) {
+
+// TODO: this doesn't preserve order. Should it? If so we should change the
+// algorithm. If not, it would be more efficient to use an NSSet
+- (void)setOverlays:(RCTMapOverlayArray *)overlays
+{
+  NSMutableArray *newOverlayIDs = [NSMutableArray new];
+  NSMutableArray *overlaysToDelete = [NSMutableArray new];
+  NSMutableArray *overlaysToAdd = [NSMutableArray new];
+
+  for (RCTMapOverlay *overlay in overlays) {
+    if (![overlay isKindOfClass:[RCTMapOverlay class]]) {
       continue;
     }
-    [newIds addObject:annotation.identifier];
+
+    [newOverlayIDs addObject:overlay.identifier];
+
+    // If the current set does not contain the new annotation, mark it to add
+    if (![_annotationIDs containsObject:overlay.identifier]) {
+      [overlaysToAdd addObject:overlay];
+    }
   }
-  self.annotationIds = newIds;
+
+  for (RCTMapOverlay *overlay in self.overlays) {
+    if (![overlay isKindOfClass:[RCTMapOverlay class]]) {
+      continue;
+    }
+
+    // If the new set does not contain an existing annotation, mark it to delete
+    if (![newOverlayIDs containsObject:overlay.identifier]) {
+      [overlaysToDelete addObject:overlay];
+    }
+  }
+
+  if (overlaysToDelete.count) {
+    [self removeOverlays:(NSArray<id<MKOverlay>> *)overlaysToDelete];
+  }
+
+  if (overlaysToAdd.count) {
+    [self addOverlays:(NSArray<id<MKOverlay>> *)overlaysToAdd
+                level:MKOverlayLevelAboveRoads];
+  }
+
+  self.overlayIDs = newOverlayIDs;
 }
 
 @end

React/Views/RCTMapAnnotation.h

@@ -9,7 +9,7 @@
 
 #import <MapKit/MapKit.h>
 
-@interface RCTPointAnnotation : MKPointAnnotation <MKAnnotation>
+@interface RCTMapAnnotation : MKPointAnnotation <MKAnnotation>
 
 @property (nonatomic, copy) NSString *identifier;
 @property (nonatomic, assign) BOOL hasLeftCallout;

React/Views/RCTMapAnnotation.m

@@ -7,8 +7,8 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-#import "RCTPointAnnotation.h"
+#import "RCTMapAnnotation.h"
 
-@implementation RCTPointAnnotation
+@implementation RCTMapAnnotation
 
 @end

React/Views/RCTMapManager.m

@@ -16,7 +16,8 @@
 #import "RCTMap.h"
 #import "RCTUtils.h"
 #import "UIView+React.h"
-#import "RCTPointAnnotation.h"
+#import "RCTMapAnnotation.h"
+#import "RCTMapOverlay.h"
 
 #import <MapKit/MapKit.h>
 
@@ -48,7 +49,8 @@ RCT_EXPORT_VIEW_PROPERTY(maxDelta, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(minDelta, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(legalLabelInsets, UIEdgeInsets)
 RCT_EXPORT_VIEW_PROPERTY(mapType, MKMapType)
-RCT_EXPORT_VIEW_PROPERTY(annotations, RCTPointAnnotationArray)
+RCT_EXPORT_VIEW_PROPERTY(annotations, RCTMapAnnotationArray)
+RCT_EXPORT_VIEW_PROPERTY(overlays, RCTMapOverlayArray)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
 RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
@@ -71,9 +73,9 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
 
 - (void)mapView:(RCTMap *)mapView didSelectAnnotationView:(MKAnnotationView *)view
 {
-  if (mapView.onPress && [view.annotation isKindOfClass:[RCTPointAnnotation class]]) {
+  if (mapView.onPress && [view.annotation isKindOfClass:[RCTMapAnnotation class]]) {
 
-    RCTPointAnnotation *annotation = (RCTPointAnnotation *)view.annotation;
+    RCTMapAnnotation *annotation = (RCTMapAnnotation *)view.annotation;
     mapView.onPress(@{
       @"action": @"annotation-click",
       @"annotation": @{
@@ -87,9 +89,9 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
   }
 }
 
-- (MKAnnotationView *)mapView:(__unused MKMapView *)mapView viewForAnnotation:(RCTPointAnnotation *)annotation
+- (MKAnnotationView *)mapView:(__unused MKMapView *)mapView viewForAnnotation:(RCTMapAnnotation *)annotation
 {
-  if (![annotation isKindOfClass:[RCTPointAnnotation class]]) {
+  if (![annotation isKindOfClass:[RCTMapAnnotation class]]) {
     return nil;
   }
 
@@ -142,12 +144,24 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
   return annotationView;
 }
 
+- (MKOverlayRenderer *)mapView:(__unused MKMapView *)mapView rendererForOverlay:(RCTMapOverlay *)overlay
+{
+  if ([overlay isKindOfClass:[RCTMapOverlay class]]) {
+    MKPolylineRenderer *polylineRenderer = [[MKPolylineRenderer alloc] initWithPolyline:overlay];
+    polylineRenderer.strokeColor = overlay.strokeColor;
+    polylineRenderer.lineWidth = overlay.lineWidth;
+    return polylineRenderer;
+  } else {
+    return nil;
+  }
+}
+
 - (void)mapView:(RCTMap *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control
 {
   if (mapView.onPress) {
 
     // Pass to js
-    RCTPointAnnotation *annotation = (RCTPointAnnotation *)view.annotation;
+    RCTMapAnnotation *annotation = (RCTMapAnnotation *)view.annotation;
     mapView.onPress(@{
       @"side": (control == view.leftCalloutAccessoryView) ? @"left" : @"right",
       @"action": @"callout-click",

React/Views/RCTMapOverlay.h

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <MapKit/MapKit.h>
+
+@interface RCTMapOverlay : MKPolyline <MKAnnotation>
+
+@property (nonatomic, copy) NSString *identifier;
+@property (nonatomic, strong) UIColor *strokeColor;
+@property (nonatomic, assign) CGFloat lineWidth;
+
+@end

React/Views/RCTMapOverlay.m

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTMapOverlay.h"
+
+@implementation RCTMapOverlay
+
+@end