Fix map annotation view layout bug

Summary:
public
When using the custom view option for MapView annotations, the view would sometimes be top-left-aligned on the coordinate instead of centered on it. This fixes that.

Reviewed By: fredliu

Differential Revision: D2776380

fb-gh-sync-id: 793bfd1c3f5b1c923caf031e01b1f6c90e544472

Libraries/Components/MapView/MapView.js

@@ -270,7 +270,7 @@ const MapView = React.createClass({
 
   render: function() {
     let children = [], {annotations, overlays} = this.props;
-    annotations = annotations && annotations.map((annotation: Object, index: number) => {
+    annotations = annotations && annotations.map((annotation: Object) => {
       let {
         id,
         image,
@@ -329,10 +329,10 @@ const MapView = React.createClass({
           }
         });
       }
-      return {
+      let result = {
         ...annotation,
         tintColor: tintColor && processColor(tintColor),
-        image: image && resolveAssetSource(image),
+        image,
         viewIndex,
         leftCalloutViewIndex,
         rightCalloutViewIndex,
@@ -341,17 +341,20 @@ const MapView = React.createClass({
         leftCalloutView: undefined,
         rightCalloutView: undefined,
         detailCalloutView: undefined,
-        id: id || String(index),
       };
+      result.id = id || encodeURIComponent(JSON.stringify(result));
+      result.image = image && resolveAssetSource(image);
+      return result;
     });
-    overlays = overlays && overlays.map((overlay: Object, index: number) => {
+    overlays = overlays && overlays.map((overlay: Object) => {
       let {id, fillColor, strokeColor} = overlay;
-      return {
+      let result = {
         ...overlay,
         strokeColor: strokeColor && processColor(strokeColor),
         fillColor: fillColor && processColor(fillColor),
-        id: id || String(index),
       };
+      result.id = id || encodeURIComponent(JSON.stringify(result));
+      return result;
     });
 
     // TODO: these should be separate events, to reduce bridge traffic

React/Views/RCTMapManager.m

@@ -41,6 +41,32 @@ RCT_ENUM_CONVERTER(MKPinAnnotationColor, (@{
 
 #endif
 
+@interface RCTMapAnnotationView : MKAnnotationView
+
+@property (nonatomic, strong) UIView *contentView;
+
+@end
+
+@implementation RCTMapAnnotationView
+
+- (void)setContentView:(UIView *)contentView
+{
+  [_contentView removeFromSuperview];
+  _contentView = contentView;
+  [self addSubview:_contentView];
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  self.bounds = (CGRect){
+    CGPointZero,
+    _contentView.frame.size,
+  };
+}
+
+@end
+
 @interface RCTMapManager() <MKMapViewDelegate>
 
 @end
@@ -136,19 +162,14 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
   annotationView.clipsToBounds = YES;
   if (annotation.viewIndex != NSNotFound) {
 
-    NSString *const reuseIdentifier = @"RCTCustomViewAnnotation";
+    NSString *reuseIdentifier = NSStringFromClass([RCTMapAnnotationView class]);
     annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:reuseIdentifier];
     if (!annotationView) {
-      annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation
-                                                    reuseIdentifier:reuseIdentifier];
-    }
-
-    for (UIView *view in annotationView.subviews) {
-      [view removeFromSuperview];
+      annotationView = [[RCTMapAnnotationView alloc] initWithAnnotation:annotation
+                                                        reuseIdentifier:reuseIdentifier];
     }
     UIView *reactView = mapView.reactSubviews[annotation.viewIndex];
-    annotationView.bounds = reactView.frame;
-    [annotationView addSubview:reactView];
+    ((RCTMapAnnotationView *)annotationView).contentView = reactView;
 
   } else if (annotation.image) {