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

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];
-  shape.coordinate = [self CLLocationCoordinate2D:json];
-  shape.title = [RCTConvert NSString:json[@"title"]];
-  shape.subtitle = [RCTConvert NSString:json[@"subtitle"]];
-  shape.identifier = [RCTConvert NSString:json[@"id"]];
-  shape.hasLeftCallout = [RCTConvert BOOL:json[@"hasLeftCallout"]];
-  shape.hasRightCallout = [RCTConvert BOOL:json[@"hasRightCallout"]];
-  shape.animateDrop = [RCTConvert BOOL:json[@"animateDrop"]];
-  shape.tintColor = [RCTConvert UIColor:json[@"tintColor"]];
-  shape.image = [RCTConvert UIImage:json[@"image"]];
-  if (shape.tintColor && shape.image) {
-    shape.image = [shape.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+  RCTMapAnnotation *annotation = [RCTMapAnnotation new];
+  annotation.coordinate = [self CLLocationCoordinate2D:json];
+  annotation.title = [RCTConvert NSString:json[@"title"]];
+  annotation.subtitle = [RCTConvert NSString:json[@"subtitle"]];
+  annotation.identifier = [RCTConvert NSString:json[@"id"]];
+  annotation.hasLeftCallout = [RCTConvert BOOL:json[@"hasLeftCallout"]];
+  annotation.hasRightCallout = [RCTConvert BOOL:json[@"hasRightCallout"]];
+  annotation.animateDrop = [RCTConvert BOOL:json[@"animateDrop"]];
+  annotation.tintColor = [RCTConvert UIColor:json[@"tintColor"]];
+  annotation.image = [RCTConvert UIImage:json[@"image"]];
+  if (annotation.tintColor && annotation.image) {
+    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