@lugg/maps 0.2.0-alpha.17 → 0.2.0-alpha.18

package/android/src/main/java/com/luggmaps/LuggGoogleMapView.kt

@@ -146,10 +146,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
       view.onCreate(null)
       view.onResume()
       view.getMapAsync(this)
-      mapWrapperView?.addView(
-        view,
-        LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
-      )
+      mapWrapperView?.addView(view)
     }
   }
 
@@ -241,9 +238,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     }
 
     if (markerView.hasCustomView) {
-      // Recreate marker with custom view
-      markerView.marker?.remove()
-      addMarkerViewToMap(markerView)
+      markerView.updateIcon { addMarkerViewToMap(markerView) }
     } else {
       syncMarkerView(markerView)
     }
@@ -276,9 +271,6 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
       snippet = markerView.description
       setAnchor(markerView.anchorX, markerView.anchorY)
       zIndex = markerView.zIndex
-      if (!markerView.hasCustomView) {
-        iconView = null
-      }
     }
   }
 
@@ -296,24 +288,18 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     }
 
     val position = LatLng(markerView.latitude, markerView.longitude)
-    val iconView = markerView.iconView
-
-    (iconView.parent as? ViewGroup)?.removeView(iconView)
 
     val options = AdvancedMarkerOptions()
       .position(position)
       .title(markerView.title)
       .snippet(markerView.description)
 
-    if (markerView.hasCustomView) {
-      options.iconView(iconView)
-    }
-
     val marker = map.addMarker(options) as AdvancedMarker
     marker.setAnchor(markerView.anchorX, markerView.anchorY)
     marker.zIndex = markerView.zIndex
 
     markerView.marker = marker
+    markerView.applyIconToMarker()
   }
 
   // endregion

package/android/src/main/java/com/luggmaps/LuggMapWrapperView.kt

@@ -17,23 +17,4 @@ class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context)
       it.layout(0, 0, width, height)
     }
   }
-
-  override fun onLayout(
-    changed: Boolean,
-    left: Int,
-    top: Int,
-    right: Int,
-    bottom: Int
-  ) {
-    super.onLayout(changed, left, top, right, bottom)
-    val w = right - left
-    val h = bottom - top
-    getChildAt(0)?.let {
-      it.measure(
-        MeasureSpec.makeMeasureSpec(w, MeasureSpec.EXACTLY),
-        MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY)
-      )
-      it.layout(0, 0, w, h)
-    }
-  }
 }

package/android/src/main/java/com/luggmaps/LuggMarkerView.kt

@@ -1,10 +1,16 @@
 package com.luggmaps
 
 import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
 import android.view.View
+import android.view.ViewGroup
+import androidx.core.graphics.createBitmap
 import androidx.core.view.isNotEmpty
 import com.facebook.react.views.view.ReactViewGroup
 import com.google.android.gms.maps.model.AdvancedMarker
