@maplibre/maplibre-react-native 11.0.0-alpha.42 → 11.0.0-alpha.43

package/android/src/main/java/org/maplibre/reactnative/events/PointAnnotationClickEvent.java

@@ -7,7 +7,7 @@ import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
 
 import org.maplibre.android.geometry.LatLng;
-import org.maplibre.reactnative.components.annotations.MLRNPointAnnotation;
+import org.maplibre.reactnative.components.annotations.pointannotation.MLRNPointAnnotation;
 import org.maplibre.reactnative.events.constants.EventKeys;
 import org.maplibre.reactnative.events.constants.EventTypes;
 import org.maplibre.reactnative.utils.GeoJSONUtils;

package/android/src/main/java/org/maplibre/reactnative/events/PointAnnotationDragEvent.java

@@ -7,7 +7,7 @@ import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
 
 import org.maplibre.android.geometry.LatLng;
-import org.maplibre.reactnative.components.annotations.MLRNPointAnnotation;
+import org.maplibre.reactnative.components.annotations.pointannotation.MLRNPointAnnotation;
 import org.maplibre.reactnative.events.constants.EventKeys;
 import org.maplibre.reactnative.events.constants.EventTypes;
 import org.maplibre.reactnative.utils.GeoJSONUtils;

package/android/src/main/java/org/maplibre/reactnative/events/PointAnnotationEvent.kt

@@ -0,0 +1,30 @@
+package org.maplibre.reactnative.events
+
+import android.graphics.PointF
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import org.maplibre.android.geometry.LatLng
+import org.maplibre.reactnative.utils.GeoJSONUtils
+
+class PointAnnotationEvent(
+    surfaceId: Int,
+    viewId: Int,
+    private val internalEventName: String,
+    private val annotationId: String?,
+    private val latLng: LatLng,
+    private val screenPoint: PointF,
+) : Event<PointAnnotationEvent>(surfaceId, viewId) {
+    override fun getEventName() = internalEventName
+
+    override fun getEventData(): WritableMap {
+        return Arguments.createMap().apply {
+            putString("id", annotationId ?: "")
+            putArray("lngLat", GeoJSONUtils.fromLatLng(latLng))
+            putArray("point", Arguments.createArray().apply {
+                pushDouble(screenPoint.x.toDouble())
+                pushDouble(screenPoint.y.toDouble())
+            })
+        }
+    }
+}

package/ios/components/annotations/callout/MLRNCalloutComponentView.h

@@ -0,0 +1,10 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MLRNCalloutComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/components/annotations/callout/MLRNCalloutComponentView.mm

