@maplibre/maplibre-react-native 11.0.0-alpha.1 → 11.0.0-alpha.11

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.11.0"
+$MLRN_NATIVE_VERSION ||= "6.17.1"
 $MLRN_SPM_SPEC ||= {
   url: "https://github.com/maplibre/maplibre-gl-native-distribution",
   requirement: {
@@ -73,7 +73,7 @@ Pod::Spec.new do |s|
   s.source       = { :git => "https://github.com/maplibre/maplibre-react-native.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,cpp}"
-  s.private_header_files = "ios/**/*.h"
+  s.public_header_files = "ios/MLRNCustomHeaders.h"
 
  install_modules_dependencies(s)
 end

package/README.md

@@ -1,4 +1,12 @@
-[![MapLibre Logo](https://maplibre.org/img/maplibre-logo-big.svg)](https://maplibre.org)
+<p align="center">
+  <a href="https://maplibre.org">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://maplibre.org/img/maplibre-logos/maplibre-logo-for-dark-bg.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://maplibre.org/img/maplibre-logos/maplibre-logo-for-light-bg.svg">
+      <img alt="MapLibre Logo" src="https://maplibre.org/img/maplibre-logos/maplibre-logo-for-light-bg.svg" width="200">
+    </picture>
+  </a>
+</p>
 
 # MapLibre React Native
 
@@ -9,8 +17,13 @@
 _React Native library for creating maps
 with [MapLibre Native for Android & iOS](https://github.com/maplibre/maplibre-gl-native)._
 
+> [!IMPORTANT]
+> This is the v11 alpha branch, which **only supports the new architecture**. Not all components and modules have been ported yet.
+> 
+> Please refer to the [v11 migration guide](https://github.com/maplibre/maplibre-react-native/blob/alpha/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 product
+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
 diverged, it has become necessary to separate the projects into specific wrappers by underlying renderer.
 

package/android/build.gradle

@@ -93,9 +93,6 @@ dependencies {
     implementation "org.maplibre.gl:android-sdk-${getConfigurableExtOrDefault('nativeVariant')}:${getConfigurableExtOrDefault('nativeVersion')}"
 
     // MapLibre Plugins
-    implementation("org.maplibre.gl:android-plugin-localization-v9:${getConfigurableExtOrDefault('pluginVersion')}") {
-        exclude(group: "org.maplibre.gl", module: "android-sdk")
-    }
     implementation("org.maplibre.gl:android-plugin-annotation-v9:${getConfigurableExtOrDefault('pluginVersion')}") {
         exclude(group: "org.maplibre.gl", module: "android-sdk")
     }
@@ -107,9 +104,9 @@ dependencies {
     implementation "org.maplibre.gl:android-sdk-turf:${getConfigurableExtOrDefault('turfVersion')}"
     implementation "com.squareup.okhttp3:okhttp:${getConfigurableExtOrDefault('okhttpVersion')}"
     implementation "com.squareup.okhttp3:okhttp-urlconnection:${getConfigurableExtOrDefault('okhttpVersion')}"
-    implementation "androidx.vectordrawable:vectordrawable:1.1.0"
-    implementation "androidx.annotation:annotation:1.7.0"
-    implementation "androidx.appcompat:appcompat:1.6.1"
+    implementation "androidx.vectordrawable:vectordrawable:1.2.0"
+    implementation "androidx.annotation:annotation:1.9.1"
+    implementation "androidx.appcompat:appcompat:1.7.1"
 
     // Dependencies for Google Location Engine
     if (getConfigurableExtOrDefault("locationEngine") == "google") {

package/android/gradle.properties

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

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

@@ -6,32 +6,34 @@ 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.annotation.MLRNCalloutManager
-import org.maplibre.reactnative.components.annotation.MLRNMarkerViewManager
-import org.maplibre.reactnative.components.annotation.MLRNPointAnnotationManager
+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.camera.MLRNCameraManager
+import org.maplibre.reactnative.components.camera.MLRNCameraModule
 import org.maplibre.reactnative.components.images.MLRNImagesManager
 import org.maplibre.reactnative.components.location.MLRNNativeUserLocationManager
 import org.maplibre.reactnative.components.mapview.MLRNAndroidTextureMapViewManager
 import org.maplibre.reactnative.components.mapview.MLRNMapViewManager
-import org.maplibre.reactnative.components.styles.layers.MLRNBackgroundLayerManager
-import org.maplibre.reactnative.components.styles.layers.MLRNCircleLayerManager
-import org.maplibre.reactnative.components.styles.layers.MLRNFillExtrusionLayerManager
-import org.maplibre.reactnative.components.styles.layers.MLRNFillLayerManager
-import org.maplibre.reactnative.components.styles.layers.MLRNHeatmapLayerManager
-import org.maplibre.reactnative.components.styles.layers.MLRNLineLayerManager
-import org.maplibre.reactnative.components.styles.layers.MLRNRasterLayerManager
-import org.maplibre.reactnative.components.styles.layers.MLRNSymbolLayerManager
-import org.maplibre.reactnative.components.styles.light.MLRNLightManager
-import org.maplibre.reactnative.components.styles.sources.MLRNImageSourceManager
-import org.maplibre.reactnative.components.styles.sources.MLRNRasterSourceManager
-import org.maplibre.reactnative.components.styles.sources.MLRNShapeSourceManager
-import org.maplibre.reactnative.components.styles.sources.MLRNVectorSourceManager
+import org.maplibre.reactnative.components.mapview.MLRNMapViewModule
+import org.maplibre.reactnative.components.layers.MLRNBackgroundLayerManager
+import org.maplibre.reactnative.components.layers.MLRNCircleLayerManager
+import org.maplibre.reactnative.components.layers.MLRNFillExtrusionLayerManager
+import org.maplibre.reactnative.components.layers.MLRNFillLayerManager
+import org.maplibre.reactnative.components.layers.MLRNHeatmapLayerManager
+import org.maplibre.reactnative.components.layers.MLRNLineLayerManager
+import org.maplibre.reactnative.components.layers.MLRNRasterLayerManager
+import org.maplibre.reactnative.components.layers.MLRNSymbolLayerManager
+import org.maplibre.reactnative.components.sources.MLRNImageSourceManager
+import org.maplibre.reactnative.components.sources.MLRNRasterSourceManager
+import org.maplibre.reactnative.components.sources.MLRNShapeSourceManager
+import org.maplibre.reactnative.components.sources.MLRNVectorSourceManager
 import org.maplibre.reactnative.modules.MLRNLocationModule
 import org.maplibre.reactnative.modules.MLRNLogging
 import org.maplibre.reactnative.modules.MLRNModule
 import org.maplibre.reactnative.modules.MLRNOfflineModule
 import org.maplibre.reactnative.modules.MLRNSnapshotModule
+import org.maplibre.reactnative.utils.ReactTagResolver
 
 
 class MLRNPackage : BaseReactPackage() {
@@ -41,6 +43,16 @@ class MLRNPackage : BaseReactPackage() {
     ): NativeModule? {
         when (name) {
             MLRNModule.REACT_CLASS -> return MLRNModule(reactContext)
+            MLRNMapViewModule.NAME -> return MLRNMapViewModule(
+                reactContext,
+                getReactTagResolver(reactContext)
+            )
+            MLRNCameraModule.NAME -> return MLRNCameraModule(
+                reactContext,
+                getReactTagResolver(reactContext)
+            )
+
+
             MLRNOfflineModule.REACT_CLASS -> return MLRNOfflineModule(reactContext)
             MLRNSnapshotModule.NAME -> return MLRNSnapshotModule(reactContext)
             MLRNLocationModule.REACT_CLASS -> return MLRNLocationModule(reactContext)
@@ -57,50 +69,64 @@ class MLRNPackage : BaseReactPackage() {
             moduleInfos[MLRNModule.REACT_CLASS] = ReactModuleInfo(
                 MLRNModule.REACT_CLASS,
                 MLRNModule.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = false
+            )
+
+            moduleInfos[MLRNMapViewModule.NAME] = ReactModuleInfo(
+                MLRNMapViewModule.NAME,
+                MLRNMapViewModule.NAME,
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = true
+            )
+
+            moduleInfos[MLRNCameraModule.NAME] = ReactModuleInfo(
+                MLRNCameraModule.NAME,
+                MLRNCameraModule.NAME,
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = true
             )
 
             moduleInfos[MLRNOfflineModule.REACT_CLASS] = ReactModuleInfo(
                 MLRNOfflineModule.REACT_CLASS,
                 MLRNOfflineModule.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = false
             )
 
             moduleInfos[MLRNSnapshotModule.NAME] = ReactModuleInfo(
                 MLRNSnapshotModule.NAME,
                 MLRNSnapshotModule.NAME,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                false,  // isCxxModule
-                true // isTurboModule
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = true
             )
 
             moduleInfos[MLRNLocationModule.REACT_CLASS] = ReactModuleInfo(
                 MLRNLocationModule.REACT_CLASS,
                 MLRNLocationModule.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = false
             )
 
             moduleInfos[MLRNLogging.REACT_CLASS] = ReactModuleInfo(
                 MLRNLogging.REACT_CLASS,
                 MLRNLogging.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
+                canOverrideExistingModule = false,
+                needsEagerInit = false,
+                isCxxModule = false,
+                isTurboModule = false
             )
 
             moduleInfos
@@ -115,7 +141,6 @@ class MLRNPackage : BaseReactPackage() {
         managers.add(MLRNMapViewManager(reactContext))
         managers.add(MLRNMarkerViewManager(reactContext))
         managers.add(MLRNAndroidTextureMapViewManager(reactContext))
-        managers.add(MLRNLightManager())
         managers.add(MLRNPointAnnotationManager(reactContext))
         managers.add(MLRNCalloutManager())
         managers.add(MLRNNativeUserLocationManager())
@@ -141,4 +166,16 @@ class MLRNPackage : BaseReactPackage() {
 
         return managers
     }
+
+    private var reactTagResolver: ReactTagResolver? = null
+
+    private fun getReactTagResolver(context: ReactApplicationContext): ReactTagResolver {
+        val reactTagResolver = reactTagResolver
+        if (reactTagResolver == null) {
+            val result = ReactTagResolver(context)
+            this.reactTagResolver = result
+            return result
+        }
+        return reactTagResolver
+    }
 }

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

@@ -0,0 +1,24 @@
+package org.maplibre.reactnative.components
+
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+class AbstractEvent(
+    viewId: Int,
+    private val mEventName: String,
+    private val mCanCoalesce: Boolean,
+    private val mEvent: WritableMap?
+) : Event<AbstractEvent>(viewId) {
+    override fun getEventName(): String {
+        return mEventName
+    }
+
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+        rctEventEmitter.receiveEvent(viewTag, eventName, mEvent)
+    }
+
+    override fun canCoalesce(): Boolean {
+        return mCanCoalesce
+    }
+}

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

@@ -0,0 +1,71 @@
+package org.maplibre.reactnative.components
+
+import android.view.ViewGroup
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.common.UIManagerType
+import com.facebook.react.uimanager.events.EventDispatcher
+import org.maplibre.reactnative.events.IEvent
+
+abstract class AbstractEventEmitter<T : ViewGroup>(private val reactContext: ReactApplicationContext) :
+    ViewGroupManager<T>() {
+    private val mRateLimitedEvents: MutableMap<String?, Long?> = HashMap()
+    private var mEventDispatcher: EventDispatcher? = null
+
+    fun handleEvent(event: IEvent) {
+        val eventCacheKey = getEventCacheKey(event)
+
+        // fail safe to protect bridge from being spammed
+        if (shouldDropEvent(eventCacheKey, event)) {
+            return
+        }
+
+        mRateLimitedEvents.put(eventCacheKey, System.currentTimeMillis())
+        mEventDispatcher!!.dispatchEvent(
+            AbstractEvent(
+                event.getID(), event.getKey(), event.canCoalesce(), event.toJSON()
+            )
+        )
+    }
+
+    override fun addEventEmitters(context: ThemedReactContext, view: T) {
+        mEventDispatcher =
+            UIManagerHelper.getUIManager(context, UIManagerType.Companion.FABRIC)!!.eventDispatcher
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String?, Any?>? {
+        val events = customEvents()
+
+        if (events == null) {
+            return null
+        }
+
+        val exportedEvents: MutableMap<String?, Any?> = HashMap<String?, Any?>()
+
+        for (event in events.entries) {
+            exportedEvents.put(
+                event.key, MapBuilder.of<String?, String?>("registrationName", event.value!!)
+            )
+        }
+
+        return exportedEvents
+    }
+
+    abstract fun customEvents(): Map<String, String>?
+
+    private fun shouldDropEvent(cacheKey: String?, event: IEvent): Boolean {
+        val lastEventTimestamp = mRateLimitedEvents.get(cacheKey)
+        return lastEventTimestamp != null && (event.getTimestamp() - lastEventTimestamp) <= BRIDGE_TIMEOUT_MS
+    }
+
+    private fun getEventCacheKey(event: IEvent): String {
+        return String.format("%s-%s", event.getKey(), event.getType())
+    }
+
+    companion object {
+        private const val BRIDGE_TIMEOUT_MS = 10.0
+    }
+}

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

@@ -0,0 +1,11 @@
+package org.maplibre.reactnative.components.annotations;
+
+import android.content.Context;
+
+import com.facebook.react.views.view.ReactViewGroup;
+
+public class MLRNCallout extends ReactViewGroup {
+    public MLRNCallout(Context context) {
+        super(context);
+    }
+}

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

@@ -0,0 +1,18 @@
+package org.maplibre.reactnative.components.annotations;
+
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+
+public class MLRNCalloutManager extends ViewGroupManager<MLRNCallout> {
+    public static final String REACT_CLASS = "MLRNCallout";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    protected MLRNCallout createViewInstance(ThemedReactContext reactContext) {
+        return new MLRNCallout(reactContext);
+    }
+}

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

@@ -0,0 +1,112 @@
+package org.maplibre.reactnative.components.annotations;
+
+import android.content.Context;
+import android.graphics.PointF;
+import android.view.View;
+
+import androidx.annotation.NonNull;
+
+import org.maplibre.geojson.Point;
+import org.maplibre.android.maps.MapLibreMap;
+import org.maplibre.android.maps.OnMapReadyCallback;
+import org.maplibre.reactnative.components.AbstractMapFeature;
+import org.maplibre.reactnative.components.mapview.MLRNMapView;
+import org.maplibre.reactnative.utils.GeoJSONUtils;
+
+public class MLRNMarkerView extends AbstractMapFeature implements MarkerView.OnPositionUpdateListener, View.OnLayoutChangeListener {
+    private MLRNMarkerViewManager mManager;
+    private MLRNMapView mMapView;
+
+    private View mChildView;
+
+    private MarkerViewManager mMarkerViewManager;
+
+    private MarkerView mMarkerView;
+    private Point mCoordinate;
+    private Float[] mAnchor;
+
+
+    public MLRNMarkerView(Context context, MLRNMarkerViewManager manager) {
+        super(context);
+        mManager = manager;
+    }
+
+    @Override
+    public void addView(View childView, int childPosition) {
+        mChildView = childView;
+    }
+
+    public void setCoordinate(Point point) {
+        mCoordinate = point;
+
+        if (mMarkerView != null) {
+            mMarkerView.setLatLng(GeoJSONUtils.toLatLng(point));
+        }
+    }
+
+    public void setAnchor(float x, float y) {
+        mAnchor = new Float[]{x, y};
+        refresh();
+    }
+
+    public void refresh() {
+        // this will cause position to be recalculated
+        if (mMarkerView != null) {
+            mMarkerView.setLatLng(GeoJSONUtils.toLatLng(mCoordinate));
+        }
+    }
+
+    @Override
+    public void addToMap(MLRNMapView mapView) {
+        mMapView = mapView;
+
+        final MLRNMarkerView mlrnMarkerView = this;
+
+        mMapView.getMapAsync(
+            new OnMapReadyCallback() {
+                @Override
+                public void onMapReady(@NonNull MapLibreMap mapLibreMap) {
+                    mMarkerViewManager = mMapView.getMarkerViewManager(mapLibreMap);
+
+                    if (mChildView != null) {
+                        mMarkerView = new MarkerView(GeoJSONUtils.toLatLng(mCoordinate), mChildView);
+                        mMarkerView.setOnPositionUpdateListener(mlrnMarkerView);
+                        mChildView.addOnLayoutChangeListener(mlrnMarkerView);
+                        mMarkerViewManager.addMarker(mMarkerView);
+                    }
+                }
+            }
+        );
+    }
+
+    @Override
+    public PointF onUpdate(PointF pointF) {
+        if (mAnchor != null) {
+            return new PointF(
+                    pointF.x - mChildView.getWidth() * mAnchor[0],
+                    pointF.y - mChildView.getHeight() * mAnchor[1]
+                    );
+        }
+        return pointF;
+    }
+
+    @Override
+    public void removeFromMap(MLRNMapView mapView) {
+        if (mMarkerView != null) {
+            mMarkerViewManager.removeMarker(mMarkerView);
+            mChildView.removeOnLayoutChangeListener(this);
+            mMarkerView.setOnPositionUpdateListener(null);
+            mMarkerView = null;
+            mMarkerViewManager = null;
+        }
+    }
+
+    @Override
+    public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop,
+                               int oldRight, int oldBottom) {
+        if (left != oldLeft || right != oldRight || top != oldTop || bottom != oldBottom) {
+            refresh();
+        }
+    }
+}
+

package/android/src/main/java/org/maplibre/reactnative/components/annotations/MLRNMarkerViewManager.java

@@ -0,0 +1,45 @@
+package org.maplibre.reactnative.components.annotations;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import org.maplibre.reactnative.components.AbstractEventEmitter;
+import org.maplibre.reactnative.utils.GeoJSONUtils;
+
+import java.util.Map;
+
+public class MLRNMarkerViewManager extends AbstractEventEmitter<MLRNMarkerView> {
+    public static final String REACT_CLASS = "MLRNMarkerView";
+
+    public MLRNMarkerViewManager(ReactApplicationContext reactApplicationContext) {
+        super(reactApplicationContext);
+    }
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @ReactProp(name="coordinate")
+    public void setCoordinate(MLRNMarkerView markerView, String geoJSONStr) {
+        markerView.setCoordinate(GeoJSONUtils.toPointGeometry(geoJSONStr));
+    }
+
+    @ReactProp(name="anchor")
+    public void setAnchor(MLRNMarkerView markerView, ReadableMap map) {
+        markerView.setAnchor((float) map.getDouble("x"), (float) map.getDouble("y"));
+    }
+
+    @Override
+    protected MLRNMarkerView createViewInstance(ThemedReactContext reactContext) {
+        return new MLRNMarkerView(reactContext, this);
+    }
+
+    @Override
+    public Map<String, String> customEvents() {
+        return MapBuilder.<String, String>builder()
+                .build();
+    }
+}