+import com.google.android.gms.maps.model.BitmapDescriptor
+import com.google.android.gms.maps.model.BitmapDescriptorFactory
 
 interface LuggMarkerViewDelegate {
   fun markerViewDidUpdate(markerView: LuggMarkerView)
@@ -36,23 +42,91 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   var zIndex: Float = 0f
     private set
 
+  var rasterize: Boolean = true
+    private set
+
   var didLayout: Boolean = false
     private set
 
+  var isPendingUpdate: Boolean = false
+
   val hasCustomView: Boolean
     get() = iconView.isNotEmpty()
 
-  val iconView: ReactViewGroup = object : ReactViewGroup(context) {
-    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
-      var maxWidth = 0
-      var maxHeight = 0
-      for (i in 0 until childCount) {
-        val child = getChildAt(i)
-        if (child.width > maxWidth) maxWidth = child.width
-        if (child.height > maxHeight) maxHeight = child.height
+  val iconView: ReactViewGroup = ReactViewGroup(context)
+
+  private fun measureIconViewBounds(): Pair<Int, Int> {
+    var maxWidth = 0
+    var maxHeight = 0
+    for (i in 0 until iconView.childCount) {
+      val child = iconView.getChildAt(i)
+      val childRight = child.left + child.width
+      val childBottom = child.top + child.height
+      if (childRight > maxWidth) maxWidth = childRight
+      if (childBottom > maxHeight) maxHeight = childBottom
+    }
+    return Pair(maxWidth, maxHeight)
+  }
+
+  private fun createIconBitmap(): BitmapDescriptor? {
+    val (width, height) = measureIconViewBounds()
+    if (width <= 0 || height <= 0) return null
+
+    val bitmap = createBitmap(width, height)
+    val canvas = Canvas(bitmap)
+    iconView.draw(canvas)
+    return BitmapDescriptorFactory.fromBitmap(bitmap)
+  }
+
+  private fun createIconViewWrapper(): View {
+    val (width, height) = measureIconViewBounds()
+
+    (iconView.parent as? ViewGroup)?.removeView(iconView)
+
+    return object : ReactViewGroup(context) {
+      init {
+        addView(iconView)
       }
 
-      setMeasuredDimension(maxWidth, maxHeight)
+      override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        setMeasuredDimension(width, height)
+      }
+    }
+  }
+
+  fun applyIconToMarker() {
+    val m = marker ?: return
+    if (!hasCustomView) return
+
+    if (rasterize) {
+      m.iconView = null
+      createIconBitmap()?.let { m.setIcon(it) }
+    } else {
+      m.iconView = createIconViewWrapper()
+    }
+  }
+
+  fun updateIcon(onAddMarker: () -> Unit) {
+    if (!hasCustomView) return
+    if (isPendingUpdate) return
+    isPendingUpdate = true
+
+    if (rasterize) {
+      post {
+        isPendingUpdate = false
+        if (marker == null) {
+          onAddMarker()
+        } else {
+          applyIconToMarker()
+        }
+      }
+    } else {
+      marker?.remove()
+      marker = null
+      post {
+        isPendingUpdate = false
+        onAddMarker()
+      }
     }
   }
 
@@ -92,6 +166,7 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     bottom: Int
   ) {
     super.onLayout(changed, left, top, right, bottom)
+
     if (changed && !didLayout) {
       didLayout = true
       delegate?.markerViewDidLayout(this)
@@ -120,6 +195,10 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     this.zIndex = zIndex
   }
 
+  fun setRasterize(rasterize: Boolean) {
+    this.rasterize = rasterize
+  }
+
   fun setName(name: String?) {
     this.name = name
   }
@@ -133,8 +212,4 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     delegate = null
     iconView.removeAllViews()
   }
-
-  companion object {
-    private const val TAG = "Lugg"
-  }
 }

package/android/src/main/java/com/luggmaps/LuggMarkerViewManager.kt

@@ -69,6 +69,11 @@ class LuggMarkerViewManager :
     view.setZIndex(zIndex)
   }
 
+  @ReactProp(name = "rasterize", defaultBoolean = true)
+  override fun setRasterize(view: LuggMarkerView, value: Boolean) {
+    view.setRasterize(value)
+  }
+
   companion object {
     const val NAME = "LuggMarkerView"
   }

package/ios/LuggAppleMapView.mm

