@maplibre/maplibre-react-native 10.0.0-alpha.8 → 10.0.0-beta.1

package/LICENSE.md

@@ -1,9 +1,9 @@
 Copyright (c) 2022 MapLibre contributors
 
+Copyright (c) 2015-2020 Mapbox
+
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-This project was originally forked from https://github.com/rnmapbox/maps, also under the MIT license, but without a copyright holder notice.

package/README.md

@@ -1,40 +1,38 @@
----
-
 [![MapLibre Logo](https://maplibre.org/img/maplibre-logo-big.svg)](https://maplibre.org)
 
+# MapLibre React Native
+[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE.md)
+[![Version](https://img.shields.io/npm/v/@maplibre/maplibre-react-native)](https://www.npmjs.com/package/@maplibre/maplibre-react-native)
+[![Actions](https://img.shields.io/github/actions/workflow/status/maplibre/maplibre-react-native/review.yml?label=Actions
+)](https://github.com/maplibre/maplibre-react-native/actions/workflows/review.yml)
 
-# MapLibre GL SDK for React Native
 
-_A React Native library for building maps with   
-the [MapLibre GL Native SDK for iOS & Android](https://github.com/maplibre/maplibre-gl-native)_.
+_React Native library for creating maps with [MapLibre Native for Android & iOS](https://github.com/maplibre/maplibre-gl-native)_.
 
 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 product
 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.
 
----
-
-[![npm version](https://badge.fury.io/js/%40maplibre%2Fmaplibre-react-native.svg)](https://badge.fury.io/js/%40maplibre%2Fmaplibre-react-native)  
-[![Android Build](https://github.com/maplibre/maplibre-react-native/actions/workflows/android-actions.yml/badge.svg)](https://github.com/maplibre/maplibre-react-native/actions/workflows/android-actions.yml)  
-[![iOS Build](https://github.com/maplibre/maplibre-react-native/actions/workflows/ios-actions.yml/badge.svg)](https://github.com/maplibre/maplibre-react-native/actions/workflows/ios-actions.yml)  
-
----
-
-<br>
-
-<img src="./assets/indoor_building_map_android.png"
-     alt="Indoor Building Map Android"
-     height="300"
-      />
-<img src="./assets/indoor_building_map_ios.png"
-     alt="Indoor Building Map iOS"
-     height="300"
-      />
+<p align="center">
+    <img src="/docs/assets/indoor-building-map-android.png"
+         alt="Indoor Building Map Android"
+         height="300"
+          />
+    <img src="/docs/assets/indoor-building-map-ios.png"
+         alt="Indoor Building Map iOS"
+         height="300"
+          />
+</p>
 
 ## Documentation
 
-[Getting Started (start here)](/docs/GettingStarted.md)
+- [Getting Started](/docs/GettingStarted.md)
+- Installation
+  - React Native  
+    - [Android](/android/install.md)
+    - [iOS](/ios/install.md)
+  - [Expo](/plugin/install.md)
 
 ### Components
 
@@ -79,8 +77,8 @@ diverged, it has become necessary to separate the projects into specific wrapper
 ## Contributing / local development
 
 Read the [CONTRIBUTING.md](CONTRIBUTING.md) guide in order to get familiar with how we do things around here and
-set up your local dev environment.
+set up your local development environment.
 
 ## Community
 
-Join the #maplibre-native Slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/
+Join the `#maplibre-react-native` or `#maplibre` [Slack channels at OSMUS](https://slack.openstreetmap.us/).

package/android/build.gradle

@@ -1,4 +1,12 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.android.library'
+
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
 
 buildscript {
     ext {
@@ -8,27 +16,54 @@ buildscript {
         targetSdkVersion = 33
         supportLibVersion = "28.0.0"
     }
+
     repositories {
         google()
-        jcenter()
+        mavenCentral()
     }
-    dependencies {
-        classpath 'com.android.tools.build:gradle'
+}
+
+android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 33)
+    buildToolsVersion safeExtGet("buildToolsVersion", '33.0.1')
 
-        // NOTE: Do not place your application dependencies here; they belong
-        // in the individual module build.gradle files
+    defaultConfig {
+        minSdkVersion safeExtGet('minSdkVersion', 16)
+        targetSdkVersion safeExtGet('targetSdkVersion', 26)
+        versionCode 1
+        versionName "1.0"
+        buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString())
     }
-}
 
-allprojects {
-    repositories {
-        mavenLocal()
-        google()
-        jcenter()
-        maven { url "https://jitpack.io" }
-        maven {
-            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
         }
     }
 }
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    // MapLibre SDK
+    implementation "org.maplibre.gl:android-sdk:11.5.0"
+    implementation "org.maplibre.gl:android-sdk-turf:6.0.1"
+
+    // Dependencies
+    implementation "androidx.vectordrawable:vectordrawable:1.1.0"
+    implementation "androidx.annotation:annotation:1.7.0"
+    implementation "androidx.appcompat:appcompat:1.6.1"
+    implementation "com.squareup.okhttp3:okhttp:${safeExtGet('okhttpVersion', '4.9.0')}"
+    implementation "com.squareup.okhttp3:okhttp-urlconnection:${safeExtGet('okhttpVersion', '4.9.0')}"
+
+    // MapLibre plugins
+    implementation ("org.maplibre.gl:android-plugin-localization-v9:3.0.1")
+    implementation ("org.maplibre.gl:android-plugin-annotation-v9:3.0.1")
+    implementation ("org.maplibre.gl:android-plugin-markerview-v9:3.0.1")
+}

package/android/install.md

@@ -2,10 +2,11 @@
 
 ## Access tokens
 
-Note that the Android SDK is slightly peculiar in that it
+> [!NOTE]
+> MapLibre Native for Android is slightly peculiar in that it
 _requires_ setting an access token, even though it will be `null` for
 most users (only Mapbox authenticates this way). Even if it feels odd,
-you have to have a line like this in your code before using the SDK.
+you have to have a line like this in your code before using the library.
 You can put this near the top of your `App.js` for convenience.
 
 ```javascript

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.maplibre.reactnative">
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
+</manifest>

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

@@ -0,0 +1,95 @@
+package org.maplibre.reactnative;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+import org.maplibre.reactnative.components.annotation.MLRNCalloutManager;
+import org.maplibre.reactnative.components.annotation.MLRNPointAnnotationManager;
+import org.maplibre.reactnative.components.annotation.MLRNMarkerViewManager;
+import org.maplibre.reactnative.components.camera.MLRNCameraManager;
+import org.maplibre.reactnative.components.images.MLRNImagesManager;
+import org.maplibre.reactnative.components.location.MLRNNativeUserLocationManager;
+import org.maplibre.reactnative.components.mapview.MLRNMapViewManager;
+import org.maplibre.reactnative.components.mapview.MLRNAndroidTextureMapViewManager;
+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.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;
+
+public class MLRNPackage implements ReactPackage {
+
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new MLRNModule(reactApplicationContext));
+        modules.add(new MLRNOfflineModule(reactApplicationContext));
+        modules.add(new MLRNSnapshotModule(reactApplicationContext));
+        modules.add(new MLRNLocationModule(reactApplicationContext));
+        modules.add(new MLRNLogging(reactApplicationContext));
+
+        return modules;
+    }
+
+    @Deprecated
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
+        List<ViewManager> managers = new ArrayList<>();
+
+        // components
+        managers.add(new MLRNCameraManager(reactApplicationContext));
+        managers.add(new MLRNMapViewManager(reactApplicationContext));
+        managers.add(new MLRNMarkerViewManager(reactApplicationContext));
+        managers.add(new MLRNAndroidTextureMapViewManager(reactApplicationContext));
+        managers.add(new MLRNLightManager());
+        managers.add(new MLRNPointAnnotationManager(reactApplicationContext));
+        managers.add(new MLRNCalloutManager());
+        managers.add(new MLRNNativeUserLocationManager());
+
+        // sources
+        managers.add(new MLRNVectorSourceManager(reactApplicationContext));
+        managers.add(new MLRNShapeSourceManager(reactApplicationContext));
+        managers.add(new MLRNRasterSourceManager(reactApplicationContext));
+        managers.add(new MLRNImageSourceManager());
+
+        // images
+        managers.add(new MLRNImagesManager(reactApplicationContext));
+
+        // layers
+        managers.add(new MLRNFillLayerManager());
+        managers.add(new MLRNFillExtrusionLayerManager());
+        managers.add(new MLRNHeatmapLayerManager());
+        managers.add(new MLRNLineLayerManager());
+        managers.add(new MLRNCircleLayerManager());
+        managers.add(new MLRNSymbolLayerManager());
+        managers.add(new MLRNRasterLayerManager());
+        managers.add(new MLRNBackgroundLayerManager());
+
+        return managers;
+    }
+}

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

@@ -0,0 +1,35 @@
+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;
+
+import javax.annotation.Nullable;
+
+public class AbstractEvent extends Event<AbstractEvent> {
+    private String mEventName;
+    private final boolean mCanCoalesce;
+    private WritableMap mEvent;
+
+    public AbstractEvent(int viewId, String eventName, boolean canCoalesce, @Nullable WritableMap event) {
+        super(viewId);
+        mEventName = eventName;
+        mCanCoalesce = canCoalesce;
+        mEvent = event;
+    }
+
+    @Override
+    public String getEventName() {
+        return mEventName;
+    }
+
+    @Override
+    public void dispatch(RCTEventEmitter rctEventEmitter) {
+        rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mEvent);
+    }
+
+    @Override
+    public boolean canCoalesce() {
+        return mCanCoalesce;
+    }
+}

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

@@ -0,0 +1,84 @@
+package org.maplibre.reactnative.components;
+
+import android.view.ViewGroup;
+
+import org.maplibre.reactnative.BuildConfig;
+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.UIManagerModule;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.common.UIManagerType;
+
+import org.maplibre.reactnative.events.IEvent;
+
+import java.util.HashMap;
+import java.util.Map;
+
+import javax.annotation.Nullable;
+import javax.annotation.Nonnull;
+
+abstract public class AbstractEventEmitter<T extends ViewGroup> extends ViewGroupManager<T> {
+    private static final double BRIDGE_TIMEOUT_MS = 10;
+    private Map<String, Long> mRateLimitedEvents;
+    private EventDispatcher mEventDispatcher;
+    private ReactApplicationContext mRCTAppContext;
+
+    public AbstractEventEmitter(ReactApplicationContext reactApplicationContext) {
+        mRateLimitedEvents = new HashMap<>();
+        mRCTAppContext = reactApplicationContext;
+    }
+
+    public void handleEvent(IEvent event) {
+        String eventCacheKey = getEventCacheKey(event);
+
+        // fail safe to protect bridge from being spammed
+        if (shouldDropEvent(eventCacheKey, event)) {
+            return;
+        }
+
+        mRateLimitedEvents.put(eventCacheKey, System.currentTimeMillis());
+        mEventDispatcher.dispatchEvent(new AbstractEvent(event.getID(), event.getKey(), event.canCoalesce(), event.toJSON()));
+    }
+
+    @Override
+    protected void addEventEmitters(ThemedReactContext context, @Nonnull T view) {
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            mEventDispatcher = UIManagerHelper.getUIManager(context, UIManagerType.FABRIC).getEventDispatcher();
+        } else {
+            mEventDispatcher = context.getNativeModule(UIManagerModule.class).getEventDispatcher();
+        }
+    }
+
+    @Nullable
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        Map<String, String> events = customEvents();
+
+        if (events == null) {
+            return null;
+        }
+
+        Map<String, Object> exportedEvents = new HashMap<>();
+
+        for (Map.Entry<String, String> event : events.entrySet()) {
+            exportedEvents.put(event.getKey(), MapBuilder.of("registrationName", event.getValue()));
+        }
+
+        return exportedEvents;
+    }
+
+    @Nullable
+    public abstract Map<String, String> customEvents();
+
+    private boolean shouldDropEvent(String cacheKey, IEvent event) {
+        Long lastEventTimestamp = mRateLimitedEvents.get(cacheKey);
+        return lastEventTimestamp != null && (event.getTimestamp() - lastEventTimestamp) <= BRIDGE_TIMEOUT_MS;
+    }
+
+    private String getEventCacheKey(IEvent event) {
+        return String.format("%s-%s", event.getKey(), event.getType());
+    }
+}

package/android/src/main/java/org/maplibre/reactnative/components/AbstractMapFeature.java

@@ -0,0 +1,15 @@
+package org.maplibre.reactnative.components;
+
+import android.content.Context;
+
+import com.facebook.react.views.view.ReactViewGroup;
+import org.maplibre.reactnative.components.mapview.MLRNMapView;
+
+public abstract class AbstractMapFeature extends ReactViewGroup {
+    public AbstractMapFeature(Context context) {
+        super(context);
+    }
+
+    public abstract void addToMap(MLRNMapView mapView);
+    public abstract void removeFromMap(MLRNMapView mapView);
+}

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

@@ -0,0 +1,11 @@
+package org.maplibre.reactnative.components.annotation;
+
+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/annotation/MLRNCalloutManager.java

@@ -0,0 +1,18 @@
+package org.maplibre.reactnative.components.annotation;
+
+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/annotation/MLRNMarkerView.java

@@ -0,0 +1,112 @@
+package org.maplibre.reactnative.components.annotation;
+
+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/annotation/MLRNMarkerViewManager.java

@@ -0,0 +1,45 @@
+package org.maplibre.reactnative.components.annotation;
+
+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();
+    }
+}