@maplibre/maplibre-react-native 11.0.0-alpha.4 → 11.0.0-alpha.40

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.14.0"
+$MLRN_NATIVE_VERSION ||= "6.22.1"
 $MLRN_SPM_SPEC ||= {
   url: "https://github.com/maplibre/maplibre-gl-native-distribution",
   requirement: {
@@ -22,9 +22,9 @@ def $MLRN._add_spm_to_target(project, target, url, requirement, product_name)
   if !pkg
     pkg = project.new(pkg_class)
     pkg.repositoryURL = url
-    pkg.requirement = requirement
     project.root_object.package_references << pkg
   end
+  pkg.requirement = requirement
   ref = target.package_product_dependencies.find { |r| r.class == ref_class && r.package == pkg && r.product_name == product_name }
   if !ref
     ref = project.new(ref_class)

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
 
@@ -10,11 +18,9 @@ _React Native library for creating maps
 with [MapLibre Native for Android & iOS](https://github.com/maplibre/maplibre-gl-native)._
 
 > [!IMPORTANT]
-> Support for the new architecture with v10 is only through the interoperability layer. There are still quite a few
-> [issues](https://github.com/maplibre/maplibre-react-native/issues?q=is%3Aissue%20state%3Aopen%20type%3ABug%20label%3A%22Architecture%3A%20New%22),
-> when used with the new architecture. Switch to the v11 alpha releases on the
-> [`alpha`](https://github.com/maplibre/maplibre-react-native/tree/alpha) branch for better support of the new
-> architecture.
+> 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 library

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")
     }

package/android/gradle.properties

@@ -5,7 +5,7 @@ org.maplibre.reactnative.compileSdkVersion=35
 org.maplibre.reactnative.ndkVersion=27.1.12297006
 
 # MapLibre React Native
-org.maplibre.reactnative.nativeVersion=11.10.1
+org.maplibre.reactnative.nativeVersion=12.2.3
 org.maplibre.reactnative.nativeVariant=opengl
 org.maplibre.reactnative.pluginVersion=3.0.2
 org.maplibre.reactnative.turfVersion=6.0.1

package/android/src/main/AndroidManifest.xml

@@ -1,4 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 </manifest>

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

@@ -6,107 +6,167 @@ 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.layers.MLRNLayerManager
 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.sources.geojsonsource.MLRNGeoJSONSourceManager
+import org.maplibre.reactnative.components.sources.geojsonsource.MLRNGeoJSONSourceModule
+import org.maplibre.reactnative.components.sources.imagesource.MLRNImageSourceManager
+import org.maplibre.reactnative.components.sources.tilesources.rastersource.MLRNRasterSourceManager
+import org.maplibre.reactnative.components.sources.tilesources.vectorsource.MLRNVectorSourceManager
+import org.maplibre.reactnative.components.sources.tilesources.vectorsource.MLRNVectorSourceModule
 import org.maplibre.reactnative.modules.MLRNLocationModule
-import org.maplibre.reactnative.modules.MLRNLogging
-import org.maplibre.reactnative.modules.MLRNModule
+import org.maplibre.reactnative.modules.MLRNLogModule
+import org.maplibre.reactnative.modules.MLRNNetworkModule
 import org.maplibre.reactnative.modules.MLRNOfflineModule
-import org.maplibre.reactnative.modules.MLRNSnapshotModule
-
+import org.maplibre.reactnative.modules.MLRNStaticMapModule
+import org.maplibre.reactnative.utils.ReactTagResolver
 
 class MLRNPackage : BaseReactPackage() {
     override fun getModule(
         name: String,
-        reactContext: ReactApplicationContext
+        reactContext: ReactApplicationContext,
     ): NativeModule? {
         when (name) {
-            MLRNModule.REACT_CLASS -> return MLRNModule(reactContext)
-            MLRNOfflineModule.REACT_CLASS -> return MLRNOfflineModule(reactContext)
-            MLRNSnapshotModule.NAME -> return MLRNSnapshotModule(reactContext)
-            MLRNLocationModule.REACT_CLASS -> return MLRNLocationModule(reactContext)
-            MLRNLogging.REACT_CLASS -> return MLRNLogging(reactContext)
-        }
-
-        return null
-    }
-
-    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
-        return ReactModuleInfoProvider {
-            val moduleInfos: MutableMap<String, ReactModuleInfo> = HashMap()
-
-            moduleInfos[MLRNModule.REACT_CLASS] = ReactModuleInfo(
-                MLRNModule.REACT_CLASS,
-                MLRNModule.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
+            MLRNMapViewModule.NAME -> return MLRNMapViewModule(
+                reactContext,
+                getReactTagResolver(reactContext),
             )
 
-            moduleInfos[MLRNOfflineModule.REACT_CLASS] = ReactModuleInfo(
-                MLRNOfflineModule.REACT_CLASS,
-                MLRNOfflineModule.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
+            MLRNCameraModule.NAME -> return MLRNCameraModule(
+                reactContext,
+                getReactTagResolver(reactContext),
             )
 
-            moduleInfos[MLRNSnapshotModule.NAME] = ReactModuleInfo(
-                MLRNSnapshotModule.NAME,
-                MLRNSnapshotModule.NAME,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                false,  // isCxxModule
-                true // isTurboModule
+            MLRNGeoJSONSourceModule.NAME -> return MLRNGeoJSONSourceModule(
+                reactContext,
+                getReactTagResolver(reactContext),
             )
 
-            moduleInfos[MLRNLocationModule.REACT_CLASS] = ReactModuleInfo(
-                MLRNLocationModule.REACT_CLASS,
-                MLRNLocationModule.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
+            MLRNVectorSourceModule.NAME -> return MLRNVectorSourceModule(
+                reactContext,
+                getReactTagResolver(reactContext),
             )
 
-            moduleInfos[MLRNLogging.REACT_CLASS] = ReactModuleInfo(
-                MLRNLogging.REACT_CLASS,
-                MLRNLogging.REACT_CLASS,
-                false,  // canOverrideExistingModule
-                false,  // needsEagerInit
-                true,  // hasConstants
-                false,  // isCxxModule
-                false // isTurboModule
-            )
+            MLRNOfflineModule.NAME -> return MLRNOfflineModule(reactContext)
 
-            moduleInfos
+            MLRNStaticMapModule.NAME -> return MLRNStaticMapModule(reactContext)
+
+            MLRNLocationModule.NAME -> return MLRNLocationModule(reactContext)
+
+            MLRNLogModule.NAME -> return MLRNLogModule(reactContext)
+
+            MLRNNetworkModule.NAME -> return MLRNNetworkModule(reactContext)
         }
+
+        return null
     }
 
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider =
+        ReactModuleInfoProvider {
+            val moduleInfos: MutableMap<String, ReactModuleInfo> = HashMap()
+
+            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[MLRNGeoJSONSourceModule.NAME] =
+                ReactModuleInfo(
+                    MLRNGeoJSONSourceModule.NAME,
+                    MLRNGeoJSONSourceModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
+            moduleInfos[MLRNVectorSourceModule.NAME] =
+                ReactModuleInfo(
+                    MLRNVectorSourceModule.NAME,
+                    MLRNVectorSourceModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
+            moduleInfos[MLRNOfflineModule.NAME] =
+                ReactModuleInfo(
+                    MLRNOfflineModule.NAME,
+                    MLRNOfflineModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
+            moduleInfos[MLRNStaticMapModule.NAME] =
+                ReactModuleInfo(
+                    MLRNStaticMapModule.NAME,
+                    MLRNStaticMapModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
+            moduleInfos[MLRNLocationModule.NAME] =
+                ReactModuleInfo(
+                    MLRNLocationModule.NAME,
+                    MLRNLocationModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
+            moduleInfos[MLRNLogModule.NAME] =
+                ReactModuleInfo(
+                    MLRNLogModule.NAME,
+                    MLRNLogModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
+            moduleInfos[MLRNNetworkModule.NAME] =
+                ReactModuleInfo(
+                    MLRNNetworkModule.NAME,
+                    MLRNNetworkModule.NAME,
+                    canOverrideExistingModule = false,
+                    needsEagerInit = false,
+                    isCxxModule = false,
+                    isTurboModule = true,
+                )
+
+            moduleInfos
+        }
+
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
         val managers: MutableList<ViewManager<*, *>> = ArrayList()
 
@@ -115,30 +175,34 @@ 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())
 
         // sources
-        managers.add(MLRNVectorSourceManager(reactContext))
-        managers.add(MLRNShapeSourceManager(reactContext))
+        managers.add(MLRNImageSourceManager(reactContext))
+        managers.add(MLRNGeoJSONSourceManager(reactContext))
         managers.add(MLRNRasterSourceManager(reactContext))
-        managers.add(MLRNImageSourceManager())
+        managers.add(MLRNVectorSourceManager(reactContext))
 
         // images
         managers.add(MLRNImagesManager(reactContext))
 
         // layers
-        managers.add(MLRNFillLayerManager())
-        managers.add(MLRNFillExtrusionLayerManager())
-        managers.add(MLRNHeatmapLayerManager())
-        managers.add(MLRNLineLayerManager())
-        managers.add(MLRNCircleLayerManager())
-        managers.add(MLRNSymbolLayerManager())
-        managers.add(MLRNRasterLayerManager())
-        managers.add(MLRNBackgroundLayerManager())
+        managers.add(MLRNLayerManager())
 
         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/AbstractMapFeature.kt

@@ -0,0 +1,13 @@
+package org.maplibre.reactnative.components
+
+import android.content.Context
+import com.facebook.react.views.view.ReactViewGroup
+import org.maplibre.reactnative.components.mapview.MLRNMapView
+
+abstract class AbstractMapFeature(
+    context: Context?,
+) : ReactViewGroup(context) {
+    abstract fun addToMap(mapView: MLRNMapView)
+
+    abstract fun removeFromMap(mapView: MLRNMapView)
+}

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();
+    }
+}