@maplibre/maplibre-react-native 11.0.0-beta.9 → 11.0.0

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/README.md

@@ -17,11 +17,6 @@
 _React Native library for creating maps
 with [MapLibre Native for Android & iOS](https://github.com/maplibre/maplibre-gl-native)._
 
-> [!IMPORTANT]
-> This is the v11 beta branch, which **only supports the new architecture**.
->
-> Please refer to the [v11 migration guide](https://github.com/maplibre/maplibre-react-native/blob/beta/docs/content/setup/migrations/v11.md) for upgrading.
-
 This project originated as a fork of [rnmapbox](https://github.com/rnmapbox/maps), a community-maintained
 React Native library for building maps with the Mapbox iOS and Android mobile SDKs. The original library
 supported both Mapbox and MapLibre for some time, but as the MapLibre and Mapbox SDKs have

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,31 +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,
@@ -68,7 +55,6 @@ class MLRNMarkerView(
 
         mChildView = childView
         childView.addOnLayoutChangeListener(this)
-        disableClippingRecursively(childView)
 
         val offscreenContainer = mMapView?.offscreenAnnotationViewContainer()
         offscreenContainer?.disableClipping()
@@ -89,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
     }
 
@@ -134,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) {
@@ -156,7 +162,6 @@ class MLRNMarkerView(
 
             if (latLng != null && mChildView != null && mMarkerViewManager != null) {
                 mMapView?.offscreenAnnotationViewContainer()?.removeView(mChildView)
-                disableClippingRecursively(mChildView!!)
 
                 mWrapperView =
                     MLRNMarkerViewContent(context).apply {
@@ -167,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) {
@@ -181,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/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

@@ -13,6 +13,7 @@ class MarkerViewManager(
 ) {
     data class MarkerInfo(
         val view: MLRNMarkerViewContent,
+        val markerView: MLRNMarkerView,
         var latLng: LatLng,
         var anchorX: Float = 0f,
         var anchorY: Float = 0f,
@@ -25,13 +26,14 @@ class MarkerViewManager(
 
     fun addMarker(
         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.parent == null) {
@@ -75,16 +77,17 @@ class MarkerViewManager(
 
     fun findMarkerByView(view: View): MarkerInfo? = markers.find { it.view == view }
 
-    fun isPointInsideMarker(screenPoint: PointF): Boolean {
+    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 true
+            if (rect.contains(screenPoint.x, screenPoint.y)) return marker
         }
-
-        return false
+        return null
     }
 
     fun updateMarkerCoordinate(

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

@@ -201,14 +201,14 @@ class MLRNLayer(
         val map = mMap ?: return
         val style = MLRNStyle(context, reactStyle, map)
         when (mLayer) {
-            is FillLayer -> MLRNStyleFactory.setFillLayerStyle(mLayer as FillLayer?, style)
-            is LineLayer -> MLRNStyleFactory.setLineLayerStyle(mLayer as LineLayer?, style)
-            is SymbolLayer -> MLRNStyleFactory.setSymbolLayerStyle(mLayer as SymbolLayer?, style)
-            is CircleLayer -> MLRNStyleFactory.setCircleLayerStyle(mLayer as CircleLayer?, style)
-            is HeatmapLayer -> MLRNStyleFactory.setHeatmapLayerStyle(mLayer as HeatmapLayer?, style)
-            is FillExtrusionLayer -> MLRNStyleFactory.setFillExtrusionLayerStyle(mLayer as FillExtrusionLayer?, style)
-            is RasterLayer -> MLRNStyleFactory.setRasterLayerStyle(mLayer as RasterLayer?, style)
-            is BackgroundLayer -> MLRNStyleFactory.setBackgroundLayerStyle(mLayer as BackgroundLayer?, style)
+            is FillLayer -> MLRNStyleFactory.setFillLayerStyle(mLayer as FillLayer, style)
+            is LineLayer -> MLRNStyleFactory.setLineLayerStyle(mLayer as LineLayer, style)
+            is SymbolLayer -> MLRNStyleFactory.setSymbolLayerStyle(mLayer as SymbolLayer, style)
+            is CircleLayer -> MLRNStyleFactory.setCircleLayerStyle(mLayer as CircleLayer, style)
+            is HeatmapLayer -> MLRNStyleFactory.setHeatmapLayerStyle(mLayer as HeatmapLayer, style)
+            is FillExtrusionLayer -> MLRNStyleFactory.setFillExtrusionLayerStyle(mLayer as FillExtrusionLayer, style)
+            is RasterLayer -> MLRNStyleFactory.setRasterLayerStyle(mLayer as RasterLayer, style)
+            is BackgroundLayer -> MLRNStyleFactory.setBackgroundLayerStyle(mLayer as BackgroundLayer, style)
         }
     }
 

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

@@ -0,0 +1,60 @@
+package org.maplibre.reactnative.components.layer.style
+
+import android.content.Context
+import com.facebook.react.bridge.ReadableMap
+import org.maplibre.android.maps.MapLibreMap
+import org.maplibre.reactnative.utils.DownloadMapImageTask
+import org.maplibre.reactnative.utils.DownloadMapImageTask.OnAllImagesLoaded
+import org.maplibre.reactnative.utils.ImageEntry
+import java.util.AbstractMap
+
+class MLRNStyle(
+    private val mContext: Context,
+    reactStyle: ReadableMap,
+    map: MapLibreMap,
+) {
+    private val mReactStyle: ReadableMap = reactStyle
+    private val mMap: MapLibreMap = map
+
+    val allStyleKeys: MutableList<String>
+        get() {
+            val it = mReactStyle.keySetIterator()
+            val keys: MutableList<String> =
+                ArrayList()
+
+            while (it.hasNextKey()) {
+                val key = it.nextKey()
+                keys.add(key)
+            }
+
+            return keys
+        }
+
+    fun getStyleValueForKey(styleKey: String): MLRNStyleValue {
+        val styleValueConfig =
+            mReactStyle.getMap(styleKey)
+                ?: throw IllegalArgumentException("Style value for key \"$styleKey\" is null")
+
+        return MLRNStyleValue(styleValueConfig)
+    }
+
+    fun imageEntry(styleValue: MLRNStyleValue): ImageEntry = ImageEntry(styleValue.imageURI, styleValue.imageScale, false)
+
+    fun addImage(
+        styleValue: MLRNStyleValue,
+        callback: OnAllImagesLoaded? = null,
+    ) {
+        if (!styleValue.shouldAddImage()) {
+            callback?.onAllImagesLoaded()
+            return
+        }
+
+        val uriStr = styleValue.imageURI!!
+        val images: Array<Map.Entry<String, ImageEntry>> =
+            arrayOf(
+                AbstractMap.SimpleEntry(uriStr, imageEntry(styleValue)),
+            )
+        val task = DownloadMapImageTask(mContext, mMap, callback)
+        task.execute(*images)
+    }
+}