@lugg/maps 1.0.0-beta.4 → 1.0.0-beta.6

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

@@ -6,17 +6,18 @@ import android.graphics.Canvas
 import android.view.View
 import androidx.core.graphics.createBitmap
 import androidx.core.view.isNotEmpty
+import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.views.view.ReactViewGroup
 
 class LuggCalloutView(context: Context) : ReactViewGroup(context) {
   val contentView: ReactViewGroup = ReactViewGroup(context)
   var bubbled: Boolean = true
-  var anchorX: Float = 0.5f
+  var offsetX: Float = 0f
     set(value) {
       field = value
       onUpdate?.invoke()
     }
-  var anchorY: Float = 1.0f
+  var offsetY: Float = 0f
     set(value) {
       field = value
       onUpdate?.invoke()
@@ -28,6 +29,7 @@ class LuggCalloutView(context: Context) : ReactViewGroup(context) {
 
   init {
     visibility = GONE
+    pointerEvents = PointerEvents.NONE
   }
 
   override fun addView(child: View, index: Int) {

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

@@ -2,6 +2,7 @@ package com.luggmaps
 
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
@@ -22,9 +23,9 @@ class LuggCalloutViewManager :
     view.bubbled = value
   }
 
-  override fun setAnchor(view: LuggCalloutView, value: ReadableMap?) {
-    view.anchorX = value?.getDouble("x")?.toFloat() ?: 0.5f
-    view.anchorY = value?.getDouble("y")?.toFloat() ?: 1.0f
+  override fun setOffset(view: LuggCalloutView, value: ReadableMap?) {
+    view.offsetX = value?.getDouble("x")?.toFloat()?.dpToPx() ?: 0f
+    view.offsetY = value?.getDouble("y")?.toFloat()?.dpToPx() ?: 0f
   }
 
   override fun onDropViewInstance(view: LuggCalloutView) {

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

@@ -58,6 +58,7 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
   private var initialLatitude: Double = 37.78
   private var initialLongitude: Double = -122.43
   private var initialZoom: Float = 14f
+  private var mapType: String = "standard"
   private var theme: String = "system"
   private var zoomEnabled: Boolean = true
   private var scrollEnabled: Boolean = true
@@ -65,9 +66,13 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
   private var pitchEnabled: Boolean = true
   private var userLocationEnabled: Boolean = false
   private var userLocationButtonEnabled: Boolean = false
+  private var poiEnabled: Boolean = true
+  private var poiFilterMode: String = "including"
+  private var poiFilterCategories: List<String> = emptyList()
   private var minZoom: Double? = null
   private var maxZoom: Double? = null
   private var edgeInsets: EdgeInsets = EdgeInsets()
+  private var insetAdjustment: String = "never"
 
   // region View Lifecycle
 
@@ -183,10 +188,15 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
     provider?.setPitchEnabled(pitchEnabled)
     provider?.setUserLocationEnabled(userLocationEnabled)
     provider?.setUserLocationButtonEnabled(userLocationButtonEnabled)
+    provider?.setMapType(mapType)
     provider?.setTheme(theme)
     minZoom?.let { provider?.setMinZoom(it) }
     maxZoom?.let { provider?.setMaxZoom(it) }
     provider?.setEdgeInsets(edgeInsets)
+    provider?.setInsetAdjustment(insetAdjustment)
+    provider?.setPoiEnabled(poiEnabled)
+    provider?.setPoiFilterMode(poiFilterMode)
+    provider?.setPoiFilterCategories(poiFilterCategories)
   }
 
   fun setProvider(value: String?) {
@@ -257,12 +267,42 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
     provider?.setMaxZoom(zoom)
   }
 
+  fun setMapType(value: String) {
+    if (mapType == value) return
+    mapType = value
+    provider?.setMapType(value)
+  }
+
   fun setTheme(value: String) {
     if (theme == value) return
     theme = value
     provider?.setTheme(value)
   }
 
+  fun setPoiEnabled(enabled: Boolean) {
+    if (poiEnabled == enabled) return
+    poiEnabled = enabled
+    provider?.setPoiEnabled(enabled)
+  }
+
+  fun setPoiFilterMode(value: String) {
+    if (poiFilterMode == value) return
+    poiFilterMode = value
+    provider?.setPoiFilterMode(value)
+  }
+
+  fun setPoiFilterCategories(categories: List<String>) {
+    if (poiFilterCategories == categories) return
+    poiFilterCategories = categories
+    provider?.setPoiFilterCategories(categories)
+  }
+
+  fun setInsetAdjustment(value: String) {
+    if (insetAdjustment == value) return
+    insetAdjustment = value
+    provider?.setInsetAdjustment(value)
+  }
+
   fun setEdgeInsets(
     top: Int,
     left: Int,

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

@@ -152,11 +152,42 @@ class LuggMapViewManager :
     view.setMaxZoom(value)
   }
 
+  @ReactProp(name = "mapType")
+  override fun setMapType(view: LuggMapView, value: String?) {
+    view.setMapType(value ?: "standard")
+  }
+
   @ReactProp(name = "theme")
   override fun setTheme(view: LuggMapView, value: String?) {
     view.setTheme(value ?: "system")
   }
 
+  @ReactProp(name = "poiEnabled", defaultBoolean = true)
+  override fun setPoiEnabled(view: LuggMapView, value: Boolean) {
+    view.setPoiEnabled(value)
+  }
+
+  @ReactProp(name = "poiFilterMode")
+  override fun setPoiFilterMode(view: LuggMapView, value: String?) {
+    view.setPoiFilterMode(value ?: "including")
+  }
+
+  @ReactProp(name = "poiFilterCategories")
+  override fun setPoiFilterCategories(view: LuggMapView, value: ReadableArray?) {
+    val categories = mutableListOf<String>()
+    value?.let { array ->
+      for (i in 0 until array.size()) {
+        array.getString(i)?.let { categories.add(it) }
+      }
+    }
+    view.setPoiFilterCategories(categories)
+  }
+
+  @ReactProp(name = "insetAdjustment")
+  override fun setInsetAdjustment(view: LuggMapView, value: String?) {
+    view.setInsetAdjustment(value ?: "never")
+  }
+
   @ReactProp(name = "edgeInsets")
   override fun setEdgeInsets(view: LuggMapView, value: ReadableMap?) {
     value?.let {

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

@@ -16,6 +16,8 @@ import com.luggmaps.extensions.dispatchEvent
 interface LuggMarkerViewDelegate {
   fun markerViewDidUpdate(markerView: LuggMarkerView)
   fun markerViewDidLayout(markerView: LuggMarkerView)
+  fun showCalloutForMarkerView(markerView: LuggMarkerView)
+  fun hideCalloutForMarkerView(markerView: LuggMarkerView)
 }
 
 class LuggMarkerView(context: Context) : ReactViewGroup(context) {
@@ -57,6 +59,9 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   var rasterize: Boolean = true
     private set
 
+  var centerOnPress: Boolean = true
+    private set
+
   var draggable: Boolean = false
     private set
 
@@ -75,6 +80,12 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   var calloutView: LuggCalloutView? = null
     private set
 
+  val scaledContentHeight: Float
+    get() {
+      val (_, height) = measureContentBounds()
+      return height * scale
+    }
+
   private fun measureContentBounds(): Pair<Int, Int> {
     var maxWidth = 0
     var maxHeight = 0
@@ -266,6 +277,10 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     this.rasterize = rasterize
   }
 
+  fun setCenterOnPress(centerOnPress: Boolean) {
+    this.centerOnPress = centerOnPress
+  }
+
   fun setDraggable(draggable: Boolean) {
     this.draggable = draggable
   }
@@ -286,6 +301,14 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     dispatchEvent(MarkerDragEvent(this, MarkerDragEvent.DRAG_END, latitude, longitude, x, y))
   }
 
+  fun showCallout() {
+    delegate?.showCalloutForMarkerView(this)
+  }
+
+  fun hideCallout() {
+    delegate?.hideCalloutForMarkerView(this)
+  }
+
   fun setName(name: String?) {
     this.name = name
   }

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

@@ -92,11 +92,24 @@ class LuggMarkerViewManager :
     view.setRasterize(value)
   }
 
+  @ReactProp(name = "centerOnPress", defaultBoolean = true)
+  override fun setCenterOnPress(view: LuggMarkerView, value: Boolean) {
+    view.setCenterOnPress(value)
+  }
+
   @ReactProp(name = "draggable", defaultBoolean = false)
   override fun setDraggable(view: LuggMarkerView, value: Boolean) {
     view.setDraggable(value)
   }
 
+  override fun showCallout(view: LuggMarkerView) {
+    view.showCallout()
+  }
+
+  override fun hideCallout(view: LuggMarkerView) {
+    view.hideCallout()
+  }
+
   companion object {
     const val NAME = "LuggMarkerView"
   }

package/android/src/main/java/com/luggmaps/core/GoogleMapProvider.kt

@@ -1,10 +1,14 @@
 package com.luggmaps.core
 
 import android.annotation.SuppressLint
+import android.content.ComponentCallbacks2
 import android.content.Context
+import android.content.res.Configuration
 import android.view.View
 import android.widget.ImageView
 import androidx.core.graphics.createBitmap
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.google.android.gms.maps.CameraUpdateFactory
 import com.google.android.gms.maps.GoogleMap
@@ -25,7 +29,6 @@ import com.google.android.gms.maps.model.Marker
 import com.google.android.gms.maps.model.Polygon
 import com.google.android.gms.maps.model.PolygonOptions
 import com.google.android.gms.maps.model.PolylineOptions
-import com.google.android.gms.maps.model.TileOverlay
 import com.google.android.gms.maps.model.TileOverlayOptions
 import com.google.android.gms.maps.model.UrlTileProvider
 import com.luggmaps.LuggCalloutView
@@ -42,7 +45,11 @@ import com.luggmaps.LuggPolylineView
 import com.luggmaps.LuggPolylineViewDelegate
 import com.luggmaps.LuggTileOverlayView
 import com.luggmaps.LuggTileOverlayViewDelegate
+import com.luggmaps.extensions.findViewByTag
 import java.net.URL
+import kotlin.math.atan
+import kotlin.math.pow
+import kotlin.math.sinh
 
 class GoogleMapProvider(private val context: Context) :
   MapProvider,
@@ -63,7 +70,8 @@ class GoogleMapProvider(private val context: Context) :
   GoogleMap.OnGroundOverlayClickListener,
   GoogleMap.OnMarkerClickListener,
   GoogleMap.OnMarkerDragListener,
-  GoogleMap.InfoWindowAdapter {
+  GoogleMap.InfoWindowAdapter,
+  ComponentCallbacks2 {
 
   override var delegate: MapProviderDelegate? = null
   override val isMapReady: Boolean get() = _isMapReady
@@ -71,6 +79,7 @@ class GoogleMapProvider(private val context: Context) :
   var mapId: String = DEMO_MAP_ID
 
   private var wrapperView: LuggMapWrapperView? = null
+  private var currentNightMode: Int = context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
   private var mapView: MapView? = null
   private var googleMap: GoogleMap? = null
   private var _isMapReady = false
@@ -113,6 +122,10 @@ class GoogleMapProvider(private val context: Context) :
   // Edge Insets
   private var edgeInsets: EdgeInsets = EdgeInsets()
 
+  // Inset adjustment
+  private var insetAdjustment: String = "never"
+  private var systemInsets: EdgeInsets = EdgeInsets()
+
   // region MapProvider
 
   override fun initializeMap(wrapperView: View, latitude: Double, longitude: Double, zoom: Float) {
@@ -125,6 +138,8 @@ class GoogleMapProvider(private val context: Context) :
     val wrapper = wrapperView as LuggMapWrapperView
     this.wrapperView = wrapper
 
+    context.applicationContext.registerComponentCallbacks(this)
+
     val options = GoogleMapOptions().mapId(mapId)
     mapView = MapView(context, options).also { view ->
       view.onCreate(null)
@@ -135,6 +150,8 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun destroy() {
+    detachWindowInsetsListener()
+    context.applicationContext.unregisterComponentCallbacks(this)
     dismissNonBubbledCallout()
     for (markerView in liveMarkerViews) {
       markerView.onUpdate = null
@@ -201,6 +218,7 @@ class GoogleMapProvider(private val context: Context) :
     applyUiSettings()
     applyZoomLimits()
     applyEdgeInsets()
+    applyInsetAdjustment()
     applyTheme()
     applyUserLocation()
     processPendingMarkers()
@@ -289,10 +307,17 @@ class GoogleMapProvider(private val context: Context) :
 
       val calloutView = view.calloutView
       if (calloutView != null && !calloutView.bubbled && calloutView.hasCustomContent) {
-        googleMap?.animateCamera(CameraUpdateFactory.newLatLng(marker.position))
+        if (view.centerOnPress) {
+          googleMap?.animateCamera(CameraUpdateFactory.newLatLng(marker.position))
+        }
         showNonBubbledCallout(marker, calloutView)
         return true
       }
+
+      if (!view.centerOnPress) {
+        marker.showInfoWindow()
+        return true
+      }
     }
     return false
   }
@@ -406,8 +431,8 @@ class GoogleMapProvider(private val context: Context) :
     val map = googleMap ?: return
 
     val point = map.projection.toScreenLocation(marker.position)
-    contentView.translationX = point.x - contentView.width * calloutView.anchorX
-    contentView.translationY = point.y - markerView.contentView.height * markerView.anchorY - contentView.height * calloutView.anchorY
+    contentView.translationX = point.x - contentView.width / 2f + calloutView.offsetX
+    contentView.translationY = point.y - markerView.scaledContentHeight * markerView.anchorY - contentView.height + calloutView.offsetY
   }
 
   // endregion
@@ -451,6 +476,15 @@ class GoogleMapProvider(private val context: Context) :
     googleMap?.uiSettings?.isMyLocationButtonEnabled = enabled
   }
 
+  override fun setMapType(value: String) {
+    googleMap?.mapType = when (value) {
+      "satellite" -> GoogleMap.MAP_TYPE_SATELLITE
+      "terrain" -> GoogleMap.MAP_TYPE_TERRAIN
+      "hybrid" -> GoogleMap.MAP_TYPE_HYBRID
+      else -> GoogleMap.MAP_TYPE_NORMAL
+    }
+  }
+
   override fun setTheme(value: String) {
     theme = value
     applyTheme()
@@ -490,7 +524,7 @@ class GoogleMapProvider(private val context: Context) :
 
     if (map != null && oldInsets != edgeInsets) {
       val cameraUpdate = CameraUpdateFactory.newCameraPosition(map.cameraPosition)
-      applyEdgeInsets()
+      applyEdgeInsets(duration)
       when {
         duration < 0 -> map.animateCamera(cameraUpdate)
         duration > 0 -> map.animateCamera(cameraUpdate, duration, null)
@@ -501,6 +535,17 @@ class GoogleMapProvider(private val context: Context) :
     }
   }
 
+  override fun setInsetAdjustment(value: String) {
+    insetAdjustment = value
+    applyInsetAdjustment()
+  }
+
+  override fun setPoiEnabled(enabled: Boolean) {}
+
+  override fun setPoiFilterMode(mode: String) {}
+
+  override fun setPoiFilterCategories(categories: List<String>) {}
+
   // endregion
 
   // region MarkerViewDelegate
@@ -522,6 +567,30 @@ class GoogleMapProvider(private val context: Context) :
     syncMarkerView(markerView)
   }
 
+  override fun showCalloutForMarkerView(markerView: LuggMarkerView) {
+    val marker = markerView.marker ?: return
+    val calloutView = markerView.calloutView
+
+    if (calloutView != null && calloutView.hasCustomContent) {
+      dismissNonBubbledCallout()
+      if (calloutView.bubbled) {
+        marker.showInfoWindow()
+      } else {
+        showNonBubbledCallout(marker, calloutView)
+      }
+      return
+    }
+
+    if (!markerView.title.isNullOrEmpty()) {
+      marker.showInfoWindow()
+    }
+  }
+
+  override fun hideCalloutForMarkerView(markerView: LuggMarkerView) {
+    dismissNonBubbledCallout()
+    markerView.marker?.hideInfoWindow()
+  }
+
   // endregion
 
   // region PolylineViewDelegate
@@ -998,9 +1067,9 @@ class GoogleMapProvider(private val context: Context) :
     val tileProvider = object : UrlTileProvider(tileSize, tileSize) {
       override fun getTileUrl(x: Int, y: Int, zoom: Int): URL? {
         if (hasBounds) {
-          val n = Math.pow(2.0, zoom.toDouble())
-          val tileSWLat = Math.toDegrees(Math.atan(Math.sinh(Math.PI * (1 - 2.0 * (y + 1) / n))))
-          val tileNELat = Math.toDegrees(Math.atan(Math.sinh(Math.PI * (1 - 2.0 * y / n))))
+          val n = 2.0.pow(zoom.toDouble())
+          val tileSWLat = Math.toDegrees(atan(sinh(Math.PI * (1 - 2.0 * (y + 1) / n))))
+          val tileNELat = Math.toDegrees(atan(sinh(Math.PI * (1 - 2.0 * y / n))))
           val tileSWLng = x / n * 360.0 - 180.0
           val tileNELng = (x + 1) / n * 360.0 - 180.0
 
@@ -1079,11 +1148,11 @@ class GoogleMapProvider(private val context: Context) :
     val map = googleMap ?: return
     if (coordinates.isEmpty()) return
 
-    val latLngs = coordinates.filterIsInstance<LatLng>()
-    if (latLngs.isEmpty()) return
+    val latLongs = coordinates.filterIsInstance<LatLng>()
+    if (latLongs.isEmpty()) return
 
-    val boundsBuilder = com.google.android.gms.maps.model.LatLngBounds.Builder()
-    latLngs.forEach { boundsBuilder.include(it) }
+    val boundsBuilder = LatLngBounds.Builder()
+    latLongs.forEach { boundsBuilder.include(it) }
     val bounds = boundsBuilder.build()
 
     val top = edgeInsetsTop.toFloat().dpToPx().toInt()
@@ -1091,11 +1160,12 @@ class GoogleMapProvider(private val context: Context) :
     val bottom = edgeInsetsBottom.toFloat().dpToPx().toInt()
     val right = edgeInsetsRight.toFloat().dpToPx().toInt()
 
+    val combined = combinedEdgeInsets()
     map.setPadding(
-      edgeInsets.left + left,
-      edgeInsets.top + top,
-      edgeInsets.right + right,
-      edgeInsets.bottom + bottom
+      combined.left + left,
+      combined.top + top,
+      combined.right + right,
+      combined.bottom + bottom
     )
 
     val cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, 0)
@@ -1106,7 +1176,7 @@ class GoogleMapProvider(private val context: Context) :
       else -> map.moveCamera(cameraUpdate)
     }
 
-    map.setPadding(edgeInsets.left, edgeInsets.top, edgeInsets.right, edgeInsets.bottom)
+    map.setPadding(combined.left, combined.top, combined.right, combined.bottom)
   }
 
   // endregion
@@ -1130,17 +1200,92 @@ class GoogleMapProvider(private val context: Context) :
     }
   }
 
-  private fun applyEdgeInsets() {
-    googleMap?.setPadding(edgeInsets.left, edgeInsets.top, edgeInsets.right, edgeInsets.bottom)
+  private fun applyInsetAdjustment() {
+    if (insetAdjustment == "automatic") {
+      attachWindowInsetsListener()
+    } else {
+      detachWindowInsetsListener()
+      systemInsets = EdgeInsets()
+    }
+    applyEdgeInsets()
   }
 
+  private fun combinedEdgeInsets(): EdgeInsets =
+    if (insetAdjustment == "automatic") {
+      EdgeInsets(
+        edgeInsets.top + systemInsets.top,
+        edgeInsets.left + systemInsets.left,
+        edgeInsets.bottom + systemInsets.bottom,
+        edgeInsets.right + systemInsets.right
+      )
+    } else {
+      edgeInsets
+    }
+
+  private fun applyEdgeInsets(duration: Int = 0) {
+    val combined = combinedEdgeInsets()
+    googleMap?.setPadding(combined.left, combined.top, combined.right, combined.bottom)
+    applyWatermarkTranslation(combined, duration)
+  }
+
+  private fun applyWatermarkTranslation(insets: EdgeInsets, duration: Int = 0) {
+    val view = mapView ?: return
+    view.findViewByTag("GoogleWatermark")?.let { watermark ->
+      val targetY = -insets.bottom.toFloat()
+      val targetX = insets.left.toFloat()
+      if (duration > 0) {
+        watermark.animate()
+          .translationY(targetY)
+          .translationX(targetX)
+          .setDuration(duration.toLong())
+          .start()
+      } else if (duration < 0) {
+        watermark.animate()
+          .translationY(targetY)
+          .translationX(targetX)
+          .start()
+      } else {
+        watermark.translationY = targetY
+        watermark.translationX = targetX
+      }
+    }
+  }
+
+  private fun attachWindowInsetsListener() {
+    val view = mapView ?: return
+    ViewCompat.setOnApplyWindowInsetsListener(view) { _, windowInsets ->
+      val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
+      systemInsets = EdgeInsets(insets.top, insets.left, insets.bottom, insets.right)
+      applyEdgeInsets()
+      windowInsets
+    }
+    ViewCompat.requestApplyInsets(view)
+  }
+
+  private fun detachWindowInsetsListener() {
+    mapView?.let { ViewCompat.setOnApplyWindowInsetsListener(it, null) }
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    val newNightMode = newConfig.uiMode and Configuration.UI_MODE_NIGHT_MASK
+    if (newNightMode != currentNightMode) {
+      currentNightMode = newNightMode
+      applyTheme()
+    }
+  }
+
+  @Deprecated("Deprecated in Java")
+  override fun onLowMemory() {}
+
+  override fun onTrimMemory(level: Int) {}
+
   private fun applyTheme() {
     val colorScheme = when (theme) {
       "dark" -> MapColorScheme.DARK
       "light" -> MapColorScheme.LIGHT
       else -> MapColorScheme.FOLLOW_SYSTEM
     }
-    googleMap?.setMapColorScheme(colorScheme)
+    googleMap?.mapColorScheme = colorScheme
   }
 
   @SuppressLint("MissingPermission")

package/android/src/main/java/com/luggmaps/core/MapProviderDelegate.kt

@@ -32,11 +32,16 @@ interface MapProvider {
   fun setPitchEnabled(enabled: Boolean)
   fun setUserLocationEnabled(enabled: Boolean)
   fun setUserLocationButtonEnabled(enabled: Boolean)
+  fun setMapType(value: String)
   fun setTheme(value: String)
   fun setMinZoom(zoom: Double)
   fun setMaxZoom(zoom: Double)
   fun setEdgeInsets(edgeInsets: EdgeInsets)
   fun setEdgeInsets(edgeInsets: EdgeInsets, duration: Int)
+  fun setInsetAdjustment(value: String)
+  fun setPoiEnabled(enabled: Boolean)
+  fun setPoiFilterMode(mode: String)
+  fun setPoiFilterCategories(categories: List<String>)
 
   // Children
   fun addMarkerView(markerView: LuggMarkerView)

package/android/src/main/java/com/luggmaps/extensions/ViewExtensions.kt

@@ -1,6 +1,7 @@
 package com.luggmaps.extensions
 
 import android.view.View
+import android.view.ViewGroup
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.Event
@@ -12,3 +13,13 @@ fun View.dispatchEvent(event: Event<*>) {
   )
   eventDispatcher?.dispatchEvent(event)
 }
+
+fun View.findViewByTag(tag: String): View? {
+  if (this.tag?.toString() == tag) return this
+  if (this !is ViewGroup) return null
+  for (i in 0 until childCount) {
+    val found = getChildAt(i).findViewByTag(tag)
+    if (found != null) return found
+  }
+  return null
+}

package/ios/LuggCalloutView.h

@@ -13,7 +13,7 @@ NS_ASSUME_NONNULL_BEGIN
 @interface LuggCalloutView : RCTViewComponentView
 
 @property(nonatomic, readonly) BOOL bubbled;
-@property(nonatomic, readonly) CGPoint anchor;
+@property(nonatomic, readonly) CGPoint offset;
 @property(nonatomic, readonly) BOOL hasCustomContent;
 @property(nonatomic, readonly) UIView *contentView;
 @property(nonatomic, weak, nullable) id<LuggCalloutViewDelegate> delegate;