add reuseIdentifier usage

API.md

@@ -43,7 +43,7 @@ import { MapView } from 'react-native-mapbox-gl';
 | `contentInset` | `array` | Optional | Change the padding of the viewport of the map. Offset is in pixels. `[top, right, bottom, left]` `[0, 0, 0, 0]` |
 | `style`  | React styles | Optional | Styles the actual map view container | N/A |
 | `debugActive`  | `boolean` | Optional | Turns on debug mode. | `false` |
-| `children` | `array` | Optional |  An array of custom Annotation views (iOS only). You must import Annotation view from the component and put your custom React Native view inside | null |
+| `children` | `array` | Optional |  An array of custom Annotation views (iOS only). You must import Annotation view from the component and put your custom React Native view inside. Annotation view must have unique id prop defined as well as coordinate | null |
 
 
 ## Callback props

ios/RCTMapboxGL/RCTMapboxAnnotation.h

@@ -19,6 +19,15 @@
  */
 @property (nonatomic) CLLocationCoordinate2D coordinate;
 
+/**
+ The string containing the annotation’s title.
+ 
+ Although this property is optional, if you support the selection of annotations
+ in your map view, you are expected to provide this property. This string is
+ displayed in the callout for the associated annotation.
+ */
+@property (nonatomic, copy, nullable) NSString *id;
+
 /**
  The string containing the annotation’s title.
  

ios/RCTMapboxGL/RCTMapboxAnnotation.m

@@ -17,4 +17,14 @@
 @implementation RCTMapboxAnnotation {
 }
 
+-(NSString *)reuseIdentifier {
+    return self.id;
+}
+
+-(void)layoutSubviews {
+    [super layoutSubviews];
+    [self.map layoutSubviews];
+}
+
+
 @end

ios/RCTMapboxGL/RCTMapboxAnnotationManager.m

@@ -33,7 +33,7 @@ RCT_EXPORT_MODULE()
     return marker;
 }
 
-
+RCT_EXPORT_VIEW_PROPERTY(id, NSString)
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(subtitle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(coordinate, CLLocationCoordinate2D)

ios/RCTMapboxGL/RCTMapboxGL.h

@@ -66,6 +66,7 @@
 @property (nonatomic, copy) RCTDirectEventBlock onFinishLoadingMap;
 @property (nonatomic, copy) RCTDirectEventBlock onStartLoadingMap;
 @property (nonatomic, copy) RCTDirectEventBlock onLocateUserFailed;
+@property (nonatomic, copy) NSArray *custom;
 
 @end
 

ios/RCTMapboxGL/RCTMapboxGL.m

@@ -52,7 +52,7 @@
     //
     // Implementation based on RCTTextField, another component with indirect children
     // https://github.com/facebook/react-native/blob/v0.16.0/Libraries/Text/RCTTextField.m#L20
-    NSMutableArray<UIView *> *_reactSubviews;
+    NSMutableDictionary<NSString *, UIView *> *_reactSubviews;
 }
 
 // View creation
@@ -64,7 +64,7 @@
         _clipsToBounds = YES;
         _finishedLoading = NO;
         _annotations = [NSMutableDictionary dictionary];
-        _reactSubviews = [NSMutableArray array];
+        _reactSubviews = [NSMutableDictionary dictionary];
     }
 
     return self;
@@ -120,8 +120,8 @@
     }
 
     [self addSubview:_map];
-    for (UIView *annotations in _reactSubviews) {
-        [_map addAnnotation:annotations];
+    for (NSString *key in [_reactSubviews allKeys]) {
+        [_map addAnnotation:_reactSubviews[key]];
     }
     
     [self layoutSubviews];
@@ -146,23 +146,25 @@
     // Our desired API is to pass up markers/overlays as children to the mapview component.
     // This is where we intercept them and do the appropriate underlying mapview action.
     if ([subview isKindOfClass:[RCTMapboxAnnotation class]]) {
-        ((RCTMapboxAnnotation *) subview).map = self;
-        [_map addAnnotation:(id <MGLAnnotation>) subview];
+        RCTMapboxAnnotation * annotation = (RCTMapboxAnnotation *) subview;
+        annotation.map = self;
+        [_map addAnnotation:annotation];
+        NSString *key = annotation.reuseIdentifier;
+        _reactSubviews[key] = annotation;
     }
-    [_reactSubviews insertObject:(UIView *)subview atIndex:(NSUInteger) atIndex];
 }
 
 - (void)removeReactSubview:(id<RCTComponent>)subview {
     // similarly, when the children are being removed we have to do the appropriate
     // underlying mapview action here.
     if ([subview isKindOfClass:[RCTMapboxAnnotation class]]) {
-        [_map removeAnnotation:(id<MGLAnnotation>)subview];
+        RCTMapboxAnnotation * annotation = (RCTMapboxAnnotation *) subview;
+        [_reactSubviews removeObjectForKey:annotation.reuseIdentifier];
     }
-    [_reactSubviews removeObject:(UIView *)subview];
 }
 
 - (NSArray<id<RCTComponent>> *)reactSubviews {
-    return _reactSubviews;
+    return nil;
 }
 
 
@@ -247,8 +249,13 @@
 }
 
 - (nullable MGLAnnotationView *)mapView:(MGLMapView *)mapView viewForAnnotation:(id <MGLAnnotation>)annotation {
-    if (![annotation isKindOfClass:[RCTMGLAnnotation class]] ){
-        return annotation;
+    if ([annotation isKindOfClass:[RCTMapboxAnnotation class]] ){
+        RCTMapboxAnnotation *customAnnotation = (RCTMapboxAnnotation *)annotation;
+        MGLAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:customAnnotation.reuseIdentifier];
+        if (!annotationView){
+            annotationView = _reactSubviews[customAnnotation.reuseIdentifier];
+        }
+        return annotationView;
     }
     return nil;
 }