@@ -0,0 +1,91 @@
+#import "MLRNCalloutComponentView.h"
+
+#import <react/renderer/components/MapLibreReactNativeSpec/ComponentDescriptors.h>
+#import <react/renderer/components/MapLibreReactNativeSpec/EventEmitters.h>
+#import <react/renderer/components/MapLibreReactNativeSpec/Props.h>
+#import <react/renderer/components/MapLibreReactNativeSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#import <React/RCTConversions.h>
+#import "MLRNCallout.h"
+
+using namespace facebook::react;
+
+// MARK: - MLRNCalloutComponentView
+
+@interface MLRNCalloutComponentView () <RCTMLRNCalloutViewProtocol>
+
+@end
+
+@implementation MLRNCalloutComponentView {
+  MLRNCallout *_view;
+}
+
++ (BOOL)shouldBeRecycled {
+  return NO;
+}
+
+- (UIView *)contentView {
+  // Return _view so PointAnnotation's mountChildComponentView can detect this as a Callout
+  // via: [contentView isKindOfClass:[MLRNCallout class]]
+  return _view;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const MLRNCalloutProps>();
+    _props = defaultProps;
+    [self prepareView];
+  }
+
+  return self;
+}
+
+- (void)prepareView {
+  _view = [[MLRNCallout alloc] init];
+}
+
+#pragma mark - Child Mounting
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                          index:(NSInteger)index {
+  // Add children to _view (the MLRNCallout) so they're visible when presented
+  // This includes the Animated.View with title/content that React renders
+  [_view insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                            index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+
+- (void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const facebook::react::LayoutMetrics &)oldLayoutMetrics {
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+
+  // Forward layout to _view so the callout has the correct size
+  CGRect frame = CGRectMake(
+    layoutMetrics.frame.origin.x,
+    layoutMetrics.frame.origin.y,
+    layoutMetrics.frame.size.width,
+    layoutMetrics.frame.size.height
+  );
+  _view.frame = frame;
+}
+
+#pragma mark - RCTComponentViewProtocol
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  [super updateProps:props oldProps:oldProps];
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<MLRNCalloutComponentDescriptor>();
+}
+
+@end
+
+Class<RCTComponentViewProtocol> MLRNCalloutCls(void) {
+  return MLRNCalloutComponentView.class;
+}

package/ios/components/annotations/point-annotation/MLRNPointAnnotation.h

@@ -0,0 +1,44 @@
+#import <React/RCTComponent.h>
+#import <React/RCTView.h>
+#import <UIKit/UIKit.h>
+#import "MLRNCallout.h"
+
+#import <MapLibre/MapLibre.h>
+
+@interface MLRNPointAnnotation : MLNAnnotationView <MLNAnnotation>
+
+@property (nonatomic, weak) MLNMapView *map;
+@property (nonatomic, strong) MLRNCallout *calloutView;
+
+@property (nonatomic, copy) NSString *id;
+@property (nonatomic, copy) NSString *reactTitle;
+@property (nonatomic, copy) NSString *reactSnippet;
+
+@property (nonatomic, copy) NSArray<NSNumber *> *reactLngLat;
+@property (nonatomic, assign) CLLocationCoordinate2D coordinate;
+
+@property (nonatomic, copy) NSDictionary<NSString *, NSNumber *> *anchor;
+@property (nonatomic, copy) NSDictionary<NSString *, NSNumber *> *offset;
+
+@property (nonatomic, copy) void (^reactOnSelected)(NSDictionary *event);
+@property (nonatomic, copy) void (^reactOnDeselected)(NSDictionary *event);
+@property (nonatomic, copy) void (^reactOnDragStart)(NSDictionary *event);
+@property (nonatomic, copy) void (^reactOnDrag)(NSDictionary *event);
+@property (nonatomic, copy) void (^reactOnDragEnd)(NSDictionary *event);
+
+@property (nonatomic, assign) BOOL reactSelected;
+@property (nonatomic, assign) BOOL reactDraggable;
+@property (nonatomic, assign) BOOL hasExplicitZIndex;
+@property (nonatomic, assign) CGFloat explicitZIndex;
+
+// For Fabric: track custom child count without adding to view hierarchy
+@property (nonatomic, assign) NSInteger customChildCount;
+
+- (MLNAnnotationView *)getAnnotationView;
+- (NSDictionary *)makeEventPayload;
+- (void)setZIndex:(CGFloat)zIndex;
+
+- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex;
+- (void)removeReactSubview:(UIView *)subview;
+
+@end

package/ios/components/annotations/{MLRNPointAnnotation.m → point-annotation/MLRNPointAnnotation.m}

@@ -49,6 +49,11 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
   [self _setCenterOffset:self.frame];
 }
 
