@maplibre/maplibre-react-native 11.0.0-beta.3 → 11.0.0-beta.30

package/MapLibreReactNative.podspec

@@ -3,7 +3,7 @@ require "json"
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
 # Global Variable Defaults
-$MLRN_NATIVE_VERSION ||= "6.22.1"
+$MLRN_NATIVE_VERSION ||= "6.25.0"
 $MLRN_SPM_SPEC ||= {
   url: "https://github.com/maplibre/maplibre-gl-native-distribution",
   requirement: {

package/android/build.gradle

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

package/android/gradle.properties

@@ -5,12 +5,12 @@ org.maplibre.reactnative.compileSdkVersion=35
 org.maplibre.reactnative.ndkVersion=27.1.12297006
 
 # MapLibre React Native
-org.maplibre.reactnative.nativeVersion=12.2.3
+org.maplibre.reactnative.nativeVersion=13.0.2
 org.maplibre.reactnative.nativeVariant=opengl
 org.maplibre.reactnative.pluginVersion=3.0.2
 org.maplibre.reactnative.turfVersion=6.0.1
 org.maplibre.reactnative.okhttpVersion=4.12.0
 # Available values: default, google
-org.maplibre.reactnative.locationEngine=google
+org.maplibre.reactnative.locationEngine=default
 # Only applied if locationEngine=google
 org.maplibre.reactnative.googlePlayServicesLocationVersion=21.3.0

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

@@ -28,6 +28,7 @@ import org.maplibre.reactnative.modules.MLRNLogModule
 import org.maplibre.reactnative.modules.MLRNNetworkModule
 import org.maplibre.reactnative.modules.MLRNOfflineModule
 import org.maplibre.reactnative.modules.MLRNStaticMapModule
+import org.maplibre.reactnative.modules.MLRNTransformRequestModule
 import org.maplibre.reactnative.utils.ReactTagResolver
 
 class MLRNPackage : BaseReactPackage() {
@@ -65,6 +66,8 @@ class MLRNPackage : BaseReactPackage() {
             MLRNLogModule.NAME -> return MLRNLogModule(reactContext)
 
             MLRNNetworkModule.NAME -> return MLRNNetworkModule(reactContext)
+
+            MLRNTransformRequestModule.NAME -> return MLRNTransformRequestModule(reactContext)
         }
 
         return null
@@ -79,7 +82,7 @@ class MLRNPackage : BaseReactPackage() {
                     MLRNMapViewModule.NAME,
                     MLRNMapViewModule.NAME,
                     canOverrideExistingModule = false,
-                    needsEagerInit = false,
+                    needsEagerInit = true,
                     isCxxModule = false,
                     isTurboModule = true,
                 )
@@ -164,6 +167,16 @@ class MLRNPackage : BaseReactPackage() {
                     isTurboModule = true,
                 )
 
+            moduleInfos[MLRNTransformRequestModule.NAME] =
+                ReactModuleInfo(
+                    MLRNTransformRequestModule.NAME,
+                    MLRNTransformRequestModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
             moduleInfos
         }
 

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

@@ -2,13 +2,18 @@ package org.maplibre.reactnative.components.annotations.markerview
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.graphics.PointF
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.ViewGroupManager
+import org.maplibre.android.geometry.LatLng
 import org.maplibre.geojson.Point
 import org.maplibre.reactnative.components.AbstractMapFeature
 import org.maplibre.reactnative.components.mapview.MLRNMapView
+import org.maplibre.reactnative.events.PointAnnotationEvent
 import org.maplibre.reactnative.utils.GeoJSONUtils
 
 @SuppressLint("ViewConstructor")
@@ -28,6 +33,13 @@ class MLRNMarkerView(
     private var mLastWidth = 0
     private var mLastHeight = 0
     private var mLastZIndex: Int? = null
+    private var markerId: String? = null
+
+    private val surfaceId: Int
+        get() {
+            val reactContext = context as ReactContext
+            return UIManagerHelper.getSurfaceId(reactContext)
+        }
 
     private fun ViewGroup.disableClipping() {
         clipChildren = false
@@ -35,30 +47,6 @@ class MLRNMarkerView(
         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,
@@ -67,7 +55,6 @@ class MLRNMarkerView(
 
         mChildView = childView
         childView.addOnLayoutChangeListener(this)
-        disableClippingRecursively(childView)
 
         val offscreenContainer = mMapView?.offscreenAnnotationViewContainer()
         offscreenContainer?.disableClipping()
@@ -88,7 +75,7 @@ class MLRNMarkerView(
 
     private fun removeChildView() {
         mChildView?.removeOnLayoutChangeListener(this)
-        (mChildView?.parent as? android.view.ViewGroup)?.removeView(mChildView)
+        (mChildView?.parent as? ViewGroup)?.removeView(mChildView)
         mChildView = null
     }
 
@@ -133,6 +120,26 @@ class MLRNMarkerView(
         mWrapperView?.translationZ = zIndex
     }
 
+    fun setId(id: String) {
+        markerId = id
+    }
+
+    fun onPress(
+        latLng: LatLng,
+        screenPos: PointF,
+    ) {
+        val event =
+            PointAnnotationEvent(
+                surfaceId,
+                id,
+                "onPress",
+                markerId,
+                latLng,
+                screenPos,
+            )
+        mMapView?.eventDispatcher?.dispatchEvent(event)
+    }
+
     override fun addToMap(mapView: MLRNMapView) {
         mMapView = mapView
         if (mChildView != null && !mChildView!!.isAttachedToWindow) {
@@ -155,7 +162,6 @@ class MLRNMarkerView(
 
             if (latLng != null && mChildView != null && mMarkerViewManager != null) {
                 mMapView?.offscreenAnnotationViewContainer()?.removeView(mChildView)
-                disableClippingRecursively(mChildView!!)
 
                 mWrapperView =
                     MLRNMarkerViewContent(context).apply {
@@ -166,7 +172,7 @@ class MLRNMarkerView(
                             )
                         addView(mChildView)
                     }
-                mWrapperView!!.setLayerType(View.LAYER_TYPE_HARDWARE, null)
+                mWrapperView!!.setLayerType(LAYER_TYPE_HARDWARE, null)
 
                 mLastZIndex = ViewGroupManager.getViewZIndex(this@MLRNMarkerView)
                 if (mLastZIndex != null) {
@@ -180,6 +186,7 @@ class MLRNMarkerView(
                 mMarkerInfo =
                     mMarkerViewManager!!.addMarker(
                         view = mWrapperView!!,
+                        markerView = this@MLRNMarkerView,
                         latLng = latLng,
                         anchorX = mAnchor?.get(0) ?: 0f,
                         anchorY = mAnchor?.get(1) ?: 0f,

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/MLRNMarkerViewManager.kt

@@ -3,7 +3,6 @@ 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
@@ -32,6 +31,14 @@ class MLRNMarkerViewManager(
 
     override fun createViewInstance(reactContext: ThemedReactContext): MLRNMarkerView = MLRNMarkerView(reactContext)
 
+    @ReactProp(name = "id")
+    override fun setId(
+        markerView: MLRNMarkerView,
+        id: String?,
+    ) {
+        id?.let { markerView.setId(it) }
+    }
+
     override fun addView(
         parent: MLRNMarkerView,
         child: View,

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,8 @@ class MarkerViewManager(
     private val map: MapLibreMap,
 ) {
     data class MarkerInfo(
-        val view: View,
+        val view: MLRNMarkerViewContent,
+        val markerView: MLRNMarkerView,
         var latLng: LatLng,
         var anchorX: Float = 0f,
         var anchorY: Float = 0f,
@@ -25,22 +25,17 @@ class MarkerViewManager(
     private var isDestroyed = false
 
     fun addMarker(
-        view: View,
+        view: MLRNMarkerViewContent,
+        markerView: MLRNMarkerView,
         latLng: LatLng,
         anchorX: Float = 0f,
         anchorY: Float = 0f,
         offsetX: Float = 0f,
         offsetY: Float = 0f,
     ): MarkerInfo {
-        val markerInfo = MarkerInfo(view, latLng, anchorX, anchorY, offsetX, offsetY)
+        val markerInfo = MarkerInfo(view, markerView, 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 +68,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 +77,19 @@ class MarkerViewManager(
 
     fun findMarkerByView(view: View): MarkerInfo? = markers.find { it.view == view }
 
+    fun isPointInsideMarker(screenPoint: PointF): Boolean = findMarkerAtPoint(screenPoint) != null
+
+    fun findMarkerAtPoint(screenPoint: PointF): MarkerInfo? {
+        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 marker
+        }
+        return null
+    }
+
     fun updateMarkerCoordinate(
         markerInfo: MarkerInfo,
         latLng: LatLng,

package/android/src/main/java/org/maplibre/reactnative/components/annotations/pointannotation/MLRNPointAnnotation.kt

@@ -4,6 +4,7 @@ import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.PointF
 import android.view.View
+import android.view.ViewGroup
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import org.maplibre.android.geometry.LatLng
@@ -26,18 +27,17 @@ class MLRNPointAnnotation(
     private var mMap: MapLibreMap? = null
     private var mMapView: MLRNMapView? = null
 
-    private val mHasChildren = false
-
     private var mCoordinate: Point? = null
 
-    public var mapLibreId: String? = null
-    public var title: String? = null
+    var mapLibreId: String? = null
+    var title: String? = null
     private var mSnippet: String? = null
 
     private var mAnchor: FloatArray? = null
     private var mOffset: FloatArray? = null
-    private val mIsSelected = false
     private var mDraggable = false
+    var selected = false
+        private set
 
     private var mChildView: View? = null
     private var mChildBitmap: Bitmap? = null
@@ -49,7 +49,7 @@ class MLRNPointAnnotation(
     private var mCalloutBitmapId: String? = null
 
     companion object {
-        const val MARKER_IMAGE_ID: String = "MARKER_IMAGE_ID"
+        const val DEFAULT_MARKER: String = "DEFAULT_MARKER"
     }
 
     private val surfaceId: Int
@@ -115,7 +115,7 @@ class MLRNPointAnnotation(
         // Return children in consistent order: child view first, then callout
         return when {
             index == 0 && mChildView != null -> mChildView
-            index == 0 && mChildView == null && mCalloutView != null -> mCalloutView
+            index == 0 && mCalloutView != null -> mCalloutView
             index == 1 && mChildView != null && mCalloutView != null -> mCalloutView
             else -> null
         }
@@ -139,6 +139,10 @@ class MLRNPointAnnotation(
             }
             addBitmapToStyle(mCalloutBitmap, mCalloutBitmapId)
         }
+
+        if (selected) {
+            mMapView?.selectAnnotation(this)
+        }
     }
 
     override fun removeFromMap(mapView: MLRNMapView) {
@@ -201,16 +205,12 @@ class MLRNPointAnnotation(
         refreshBitmap(v, v.left, v.top, v.right, v.bottom)
     }
 
-    fun getLatLng(): LatLng? = GeoJSONUtils.toLatLng(mCoordinate)
-
     val annotationId: Long? get() = mAnnotation?.id
 
     fun setSnippet(snippet: String?) {
         mSnippet = snippet
     }
 
-    fun getCalloutView(): View? = mCalloutView
-
     fun setLngLat(lngLat: DoubleArray?) {
         if (lngLat == null || lngLat.size < 2) {
             return
@@ -260,21 +260,41 @@ class MLRNPointAnnotation(
         }
     }
 
-    fun getMarker(): Symbol? = mAnnotation
-
-    fun onSelect(shouldSendEvent: Boolean) {
-        if (mCalloutView != null) {
-            makeCallout()
+    fun setSelectedAnnotation(selected: Boolean) {
+        if (mMapView != null && mAnnotation != null) {
+            if (selected) {
+                mMapView?.selectAnnotation(this)
+            } else {
+                mMapView?.deselectAnnotation(this)
+            }
+        } else {
+            this.selected = selected
         }
-        if (shouldSendEvent) {
-            emitEvent("onSelected")
+    }
+
+    fun onPress() {
+        emitEvent("onPress")
+    }
+
+    fun onSelect() {
+        if (!selected) {
+            selected = true
+            if (mCalloutView != null) {
+                makeCallout()
+            }
+
+            emitEvent("onSelect")
         }
     }
 
     fun onDeselect() {
-        emitEvent("onDeselected")
-        if (mCalloutSymbol != null) {
-            mMapView?.getSymbolManager()?.delete(mCalloutSymbol)
+        if (selected) {
+            selected = false
+            if (mCalloutSymbol != null) {
+                mMapView?.getSymbolManager()?.delete(mCalloutSymbol)
+            }
+
+            emitEvent("onDeselect")
         }
     }
 
@@ -325,12 +345,12 @@ class MLRNPointAnnotation(
     }
 
     private fun updateIconImage() {
-        if (mChildView != null) {
+        if (mChildView != null && ((mChildView as? ViewGroup)?.childCount ?: 0) > 0) {
             if (mChildBitmapId != null) {
                 mAnnotation?.iconImage = mChildBitmapId
             }
         } else {
-            mAnnotation?.iconImage = MARKER_IMAGE_ID
+            mAnnotation?.iconImage = DEFAULT_MARKER
             mAnnotation?.iconAnchor = "bottom"
         }
     }
@@ -418,8 +438,8 @@ class MLRNPointAnnotation(
     private fun getScreenPosition(latLng: LatLng): PointF? {
         val screenPos = mMap?.projection?.toScreenLocation(latLng)
         val density = getDisplayDensity()
-        screenPos?.x = screenPos?.x?.div(density) ?: 0f
-        screenPos?.y = screenPos?.y?.div(density) ?: 0f
+        screenPos?.x = screenPos.x.div(density)
+        screenPos?.y = screenPos.y.div(density)
         return screenPos
     }
 

package/android/src/main/java/org/maplibre/reactnative/components/annotations/pointannotation/MLRNPointAnnotationManager.kt

@@ -82,7 +82,8 @@ class MLRNPointAnnotationManager(
         annotation: MLRNPointAnnotation,
         selected: Boolean,
     ) {
-        // Selection is handled by the map view
+        annotation
+            .setSelectedAnnotation(selected)
     }
 
     @ReactProp(name = "lngLat")

package/android/src/main/java/org/maplibre/reactnative/components/layer/style/MLRNStyleFactory.java

@@ -1,5 +1,5 @@
 // DO NOT MODIFY
-// This file is auto-generated from scripts/templates/MLRNStyleFactory.java.ejs
+// This file is auto-generated from scripts/src/templates/MLRNStyleFactory.java.ejs
 
 package org.maplibre.reactnative.components.layer.style;
 
@@ -2109,7 +2109,7 @@ public class MLRNStyleFactory {
       if (styleValue.isExpression()) {
         layer.setProperties(PropertyFactory.hillshadeIlluminationDirection(styleValue.getExpression()));
       } else {
-        layer.setProperties(PropertyFactory.hillshadeIlluminationDirection(styleValue.getFloat(VALUE_KEY)));
+        layer.setProperties(PropertyFactory.hillshadeIlluminationDirection(styleValue.getFloatArray(VALUE_KEY)));
       }
     }
 
@@ -2141,7 +2141,7 @@ public class MLRNStyleFactory {
       if (styleValue.isExpression()) {
         layer.setProperties(PropertyFactory.hillshadeShadowColor(styleValue.getExpression()));
       } else {
-        layer.setProperties(PropertyFactory.hillshadeShadowColor(styleValue.getInt(VALUE_KEY)));
+        layer.setProperties(PropertyFactory.hillshadeShadowColor(styleValue.getStringArray(VALUE_KEY)));
       }
     }
 
@@ -2157,7 +2157,7 @@ public class MLRNStyleFactory {
       if (styleValue.isExpression()) {
         layer.setProperties(PropertyFactory.hillshadeHighlightColor(styleValue.getExpression()));
       } else {
-        layer.setProperties(PropertyFactory.hillshadeHighlightColor(styleValue.getInt(VALUE_KEY)));
+        layer.setProperties(PropertyFactory.hillshadeHighlightColor(styleValue.getStringArray(VALUE_KEY)));
       }
     }