@maplibre/maplibre-react-native 11.0.0-beta.7 → 11.0.0-beta.8

package/android/src/main/java/org/maplibre/reactnative/components/annotations/markerview/MLRNMarkerView.kt

@@ -50,7 +50,8 @@ class MLRNMarkerView(
                     override fun onChildViewRemoved(
                         parent: View?,
                         child: View?,
-                    ) {}
+                    ) {
+                    }
                 },
             )
             for (i in 0 until view.childCount) {

package/android/src/main/java/org/maplibre/reactnative/components/annotations/markerview/MLRNMarkerViewContent.kt

@@ -1,16 +1,12 @@
 package org.maplibre.reactnative.components.annotations.markerview
 
 import android.content.Context
-import android.view.MotionEvent
 import android.view.ViewGroup
 import com.facebook.react.views.view.ReactViewGroup
 
 /**
- * Custom ReactViewGroup that allows content to render outside its bounds (#642).
- * This is used as a wrapper for Marker content to prevent clipping.
- *
  * Based on rnmapbox/maps implementation:
- * https://github.com/rnmapbox/maps/blob/main/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewContent.kt
+ * https://github.com/rnmapbox/maps/blob/512c50865f322fa89e0d20066b4a0fb10f080cb5/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewContent.kt
  */
 class MLRNMarkerViewContent(
     context: Context,
@@ -32,19 +28,18 @@ class MLRNMarkerViewContent(
     }
 
     /**
-     * Request that the parent (MapView) not intercept touch events when touching marker content.
-     * This allows TouchableOpacity, Pressable, etc. to receive touch events properly (#557, #1018).
+     * Returns the authoritative content size from the first child view.
+     * The child is laid out by React Native before this wrapper is added to the map,
+     * so its dimensions are reliable even before this view's own layout pass runs.
      */
-    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
-        // Request that parent (MapView) doesn't intercept this touch sequence
-        parent?.requestDisallowInterceptTouchEvent(true)
-        return super.onInterceptTouchEvent(event)
+    fun getContentSize(): Pair<Float, Float> {
+        val child = getChildAt(0) ?: return Pair(width.toFloat(), height.toFloat())
+        val w = if (child.width > 0) child.width else width
+        val h = if (child.height > 0) child.height else height
+        return Pair(w.toFloat(), h.toFloat())
     }
 }
 
-/**
- * Extension function to disable all forms of clipping on a ViewGroup
- */
 private fun ViewGroup.allowRenderingOutside() {
     clipChildren = false
     clipToPadding = false

package/android/src/main/java/org/maplibre/reactnative/components/annotations/markerview/MarkerViewManager.kt

@@ -1,9 +1,8 @@
 package org.maplibre.reactnative.components.annotations.markerview
 
 import android.graphics.PointF
+import android.graphics.RectF
 import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
 import org.maplibre.android.geometry.LatLng
 import org.maplibre.android.maps.MapLibreMap
 import org.maplibre.android.maps.MapView
@@ -13,7 +12,7 @@ class MarkerViewManager(
     private val map: MapLibreMap,
 ) {
     data class MarkerInfo(
-        val view: View,
+        val view: MLRNMarkerViewContent,
         var latLng: LatLng,
         var anchorX: Float = 0f,
         var anchorY: Float = 0f,
@@ -25,7 +24,7 @@ class MarkerViewManager(
     private var isDestroyed = false
 
     fun addMarker(
-        view: View,
+        view: MLRNMarkerViewContent,
         latLng: LatLng,
         anchorX: Float = 0f,
         anchorY: Float = 0f,
@@ -35,12 +34,6 @@ class MarkerViewManager(
         val markerInfo = MarkerInfo(view, latLng, anchorX, anchorY, offsetX, offsetY)
         markers.add(markerInfo)
 
-        if (view is ViewGroup) {
-            view.clipChildren = false
-            view.clipToPadding = false
-            view.clipToOutline = false
-        }
-
         if (view.parent == null) {
             mapView.clipChildren = false
             mapView.clipToPadding = false
@@ -73,8 +66,7 @@ class MarkerViewManager(
     private fun updateMarkerPosition(marker: MarkerInfo) {
         val view = marker.view
         val screenPos: PointF = map.projection.toScreenLocation(marker.latLng)
-        val viewWidth = if (view.width > 0) view.width.toFloat() else view.measuredWidth.toFloat()
-        val viewHeight = if (view.height > 0) view.height.toFloat() else view.measuredHeight.toFloat()
+        val (viewWidth, viewHeight) = view.getContentSize()
         val anchorOffsetX = viewWidth * marker.anchorX
         val anchorOffsetY = viewHeight * marker.anchorY
         view.x = screenPos.x - anchorOffsetX + marker.offsetX
@@ -83,6 +75,18 @@ class MarkerViewManager(
 
     fun findMarkerByView(view: View): MarkerInfo? = markers.find { it.view == view }
 
+    fun isPointInsideMarker(screenPoint: PointF): Boolean {
+        for (marker in markers) {
+            val v = marker.view
+            if (v.visibility != View.VISIBLE) continue
+            val (w, h) = v.getContentSize()
+            val rect = RectF(v.x, v.y, v.x + w, v.y + h)
+            if (rect.contains(screenPoint.x, screenPoint.y)) return true
+        }
+
+        return false
+    }
+
     fun updateMarkerCoordinate(
         markerInfo: MarkerInfo,
         latLng: LatLng,

package/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapView.kt

@@ -561,6 +561,10 @@ open class MLRNMapView(
 
         val screenPoint = mapLibreMap!!.projection.toScreenLocation(latLng)
 
+        if (markerViewManager?.isPointInsideMarker(screenPoint) == true) {
+            return true
+        }
+
         val hits: MutableMap<String, MutableList<Feature>?> = HashMap()
         val hitPressableSources: MutableList<MLRNPressableSource<*>> = ArrayList()
         for (pressableSource in this.pressableSources) {
@@ -608,6 +612,11 @@ open class MLRNMapView(
         }
 
         val screenPoint = mapLibreMap!!.projection.toScreenLocation(latLng)
+
+        if (markerViewManager?.isPointInsideMarker(screenPoint) == true) {
+            return true
+        }
+
         screenPoint.x /= this.displayDensity
         screenPoint.y /= this.displayDensity
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "React Native library for creating maps with MapLibre Native for Android & iOS",
-  "version": "11.0.0-beta.7",
+  "version": "11.0.0-beta.8",
   "publishConfig": {
     "access": "public",
     "provenance": true