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

package/android/build.gradle

@@ -96,9 +96,7 @@ dependencies {
     implementation("org.maplibre.gl:android-plugin-annotation-v9:${getConfigurableExtOrDefault('pluginVersion')}") {
         exclude(group: "org.maplibre.gl", module: "android-sdk")
     }
-    implementation("org.maplibre.gl:android-plugin-markerview-v9:${getConfigurableExtOrDefault('pluginVersion')}") {
-        exclude(group: "org.maplibre.gl", module: "android-sdk")
-    }
+    // Note: markerview plugin removed - using native implementation instead
 
     // Dependencies
     implementation "org.maplibre.gl:android-sdk-turf:${getConfigurableExtOrDefault('turfVersion')}"

package/android/src/main/java/org/maplibre/reactnative/MLRNPackage.kt

@@ -6,9 +6,9 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.module.model.ReactModuleInfo
 import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
-import org.maplibre.reactnative.components.annotations.MLRNCalloutManager
-import org.maplibre.reactnative.components.annotations.MLRNMarkerViewManager
-import org.maplibre.reactnative.components.annotations.MLRNPointAnnotationManager
+import org.maplibre.reactnative.components.annotations.callout.MLRNCalloutManager
+import org.maplibre.reactnative.components.annotations.markerview.MLRNMarkerViewManager
+import org.maplibre.reactnative.components.annotations.pointannotation.MLRNPointAnnotationManager
 import org.maplibre.reactnative.components.camera.MLRNCameraManager
 import org.maplibre.reactnative.components.camera.MLRNCameraModule
 import org.maplibre.reactnative.components.images.MLRNImagesManager

package/android/src/main/java/org/maplibre/reactnative/components/annotations/callout/MLRNCallout.kt

@@ -0,0 +1,7 @@
+package org.maplibre.reactnative.components.annotations.callout
+
+import android.content.Context
+import com.facebook.react.views.view.ReactViewGroup
+
+class MLRNCallout(context: Context) : ReactViewGroup(context) {
+}

package/android/src/main/java/org/maplibre/reactnative/components/annotations/callout/MLRNCalloutManager.kt

@@ -0,0 +1,29 @@
+package org.maplibre.reactnative.components.annotations.callout
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.MLRNCalloutManagerDelegate
+import com.facebook.react.viewmanagers.MLRNCalloutManagerInterface
+
+@ReactModule(name = MLRNCalloutManager.REACT_CLASS)
+class MLRNCalloutManager :
+    ViewGroupManager<MLRNCallout>(),
+    MLRNCalloutManagerInterface<MLRNCallout> {
+
+    private val delegate: MLRNCalloutManagerDelegate<MLRNCallout, MLRNCalloutManager> =
+        MLRNCalloutManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<MLRNCallout> = delegate
+
+    companion object {
+        const val REACT_CLASS: String = "MLRNCallout"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): MLRNCallout {
+        return MLRNCallout(reactContext)
+    }
+}

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

@@ -0,0 +1,220 @@
+package org.maplibre.reactnative.components.annotations.markerview
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import com.facebook.react.uimanager.ViewGroupManager
+import org.maplibre.geojson.Point
+import org.maplibre.reactnative.components.AbstractMapFeature
+import org.maplibre.reactnative.components.mapview.MLRNMapView
+import org.maplibre.reactnative.utils.GeoJSONUtils
+
+@SuppressLint("ViewConstructor")
+class MLRNMarkerView(context: Context) : AbstractMapFeature(context), View.OnLayoutChangeListener {
+    private var mMapView: MLRNMapView? = null
+    private var mChildView: View? = null
+    private var mWrapperView: MLRNMarkerViewContent? = null
+    private var mMarkerViewManager: MarkerViewManager? = null
+    private var mMarkerInfo: MarkerViewManager.MarkerInfo? = null
+    private var mCoordinate: Point? = null
+    private var mAnchor: FloatArray? = null
+    private var mOffset: FloatArray? = null
+    private var mAddedToMap = false
+    private var mLastWidth = 0
+    private var mLastHeight = 0
+    private var mLastZIndex: Int? = null
+
+    private fun ViewGroup.disableClipping() {
+        clipChildren = false
+        clipToPadding = false
+        clipToOutline = false
+    }
+
+    private fun disableClippingRecursively(view: View) {
+        if (view is ViewGroup) {
+            view.disableClipping()
+            view.setOnHierarchyChangeListener(object : ViewGroup.OnHierarchyChangeListener {
+                override fun onChildViewAdded(parent: View?, child: View?) {
+                    child?.let { disableClippingRecursively(it) }
+                }
+                override fun onChildViewRemoved(parent: View?, child: View?) {}
+            })
+            for (i in 0 until view.childCount) {
+                disableClippingRecursively(view.getChildAt(i))
+            }
+        }
+    }
+
+    override fun addView(childView: View, childPosition: Int) {
+        if (childPosition != 0) return
+
+        mChildView = childView
+        childView.addOnLayoutChangeListener(this)
+        disableClippingRecursively(childView)
+
+        val offscreenContainer = mMapView?.offscreenAnnotationViewContainer()
+        offscreenContainer?.disableClipping()
+        offscreenContainer?.addView(childView)
+    }
+
+    override fun removeView(view: View?) {
+        if (view == mChildView) {
+            removeChildView()
+        }
+    }
+
+    override fun removeViewAt(index: Int) {
+        if (index == 0 && mChildView != null) {
+            removeChildView()
+        }
+    }
+
+    private fun removeChildView() {
+        mChildView?.removeOnLayoutChangeListener(this)
+        (mChildView?.parent as? android.view.ViewGroup)?.removeView(mChildView)
+        mChildView = null
+    }
+
+    override fun getChildCount(): Int {
+        return if (mChildView != null) 1 else 0
+    }
+
+    override fun getChildAt(index: Int): View? {
+        return if (index == 0) mChildView else null
+    }
+
+    fun setLngLat(lngLat: DoubleArray?) {
+        if (lngLat == null || lngLat.size < 2) return
+        val point = Point.fromLngLat(lngLat[0], lngLat[1])
+        mCoordinate = point
+        val latLng = GeoJSONUtils.toLatLng(point)
+        if (latLng != null && mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.updateMarkerCoordinate(mMarkerInfo!!, latLng)
+        }
+    }
+
+    fun setAnchor(x: Float, y: Float) {
+        mAnchor = floatArrayOf(x, y)
+        if (mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.updateMarkerAnchor(mMarkerInfo!!, x, y)
+        }
+    }
+
+    fun setOffset(x: Float, y: Float) {
+        mOffset = floatArrayOf(x, y)
+        val scale = resources.displayMetrics.density
+        val pixelOffsetX = x * scale
+        val pixelOffsetY = y * scale
+        if (mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.updateMarkerOffset(mMarkerInfo!!, pixelOffsetX, pixelOffsetY)
+        }
+    }
+
+    fun updateZIndex(zIndex: Float) {
+        mWrapperView?.translationZ = zIndex
+    }
+
+    override fun addToMap(mapView: MLRNMapView) {
+        mMapView = mapView
+        if (mChildView != null && !mChildView!!.isAttachedToWindow) {
+            val offscreenContainer = mMapView?.offscreenAnnotationViewContainer()
+            offscreenContainer?.disableClipping()
+            offscreenContainer?.addView(mChildView)
+        }
+        tryAddToMarkerViewManager()
+    }
+
+    private fun tryAddToMarkerViewManager() {
+        if (mAddedToMap || mMapView == null || mChildView == null) return
+        if (mChildView!!.width == 0 || mChildView!!.height == 0) return
+
+        mAddedToMap = true
+
+        mMapView?.getMapAsync { mapLibreMap ->
+            val latLng = GeoJSONUtils.toLatLng(mCoordinate)
+            mMarkerViewManager = mMapView?.getMarkerViewManager(mapLibreMap)
+
+            if (latLng != null && mChildView != null && mMarkerViewManager != null) {
+                mMapView?.offscreenAnnotationViewContainer()?.removeView(mChildView)
+                disableClippingRecursively(mChildView!!)
+
+                mWrapperView = MLRNMarkerViewContent(context).apply {
+                    layoutParams = FrameLayout.LayoutParams(
+                        FrameLayout.LayoutParams.WRAP_CONTENT,
+                        FrameLayout.LayoutParams.WRAP_CONTENT
+                    )
+                    addView(mChildView)
+                }
+                mWrapperView!!.setLayerType(View.LAYER_TYPE_HARDWARE, null)
+
+                mLastZIndex = ViewGroupManager.getViewZIndex(this@MLRNMarkerView)
+                if (mLastZIndex != null) {
+                    mWrapperView!!.translationZ = mLastZIndex!!.toFloat()
+                }
+
+                val scale = resources.displayMetrics.density
+                val pixelOffsetX = (mOffset?.get(0) ?: 0f) * scale
+                val pixelOffsetY = (mOffset?.get(1) ?: 0f) * scale
+
+                mMarkerInfo = mMarkerViewManager!!.addMarker(
+                    view = mWrapperView!!,
+                    latLng = latLng,
+                    anchorX = mAnchor?.get(0) ?: 0f,
+                    anchorY = mAnchor?.get(1) ?: 0f,
+                    offsetX = pixelOffsetX,
+                    offsetY = pixelOffsetY
+                )
+            }
+        }
+    }
+
+    override fun removeFromMap(mapView: MLRNMapView) {
+        if (mMarkerInfo != null && mMarkerViewManager != null) {
+            mMarkerViewManager!!.removeMarker(mMarkerInfo!!)
+            mMarkerInfo = null
+            mMarkerViewManager = null
+        }
+        mChildView?.removeOnLayoutChangeListener(this)
+        mWrapperView?.removeAllViews()
+        mWrapperView = null
+        if (mChildView != null && !mAddedToMap) {
+            mMapView?.offscreenAnnotationViewContainer()?.removeView(mChildView)
+        }
+        mAddedToMap = false
+    }
+
+    override fun onLayoutChange(
+        v: View, left: Int, top: Int, right: Int, bottom: Int,
+        oldLeft: Int, oldTop: Int, oldRight: Int, oldBottom: Int
+    ) {
+        if (left == 0 && top == 0 && right == 0 && bottom == 0) return
+
+        val width = right - left
+        val height = bottom - top
+
+        if (!mAddedToMap) {
+            tryAddToMarkerViewManager()
+            return
+        }
+
+        val currentZIndex = ViewGroupManager.getViewZIndex(this@MLRNMarkerView)
+        if (currentZIndex != mLastZIndex) {
+            mLastZIndex = currentZIndex
+            if (currentZIndex != null) {
+                mWrapperView?.translationZ = currentZIndex.toFloat()
+            }
+        }
+
+        if (width == mLastWidth && height == mLastHeight) return
+
+        mLastWidth = width
+        mLastHeight = height
+        mChildView?.layoutParams?.let { params ->
+            params.width = width
+            params.height = height
+        }
+        mMarkerViewManager?.updateMarkers()
+    }
+}

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

@@ -0,0 +1,50 @@
+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 MarkerView 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
+ */
+class MLRNMarkerViewContent(context: Context) : ReactViewGroup(context) {
+
+    init {
+        allowRenderingOutside()
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        configureParentClipping()
+    }
+
+    private fun configureParentClipping() {
+        val parent = parent
+        if (parent is ViewGroup) {
+            parent.allowRenderingOutside()
+        }
+    }
+
+    /**
+     * 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).
+     */
+    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+        // Request that parent (MapView) doesn't intercept this touch sequence
+        parent?.requestDisallowInterceptTouchEvent(true)
+        return super.onInterceptTouchEvent(event)
+    }
+}
+
+/**
+ * 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/MLRNMarkerViewManager.kt

@@ -0,0 +1,81 @@
+package org.maplibre.reactnative.components.annotations.markerview
+
+import android.view.View
+import com.facebook.react.bridge.Dynamic
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.MLRNMarkerViewManagerDelegate
+import com.facebook.react.viewmanagers.MLRNMarkerViewManagerInterface
+
+@ReactModule(name = MLRNMarkerViewManager.REACT_CLASS)
+class MLRNMarkerViewManager(private val reactApplicationContext: ReactApplicationContext) :
+    ViewGroupManager<MLRNMarkerView>(),
+    MLRNMarkerViewManagerInterface<MLRNMarkerView> {
+
+    private val delegate: MLRNMarkerViewManagerDelegate<MLRNMarkerView, MLRNMarkerViewManager> =
+        MLRNMarkerViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<MLRNMarkerView> = delegate
+
+    companion object {
+        const val REACT_CLASS: String = "MLRNMarkerView"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): MLRNMarkerView {
+        return MLRNMarkerView(reactContext)
+    }
+
+    override fun addView(parent: MLRNMarkerView, child: View, index: Int) {
+        parent.addView(child, index)
+    }
+
+    override fun removeViewAt(parent: MLRNMarkerView, index: Int) {
+        parent.removeViewAt(index)
+    }
+
+    override fun getChildCount(parent: MLRNMarkerView): Int {
+        return parent.childCount
+    }
+
+    override fun getChildAt(parent: MLRNMarkerView, index: Int): View? {
+        return parent.getChildAt(index)
+    }
+
+    @ReactProp(name = "lngLat")
+    override fun setLngLat(markerView: MLRNMarkerView, lngLat: Dynamic) {
+        if (lngLat.type == ReadableType.Array) {
+            val arr = lngLat.asArray()
+            if (arr != null && arr.size() >= 2) {
+                markerView.setLngLat(doubleArrayOf(arr.getDouble(0), arr.getDouble(1)))
+            }
+        }
+    }
+
+    @ReactProp(name = "anchor")
+    override fun setAnchor(markerView: MLRNMarkerView, map: ReadableMap?) {
+        if (map != null) {
+            markerView.setAnchor(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
+        }
+    }
+
+    @ReactProp(name = "offset")
+    override fun setOffset(markerView: MLRNMarkerView, map: ReadableMap?) {
+        if (map != null) {
+            markerView.setOffset(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
+        }
+    }
+
+    override fun setZIndex(view: MLRNMarkerView, zIndex: Float) {
+        super.setZIndex(view, zIndex)
+        view.updateZIndex(zIndex)
+    }
+}

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

@@ -0,0 +1,127 @@
+package org.maplibre.reactnative.components.annotations.markerview
+
+import android.graphics.PointF
+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
+
+class MarkerViewManager(
+    private val mapView: MapView,
+    private val map: MapLibreMap
+) {
+    data class MarkerInfo(
+        val view: View,
+        var latLng: LatLng,
+        var anchorX: Float = 0f,
+        var anchorY: Float = 0f,
+        var offsetX: Float = 0f,
+        var offsetY: Float = 0f
+    )
+
+    private val markers = mutableListOf<MarkerInfo>()
+    private var isDestroyed = false
+
+    fun addMarker(
+        view: View,
+        latLng: LatLng,
+        anchorX: Float = 0f,
+        anchorY: Float = 0f,
+        offsetX: Float = 0f,
+        offsetY: Float = 0f
+    ): MarkerInfo {
+        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
+            mapView.clipToOutline = false
+            mapView.addView(view)
+        }
+
+        updateMarkerPosition(markerInfo)
+
+        return markerInfo
+    }
+
+    fun removeMarker(markerInfo: MarkerInfo) {
+        markers.remove(markerInfo)
+        mapView.removeView(markerInfo.view)
+    }
+
+    fun removeMarkerByView(view: View) {
+        markers.find { it.view == view }?.let { removeMarker(it) }
+    }
+
+    fun updateMarkers() {
+        if (isDestroyed) return
+
+        for (marker in markers) {
+            updateMarkerPosition(marker)
+        }
+    }
+
+    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 anchorOffsetX = viewWidth * marker.anchorX
+        val anchorOffsetY = viewHeight * marker.anchorY
+        view.x = screenPos.x - anchorOffsetX + marker.offsetX
+        view.y = screenPos.y - anchorOffsetY + marker.offsetY
+    }
+
+    fun findMarkerByView(view: View): MarkerInfo? {
+        return markers.find { it.view == view }
+    }
+
+    fun updateMarkerCoordinate(markerInfo: MarkerInfo, latLng: LatLng) {
+        markerInfo.latLng = latLng
+        updateMarkerPosition(markerInfo)
+    }
+
+    fun updateMarkerAnchor(markerInfo: MarkerInfo, anchorX: Float, anchorY: Float) {
+        markerInfo.anchorX = anchorX
+        markerInfo.anchorY = anchorY
+        updateMarkerPosition(markerInfo)
+    }
+
+    fun updateMarkerOffset(markerInfo: MarkerInfo, offsetX: Float, offsetY: Float) {
+        markerInfo.offsetX = offsetX
+        markerInfo.offsetY = offsetY
+        updateMarkerPosition(markerInfo)
+    }
+
+    fun removeViews() {
+        for (marker in markers) {
+            mapView.removeView(marker.view)
+        }
+    }
+
+    fun restoreViews() {
+        for (marker in markers) {
+            if (marker.view.parent == null) {
+                mapView.addView(marker.view)
+            }
+        }
+        updateMarkers()
+    }
+
+    fun onDestroy() {
+        isDestroyed = true
+        for (marker in markers) {
+            mapView.removeView(marker.view)
+        }
+        markers.clear()
+    }
+}