@@ -267,7 +267,13 @@ using namespace luggmaps::events;
   UIView *iconView = markerView.iconView;
   CGRect frame = iconView.frame;
   if (frame.size.width > 0 && frame.size.height > 0) {
-    annotationView.frame = frame;
+    if (markerView.rasterize) {
+      annotationView.image = [markerView createIconImage];
+      annotationView.frame =
+          CGRectMake(0, 0, frame.size.width, frame.size.height);
+    } else {
+      annotationView.frame = frame;
+    }
 
     CGPoint anchor = markerView.anchor;
     annotationView.centerOffset =
@@ -478,15 +484,19 @@ using namespace luggmaps::events;
   annotationView.zPriority = markerView.zIndex;
 
   UIView *iconView = markerView.iconView;
-  [iconView removeFromSuperview];
-  [annotationView addSubview:iconView];
-
-  // Set frame and centerOffset based on iconView
   CGRect frame = iconView.frame;
+
+  if (markerView.rasterize) {
+    annotationView.image = [markerView createIconImage];
+  } else {
+    [iconView removeFromSuperview];
+    [annotationView addSubview:iconView];
+    iconView.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
+  }
+
   if (frame.size.width > 0 && frame.size.height > 0) {
     annotationView.frame =
         CGRectMake(0, 0, frame.size.width, frame.size.height);
-    iconView.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
 
     CGPoint anchor = markerView.anchor;
     annotationView.centerOffset =

package/ios/LuggGoogleMapView.mm

@@ -244,14 +244,20 @@ static NSString *const kDemoMapId = @"DEMO_MAP_ID";
   marker.snippet = markerView.markerDescription;
   marker.zIndex = (int)markerView.zIndex;
   if (markerView.hasCustomView) {
-    UIView *iconView = markerView.iconView;
-    if (marker.iconView != iconView) {
-      [iconView removeFromSuperview];
-      marker.iconView = iconView;
+    if (markerView.rasterize) {
+      marker.iconView = nil;
+      marker.icon = [markerView createIconImage];
+    } else {
+      UIView *iconView = markerView.iconView;
+      if (marker.iconView != iconView) {
+        [iconView removeFromSuperview];
+        marker.iconView = iconView;
+      }
     }
     marker.groundAnchor = markerView.anchor;
   } else {
     marker.iconView = nil;
+    marker.icon = nil;
     marker.groundAnchor = CGPointMake(0.5, 1);
   }
 }
@@ -273,16 +279,19 @@ static NSString *const kDemoMapId = @"DEMO_MAP_ID";
     return;
   }
 
-  UIView *iconView = markerView.iconView;
-  [iconView removeFromSuperview];
-
   GMSAdvancedMarker *marker = [[GMSAdvancedMarker alloc] init];
   marker.position = markerView.coordinate;
   marker.title = markerView.title;
   marker.snippet = markerView.markerDescription;
 
   if (markerView.hasCustomView) {
-    marker.iconView = iconView;
+    if (markerView.rasterize) {
+      marker.icon = [markerView createIconImage];
+    } else {
+      UIView *iconView = markerView.iconView;
+      [iconView removeFromSuperview];
+      marker.iconView = iconView;
+    }
     marker.groundAnchor = markerView.anchor;
   }
 

package/ios/LuggMarkerView.h

@@ -20,12 +20,15 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, readonly, nullable) NSString *markerDescription;
 @property(nonatomic, readonly) CGPoint anchor;
 @property(nonatomic, readonly) NSInteger zIndex;
+@property(nonatomic, readonly) BOOL rasterize;
 @property(nonatomic, readonly) BOOL hasCustomView;
 @property(nonatomic, readonly) BOOL didLayout;
 @property(nonatomic, readonly) UIView *iconView;
 @property(nonatomic, weak, nullable) id<LuggMarkerViewDelegate> delegate;
 @property(nonatomic, strong, nullable) NSObject *marker;
 
+- (nullable UIImage *)createIconImage;
+
 @end
 
 NS_ASSUME_NONNULL_END

package/ios/LuggMarkerView.mm

@@ -19,6 +19,7 @@ using namespace facebook::react;
   NSString *_markerDescription;
   CGPoint _anchor;
   NSInteger _zIndex;
+  BOOL _rasterize;
   BOOL _didLayout;
   UIView *_iconView;
 }
@@ -37,6 +38,7 @@ using namespace facebook::react;
     _coordinate = CLLocationCoordinate2DMake(0, 0);
     _anchor = CGPointMake(0.5, 1.0);
     _zIndex = 0;
+    _rasterize = YES;
     _didLayout = NO;
 
     _iconView = [[UIView alloc] init];
@@ -63,6 +65,7 @@ using namespace facebook::react;
       [NSString stringWithUTF8String:newViewProps.description.c_str()];
   _anchor = CGPointMake(newViewProps.anchor.x, newViewProps.anchor.y);
   _zIndex = newViewProps.zIndex.value_or(0);
+  _rasterize = newViewProps.rasterize;
 }
 
 - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask {
@@ -138,6 +141,10 @@ using namespace facebook::react;
   return _zIndex;
 }
 