+- (void)setOffset:(NSDictionary<NSString *, NSNumber *> *)offset {
+  _offset = offset;
+  [self _setCenterOffset:self.frame];
+}
+
 - (void)setMap:(MLNMapView *)map {
   if (map == nil) {
     [_map removeAnnotation:self];
@@ -83,8 +88,8 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
   self.draggable = _reactDraggable;
 }
 
-- (void)setReactCoordinate:(NSString *)reactCoordinate {
-  _reactCoordinate = reactCoordinate;
+- (void)setReactLngLat:(NSArray<NSNumber *> *)reactLngLat {
+  _reactLngLat = reactLngLat;
   [self _updateCoordinate];
 }
 
@@ -104,16 +109,28 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
   return _reactTitle;
 }
 
+- (void)setZIndex:(CGFloat)zIndex {
+  _hasExplicitZIndex = YES;
+  _explicitZIndex = zIndex;
+  self.layer.zPosition = zIndex;
+}
+
 - (MLNAnnotationView *)getAnnotationView {
-  if (self.reactSubviews.count == 0) {
+  // Check both reactSubviews (old arch) and customChildCount (Fabric)
+  BOOL hasCustomChildren = (self.reactSubviews.count > 0) || (self.customChildCount > 0);
+
+  if (!hasCustomChildren) {
     // default pin view
     return nil;
   } else {
     // custom view
     self.enabled = YES;
-    const CGFloat defaultZPosition = 0.0;
-    if (self.layer.zPosition == defaultZPosition) {
-      self.layer.zPosition = [self _getZPosition];
+    // Only use latitude-based zPosition if no explicit zIndex was set
+    if (!_hasExplicitZIndex) {
+      const CGFloat defaultZPosition = 0.0;
+      if (self.layer.zPosition == defaultZPosition) {
+        self.layer.zPosition = [self _getZPosition];
+      }
     }
     [self addGestureRecognizer:customViewTap];
     return self;
@@ -130,45 +147,54 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
 }
 
 - (void)_setCenterOffset:(CGRect)frame {
-  if (frame.size.width == 0 || frame.size.height == 0 || _anchor == nil) {
+  if (frame.size.width == 0 || frame.size.height == 0) {
     return;
   }
 
-  float x = [_anchor[@"x"] floatValue];
-  float y = [_anchor[@"y"] floatValue];
+  float dx = 0;
+  float dy = 0;
+
+  // Apply anchor offset (anchor is a percentage of view dimensions)
+  if (_anchor != nil) {
+    float x = [_anchor[@"x"] floatValue];
+    float y = [_anchor[@"y"] floatValue];
 
-  float dx = -(x * frame.size.width - (frame.size.width / 2));
-  float dy = -(y * frame.size.height - (frame.size.height / 2));
+    dx = -(x * frame.size.width - (frame.size.width / 2));
+    dy = -(y * frame.size.height - (frame.size.height / 2));
 
-  // special cases 0 and 1
+    // special cases 0 and 1
+    if (x == 0) {
+      dx = frame.size.width / 2;
+    } else if (x == 1) {
+      dx = -frame.size.width / 2;
+    }
 
-  if (x == 0) {
-    dx = frame.size.width / 2;
-  } else if (x == 1) {
-    dx = -frame.size.width / 2;
+    if (y == 0) {
+      dy = frame.size.height / 2;
+    } else if (y == 1) {
+      dy = -frame.size.height / 2;
+    }
   }
 
-  if (y == 0) {
-    dy = frame.size.height / 2;
-  } else if (y == 1) {
-    dy = -frame.size.height / 2;
+  // Apply pixel offset
+  if (_offset != nil) {
+    dx += [_offset[@"x"] floatValue];
+    dy += [_offset[@"y"] floatValue];
   }
 
   self.centerOffset = CGVectorMake(dx, dy);
 }
 
 - (void)_updateCoordinate {
-  if (_reactCoordinate == nil) {
+  if (_reactLngLat == nil || _reactLngLat.count < 2) {
     return;
   }
 
-  MLNPointFeature *feature = (MLNPointFeature *)[MLRNUtils shapeFromGeoJSON:_reactCoordinate];
-  if (feature == nil) {
-    return;
-  }
+  double lng = [_reactLngLat[0] doubleValue];
+  double lat = [_reactLngLat[1] doubleValue];
 
   dispatch_async(dispatch_get_main_queue(), ^{
-    self.coordinate = feature.coordinate;
+    self.coordinate = CLLocationCoordinate2DMake(lat, lng);
   });
 }
 
@@ -187,29 +213,37 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
   return self.frame.size.width > 0 && self.frame.size.height > 0;
 }
 
+- (NSDictionary *)makeEventPayload {
+  NSMutableDictionary *payload = [NSMutableDictionary dictionary];
+  payload[@"id"] = _id ?: @"";
+  payload[@"lngLat"] = @[@(self.coordinate.longitude), @(self.coordinate.latitude)];
+
+  CGPoint screenPoint = [_map convertCoordinate:self.coordinate toPointToView:_map];
+  payload[@"point"] = @[@(screenPoint.x), @(screenPoint.y)];
+
+  return payload;
+}
+
 - (void)setDragState:(MLNAnnotationViewDragState)dragState animated:(BOOL)animated {
   [super setDragState:dragState animated:animated];
   switch (dragState) {
     case MLNAnnotationViewDragStateStarting: {
-      if (self.onDragStart != nil) {
-        MLRNMapTouchEvent *event = [MLRNMapTouchEvent makeAnnotationTapEvent:self];
-        self.onDragStart([event toJSON]);
+      if (self.reactOnDragStart != nil) {
+        self.reactOnDragStart([self makeEventPayload]);
       }
       break;
     }
 
     case MLNAnnotationViewDragStateDragging:
-      if (self.onDrag != nil) {
-        MLRNMapTouchEvent *event = [MLRNMapTouchEvent makeAnnotationTapEventOnDrag:self];
-        self.onDrag([event toJSON]);
+      if (self.reactOnDrag != nil) {
+        self.reactOnDrag([self makeEventPayload]);
       }
       break;
 
     case MLNAnnotationViewDragStateEnding:
     case MLNAnnotationViewDragStateCanceling: {
-      if (self.onDragEnd != nil) {
-        MLRNMapTouchEvent *event = [MLRNMapTouchEvent makeAnnotationTapEvent:self];
-        self.onDragEnd([event toJSON]);
+      if (self.reactOnDragEnd != nil) {
+        self.reactOnDragEnd([self makeEventPayload]);
       }
       break;
     }

package/ios/components/annotations/point-annotation/MLRNPointAnnotationComponentView.h

@@ -0,0 +1,10 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface MLRNPointAnnotationComponentView : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END