+- (BOOL)rasterize {
+  return _rasterize;
+}
+
 - (BOOL)hasCustomView {
   return _iconView.subviews.count > 0;
 }
@@ -150,6 +157,23 @@ using namespace facebook::react;
   return _iconView;
 }
 
+- (UIImage *)createIconImage {
+  CGSize size = _iconView.bounds.size;
+  if (size.width <= 0 || size.height <= 0) {
+    return nil;
+  }
+
+  UIGraphicsImageRendererFormat *format =
+      [UIGraphicsImageRendererFormat defaultFormat];
+  format.scale = [UIScreen mainScreen].scale;
+  UIGraphicsImageRenderer *renderer =
+      [[UIGraphicsImageRenderer alloc] initWithSize:size format:format];
+
+  return [renderer imageWithActions:^(UIGraphicsImageRendererContext *context) {
+    [self->_iconView.layer renderInContext:context.CGContext];
+  }];
+}
+
 - (void)prepareForRecycle {
   [super prepareForRecycle];
   _didLayout = NO;

package/lib/module/components/Marker.js

@@ -13,6 +13,7 @@ export class Marker extends React.Component {
       description,
       anchor,
       zIndex,
+      rasterize = true,
       children
     } = this.props;
     return /*#__PURE__*/_jsx(LuggMarkerViewNativeComponent, {
@@ -24,6 +25,7 @@ export class Marker extends React.Component {
       title: title,
       description: description,
       anchor: anchor,
+      rasterize: rasterize,
       children: children
     });
   }

package/lib/module/components/Marker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","LuggMarkerViewNativeComponent","jsx","_jsx","Marker","Component","render","name","coordinate","title","description","anchor","zIndex","children","props","style","styles","marker","create","position","pointerEvents"],"sourceRoot":"../../../src","sources":["components/Marker.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,6BAA6B,MAAM,yCAAyC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAkCpF,OAAO,MAAMC,MAAM,SAASL,KAAK,CAACM,SAAS,CAAc;EACvDC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,IAAI;MAAEC,UAAU;MAAEC,KAAK;MAAEC,WAAW;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GACtE,IAAI,CAACC,KAAK;IAEZ,oBACEX,IAAA,CAACF,6BAA6B;MAC5Bc,KAAK,EAAE,CAAC;QAAEH;MAAO,CAAC,EAAEI,MAAM,CAACC,MAAM,CAAE;MACnCV,IAAI,EAAEA,IAAK;MACXC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MACbC,WAAW,EAAEA,WAAY;MACzBC,MAAM,EAAEA,MAAO;MAAAE,QAAA,EAEdA;IAAQ,CACoB,CAAC;EAEpC;AACF;AAEA,MAAMG,MAAM,GAAGhB,UAAU,CAACkB,MAAM,CAAC;EAC/BD,MAAM,EAAE;IACNE,QAAQ,EAAE,UAAU;IACpBC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","LuggMarkerViewNativeComponent","jsx","_jsx","Marker","Component","render","name","coordinate","title","description","anchor","zIndex","rasterize","children","props","style","styles","marker","create","position","pointerEvents"],"sourceRoot":"../../../src","sources":["components/Marker.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,6BAA6B,MAAM,yCAAyC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAwCpF,OAAO,MAAMC,MAAM,SAASL,KAAK,CAACM,SAAS,CAAc;EACvDC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,IAAI;MACJC,UAAU;MACVC,KAAK;MACLC,WAAW;MACXC,MAAM;MACNC,MAAM;MACNC,SAAS,GAAG,IAAI;MAChBC;IACF,CAAC,GAAG,IAAI,CAACC,KAAK;IAEd,oBACEZ,IAAA,CAACF,6BAA6B;MAC5Be,KAAK,EAAE,CAAC;QAAEJ;MAAO,CAAC,EAAEK,MAAM,CAACC,MAAM,CAAE;MACnCX,IAAI,EAAEA,IAAK;MACXC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MACbC,WAAW,EAAEA,WAAY;MACzBC,MAAM,EAAEA,MAAO;MACfE,SAAS,EAAEA,SAAU;MAAAC,QAAA,EAEpBA;IAAQ,CACoB,CAAC;EAEpC;AACF;AAEA,MAAMG,MAAM,GAAGjB,UAAU,CAACmB,MAAM,CAAC;EAC/BD,MAAM,EAAE;IACNE,QAAQ,EAAE,UAAU;IACpBC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/fabric/LuggMarkerViewNativeComponent.ts

@@ -1,6 +1,9 @@
 import { codegenNativeComponent } from 'react-native';
 import type { ViewProps, HostComponent } from 'react-native';
-import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type {
+  Double,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface Coordinate {
   latitude: Double;
@@ -18,6 +21,7 @@ export interface NativeProps extends ViewProps {
   title?: string;
   description?: string;
   anchor?: Point;
+  rasterize?: WithDefault<boolean, true>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/lib/typescript/src/components/Marker.d.ts

@@ -26,6 +26,12 @@ export interface MarkerProps {
      * Z-index for marker ordering. Higher values render on top.
      */
     zIndex?: number;
+    /**
+     * Rasterize custom marker view to bitmap for better performance.
+     * Set to false if you need live view updates (e.g., animations).
+     * @default true
+     */
+    rasterize?: boolean;
     /**
      * Custom marker view
      */

package/lib/typescript/src/components/Marker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,MAAM;CAiBP"}
+{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,MAAM;CA0BP"}

package/lib/typescript/src/fabric/LuggMarkerViewNativeComponent.d.ts

@@ -1,5 +1,5 @@
 import type { ViewProps, HostComponent } from 'react-native';
-import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type { Double, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 export interface Coordinate {
     latitude: Double;
     longitude: Double;
@@ -14,6 +14,7 @@ export interface NativeProps extends ViewProps {
     title?: string;
     description?: string;
     anchor?: Point;
+    rasterize?: WithDefault<boolean, true>;
 }
 declare const _default: HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/src/fabric/LuggMarkerViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LuggMarkerViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/LuggMarkerViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAExE,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}
+{"version":3,"file":"LuggMarkerViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/fabric/LuggMarkerViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EACV,MAAM,EACN,WAAW,EACZ,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;CACxC;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lugg/maps",
-  "version": "0.2.0-alpha.17",
+  "version": "0.2.0-alpha.18",
   "description": "Universal maps for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Marker.tsx

@@ -29,6 +29,12 @@ export interface MarkerProps {
    * Z-index for marker ordering. Higher values render on top.
    */
   zIndex?: number;
+  /**
+   * Rasterize custom marker view to bitmap for better performance.
+   * Set to false if you need live view updates (e.g., animations).
+   * @default true
+   */
+  rasterize?: boolean;
   /**
    * Custom marker view
    */
@@ -37,8 +43,16 @@ export interface MarkerProps {
 
 export class Marker extends React.Component<MarkerProps> {
   render() {
-    const { name, coordinate, title, description, anchor, zIndex, children } =
-      this.props;
+    const {
+      name,
+      coordinate,
+      title,
+      description,
+      anchor,
+      zIndex,
+      rasterize = true,
+      children,
+    } = this.props;
 
     return (
       <LuggMarkerViewNativeComponent
@@ -48,6 +62,7 @@ export class Marker extends React.Component<MarkerProps> {
         title={title}
         description={description}
         anchor={anchor}
+        rasterize={rasterize}
       >
         {children}
       </LuggMarkerViewNativeComponent>

package/src/fabric/LuggMarkerViewNativeComponent.ts

@@ -1,6 +1,9 @@
 import { codegenNativeComponent } from 'react-native';
 import type { ViewProps, HostComponent } from 'react-native';
-import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type {
+  Double,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface Coordinate {
   latitude: Double;
@@ -18,6 +21,7 @@ export interface NativeProps extends ViewProps {
   title?: string;
   description?: string;
   anchor?: Point;
+  rasterize?: WithDefault<boolean, true>;
 }
 
 export default codegenNativeComponent<NativeProps>(