@rnmapbox/maps 10.0.0-beta.33 → 10.0.0-beta.35

package/.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: '@babel/eslint-parser',
-  plugins: ['react', 'react-native', 'fp', 'import'],
+  plugins: ['react', 'react-native', 'import'],
   env: {
     jest: true,
   },
@@ -38,6 +38,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:jest/recommended',
     '@react-native-community',
     'prettier',
   ],
@@ -76,7 +77,6 @@ module.exports = {
     'no-use-before-define': ['error', { functions: false }],
     'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
-    'fp/no-mutating-methods': 'warn',
     'react-native/no-inline-styles': 0,
   },
   ignorePatterns: ['**/rnmapbox.web.symlink'],

package/.nvmrc

@@ -1,2 +1,2 @@
-v14.17.0
+v14.20.0
 

package/README-v10.md

@@ -80,7 +80,7 @@ code ios/Podfile
 pod 'React-Core', :path => '../node_modules/react-native/React', modular_headers: true
 ```
 
-IOS:
+iOS:
 
  * Add `$(SDKROOT)/usr/lib/swift` to Library search paths.
 

package/README.md

@@ -12,7 +12,7 @@
 </tr>
 </table>
 
-|  [![npm version](https://badge.fury.io/js/%40react-native-mapbox-gl%2Fmaps.svg)](https://badge.fury.io/js/%40react-native-mapbox-gl%2Fmaps)  | [![iOS & Android Build](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml/badge.svg?branch=main)](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml?branch=main)  |
+|  [![npm version](https://badge.fury.io/js/%40rnmapbox%2Fmaps.svg)](https://badge.fury.io/js/%40rnmapbox%2Fmaps)  | [![iOS & Android Build](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml/badge.svg?branch=main)](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml?branch=main)  |
 |---|---|
 
 
@@ -65,9 +65,9 @@ At the moment, the following implementations are supported:
 
 |*RNMapboxMapsImpl*|*Notes*|
 |----------------|-----|
-|mapbox|New [Mapbox v10](https://www.mapbox.com/mobile-maps-sdk) implementation (BETA)|
-|maplibre|[MapLibre](https://github.com/maplibre/maplibre-gl-native) opensource fork of Mapbox SDKs|
-|mapbox-gl|Legacy mapbox implementation [iOS](https://docs.mapbox.com/android/legacy/maps/guides/) [Android](https://docs.mapbox.com/ios/legacy/maps/guides/)|
+|mapbox|New [Mapbox v10](https://www.mapbox.com/mobile-maps-sdk) implementation - recommended|
+|maplibre|[MapLibre](https://github.com/maplibre/maplibre-gl-native) opensource fork of Mapbox SDKs - will be dropped in next version|
+|mapbox-gl|Legacy mapbox implementation [iOS](https://docs.mapbox.com/android/legacy/maps/guides/) [Android](https://docs.mapbox.com/ios/legacy/maps/guides/) - legacy, will be dropped in next version|
 
 _See [iOS](ios/install.md) & [Android](android/install.md) setup guide for more details on setting `RNMapboxMapsImpl`_
 
@@ -91,17 +91,25 @@ _See [iOS](ios/install.md) & [Android](android/install.md) setup guide for more
 
 ### Step 1 - Install Package:
 
+#### Using `yarn`
+Install the latest source from git:
 ```sh
-# install with Yarn
-# yarn add @rnmapbox/maps
 yarn add rnmapbox/maps#main
+``` 
 
+#### Using `npm`
+Install the latest source from git:
+```sh
+npm install --save rnmapbox/maps#main
+``` 
 
-# or install with NPM
-# npm install @rnmapbox/maps --save
-npm install rnmapbox/maps#main --save
+#### Installing other versions
+Replace `rnmapbox/maps#main` with the following to install other versions:
+- `@rnmapbox/maps` installs the latest release
 
-```
+
+#### Using `expo`
+Please follow the [Expo Guide](/plugin/install.md).
 
 ### Step 2 - Installation Guides:
 
@@ -136,42 +144,39 @@ npm run android
 ```
 
 ## Adding a map
-
 ```js
-import React, { Component } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import MapboxGL from '@rnmapbox/maps';
 
 MapboxGL.setAccessToken('<YOUR_ACCESSTOKEN>');
 
+const App = () => {
+  return (
+    <View style={styles.page}>
+      <View style={styles.container}>
+        <MapboxGL.MapView style={styles.map} />
+      </View>
+    </View>
+  );
+}
+
+export default App;
+
 const styles = StyleSheet.create({
   page: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF'
   },
   container: {
     height: 300,
     width: 300,
-    backgroundColor: 'tomato'
   },
   map: {
     flex: 1
   }
 });
-
-export default class App extends Component {
-  render() {
-    return (
-      <View style={styles.page}>
-        <View style={styles.container}>
-          <MapboxGL.MapView style={styles.map} />
-        </View>
-      </View>
-    );
-  }
-}
 ```
 ---
 ## Documentation

package/android/install.md

@@ -20,7 +20,7 @@ Overwrite mapbox dependencies within your `android/build.gradle > buildscript >
 buildscript {
     ext {
         // ...
-        RNMapboxMapsImpl = "maplibre" // optinal - as this is the default
+        RNMapboxMapsImpl = "maplibre" // optional - as this is the default
 
         RNMapboxMapsLibs = { // optional - only required if you want to customize it
             implementation ("org.maplibre.gl:android-sdk:9.5.2")

package/android/rctmgl/build.gradle

@@ -130,7 +130,7 @@ dependencies {
             implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:5.1.0'
         }
         else if (safeExtGet("RNMapboxMapsImpl", defaultMapboxMapsImpl) == "mapbox") {
-            implementation 'com.mapbox.maps:android:10.7.0'
+            implementation 'com.mapbox.maps:android:10.8.0'
             implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:6.4.0'
         }
     }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/RCTMGLPackage.java

@@ -10,6 +10,7 @@ import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
 
+import com.mapbox.rctmgl.components.annotation.RCTMGLMarkerViewWrapperManager;
 import com.mapbox.rctmgl.components.camera.RCTMGLCameraManager;
 
 import com.mapbox.rctmgl.components.annotation.RCTMGLCalloutManager;
@@ -76,12 +77,13 @@ public class RCTMGLPackage implements ReactPackage {
         managers.add(new RCTMGLCameraManager(reactApplicationContext));
         managers.add(new RCTMGLAndroidTextureMapViewManager(reactApplicationContext));
         managers.add(new RCTMGLMapViewManager(reactApplicationContext));
-        managers.add(new RCTMGLMarkerViewManager(reactApplicationContext));
-
-        managers.add(new RCTMGLLightManager());
 
+        // annotations
+        managers.add(new RCTMGLMarkerViewManager(reactApplicationContext));
+        managers.add(new RCTMGLMarkerViewWrapperManager(reactApplicationContext));
         managers.add(new RCTMGLPointAnnotationManager(reactApplicationContext));
         managers.add(new RCTMGLCalloutManager());
+
         managers.add(new RCTMGLNativeUserLocationManager());
 
         // sources
@@ -106,6 +108,9 @@ public class RCTMGLPackage implements ReactPackage {
         managers.add(new RCTMGLSkyLayerManager());
         managers.add(new RCTMGLTerrainManager());
         managers.add(new RCTMGLBackgroundLayerManager());
+
+        managers.add(new RCTMGLLightManager());
+
         return managers;
     }
 }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerView.kt

@@ -4,17 +4,15 @@ import android.content.Context
 import android.view.View
 import com.mapbox.geojson.Point
 import com.mapbox.maps.ViewAnnotationOptions
-import com.mapbox.rctmgl.components.mapview.OnMapReadyCallback
-import com.mapbox.maps.MapboxMap
 import com.mapbox.rctmgl.components.AbstractMapFeature
 import com.mapbox.rctmgl.components.mapview.RCTMGLMapView
-import com.mapbox.rctmgl.utils.GeoJSONUtils
 
 class RCTMGLMarkerView(context: Context?, private val mManager: RCTMGLMarkerViewManager) : AbstractMapFeature(context), View.OnLayoutChangeListener {
     private var mMapView: RCTMGLMapView? = null
     private var mChildView: View? = null
     private var mCoordinate: Point? = null
     private lateinit var mAnchor: Array<Float>
+
     override fun addView(childView: View, childPosition: Int) {
         mChildView = childView
     }
@@ -61,15 +59,26 @@ class RCTMGLMarkerView(context: Context?, private val mManager: RCTMGLMarkerView
     }
 
     override fun removeFromMap(mapView: RCTMGLMapView) {
-        if (mChildView != null) {
-            mMapView?.viewAnnotationManager?.removeViewAnnotation(mChildView!!)
-            mChildView!!.removeOnLayoutChangeListener(this)
+        val childView = mChildView
+        if (childView != null) {
+            childView.removeOnLayoutChangeListener(this)
+            childView.visibility = INVISIBLE;
+            mMapView?.viewAnnotationManager?.removeViewAnnotation(childView)
         }
     }
 
     override fun onLayoutChange(v: View, left: Int, top: Int, right: Int, bottom: Int, oldLeft: Int, oldTop: Int,
                                 oldRight: Int, oldBottom: Int) {
         if (left != oldLeft || right != oldRight || top != oldTop || bottom != oldBottom) {
+            val centerX = oldLeft + (oldRight-oldLeft)*mAnchor[0];
+            val centerY = oldTop + (oldBottom-oldTop)*mAnchor[1];
+
+            val newLeft = (centerX - (mAnchor[0] * (right - left))).toInt();
+            val newTop =  (centerY - (mAnchor[1] * (bottom - top))).toInt();
+
+            val childView = mChildView!!
+            childView.x = (newLeft - oldLeft) + childView.x;
+            childView.y = (newTop-oldTop) + childView.y;
             refresh()
         }
     }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerViewManager.kt

@@ -0,0 +1,40 @@
+package com.mapbox.rctmgl.components.annotation
+
+import android.view.View
+import com.mapbox.rctmgl.utils.GeoJSONUtils.toPointGeometry
+import com.facebook.react.bridge.ReactApplicationContext
+import com.mapbox.rctmgl.components.AbstractEventEmitter
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.ThemedReactContext
+
+class RCTMGLMarkerViewManager(reactApplicationContext: ReactApplicationContext?) :
+    AbstractEventEmitter<RCTMGLMarkerView?>(reactApplicationContext) {
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    @ReactProp(name = "coordinate")
+    fun setCoordinate(markerView: RCTMGLMarkerView, geoJSONStr: String?) {
+        markerView.setCoordinate(toPointGeometry(geoJSONStr))
+    }
+
+    @ReactProp(name = "anchor")
+    fun setAnchor(markerView: RCTMGLMarkerView, map: ReadableMap) {
+        markerView.setAnchor(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLMarkerView {
+        return RCTMGLMarkerView(reactContext, this)
+    }
+
+    override fun customEvents(): Map<String, String>? {
+        return MapBuilder.builder<String, String>()
+            .build()
+    }
+
+    companion object {
+        const val REACT_CLASS = "RCTMGLMarkerView"
+    }
+}

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerViewWrapper.kt

@@ -0,0 +1,8 @@
+package com.mapbox.rctmgl.components.annotation
+import android.content.Context
+import android.util.Log
+import android.view.View
+import com.facebook.react.views.view.ReactViewGroup
+
+class RCTMGLMarkerViewWrapper(context: Context?, private val mManager: RCTMGLMarkerViewWrapperManager) :  ReactViewGroup(context) {
+}

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerViewWrapperManager.kt

@@ -0,0 +1,21 @@
+package com.mapbox.rctmgl.components.annotation
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+
+class RCTMGLMarkerViewWrapperManager(reactApplicationContext: ReactApplicationContext?) :
+    ViewGroupManager<RCTMGLMarkerViewWrapper>() {
+
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLMarkerViewWrapper {
+        return RCTMGLMarkerViewWrapper(reactContext, this)
+    }
+
+    companion object {
+        const val REACT_CLASS = "RCTMGLMarkerViewWrapper"
+    }
+}

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.kt

@@ -8,6 +8,10 @@ import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.LifecycleRegistry
+import androidx.lifecycle.ViewTreeLifecycleOwner
 import com.facebook.react.bridge.*
 import com.mapbox.android.gestures.MoveGestureDetector
 import com.mapbox.geojson.Feature
@@ -467,6 +471,23 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         return false
     }
 
+    override fun onAttachedToWindow() {
+        val hostingLifecycleOwner = ViewTreeLifecycleOwner.get(this)
+        if (hostingLifecycleOwner == null) {
+            ViewTreeLifecycleOwner.set(this, object : LifecycleOwner {
+                private lateinit var lifecycleRegistry: LifecycleRegistry
+                init {
+                    lifecycleRegistry = LifecycleRegistry(this)
+                    lifecycleRegistry.currentState = Lifecycle.State.CREATED
+                }
+                override fun getLifecycle(): Lifecycle {
+                    return lifecycleRegistry
+                }
+            })
+        }
+        super.onAttachedToWindow()
+    }
+
     override fun onMapLongClick(point: Point): Boolean {
         val _this = this
         if (mAnnotationDragged) {
@@ -527,7 +548,11 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         layerWaiters.remove(layerId)
     }
 
-    fun waitForLayer(layerID: String, callback: FoundLayerCallback) {
+    fun waitForLayer(layerID: String?, callback: FoundLayerCallback) {
+        if(layerID == null){
+            callback.found(null)
+            return
+        }
         if (savedStyle != null) {
             val layer = savedStyle?.getLayer(layerID)
             if (layer != null) {

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/styles/layers/RCTLayer.kt

@@ -49,7 +49,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         mSourceID = sourceID
     }
 
-    fun setAboveLayerID(aboveLayerID: String) {
+    fun setAboveLayerID(aboveLayerID: String?) {
         if (mAboveLayerID != null && mAboveLayerID == aboveLayerID) {
             return
         }
@@ -60,7 +60,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         }
     }
 
-    fun setBelowLayerID(belowLayerID: String) {
+    fun setBelowLayerID(belowLayerID: String?) {
         if (mBelowLayerID != null && mBelowLayerID == belowLayerID) {
             return
         }
@@ -147,7 +147,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     }
 
     fun addAbove(aboveLayerID: String?) {
-        mMapView!!.waitForLayer(aboveLayerID!!, object : FoundLayerCallback {
+        mMapView!!.waitForLayer(aboveLayerID, object : FoundLayerCallback {
             override fun found(layer: Layer?) {
                 if (!hasInitialized()) {
                     return
@@ -160,7 +160,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     }
 
     fun addBelow(belowLayerID: String?) {
-        mMapView!!.waitForLayer(belowLayerID!!, object : FoundLayerCallback {
+        mMapView!!.waitForLayer(belowLayerID, object : FoundLayerCallback {
             override fun found(layer: Layer?) {
                 if (!hasInitialized()) {
                     return
@@ -271,4 +271,4 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     companion object {
         const val LOG_TAG = "RCTLayer"
     }
-}
+}

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/modules/RCTMGLModule.kt

@@ -96,6 +96,7 @@ class RCTMGLModule(private val mReactContext: ReactApplicationContext) : ReactCo
         val locationModuleCallbackNames: MutableMap<String, String> = HashMap()
         locationModuleCallbackNames["Update"] = RCTMGLLocationModule.LOCATION_UPDATE
         return MapBuilder.builder<String, Any>()
+            .put("MapboxV10", true)
             .put("StyleURL", styleURLS)
             .put("EventTypes", eventTypes)
             .put("StyleSource", styleSourceConsts)

package/docs/Annotation.md

@@ -1,8 +1,8 @@
 <!-- This file was autogenerated from Annotation.js do not modify -->
-## <MapboxGL.Annotation />
-### 
+# <MapboxGL.Annotation />
 
-### props
+
+## props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | id | `string` | `none` | `true` | FIX ME NO DESCRIPTION |
@@ -15,22 +15,22 @@
 | style | `any` | `none` | `false` | FIX ME NO DESCRIPTION |
 | icon | `union` | `none` | `false` | FIX ME NO DESCRIPTION |
 
-### methods
-#### onPress()
+## methods
+### onPress()
 
 
 
-##### arguments
+#### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 
 
 
-#### symbolStyle()
+### symbolStyle()
 
 
 
-##### arguments
+#### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 

package/docs/Annotations.md

@@ -1,17 +1,19 @@
-Comparsion of various annotations available in React native mapbox:
+# Annotations Comparison
 
-|*Feature*              | *SymbolLayer*      |*PointAnnotation*                     |*MarkerView*             |*CircleLayer*        |
-|-----------------------|--------------------|--------------------------------------|-------------------------|---------------------|
-|Can use images         | ✓            |                                      |                         |                     |
-|RN Views as childern   | iOS: static        |iOS: interactive <br/> android: static|interactive              |                     |
-|Interactions           | click              |iOS: full <br/> android: click & drag & callout  | supports full interactivity in the sense that inside MarkerViews one can place any RN View, which can be interacted with. Not to be misunderstood with drag n drop interactivity.                     | click          |
-|Control Z-index        | &check;            |iOS: always on top, android: n/a      |always on top            | &check;             |
-|Clustering             | &check;            |                                      |                         | &check;             |
-|Style with expressions | &check;            |                                      |                         | &check;             |
-|iOS implementation     | [MGLStyleSymbolLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLSymbolStyleLayer.html)     |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)                     |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)       |[MGLCircleStyleLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLCircleStyleLayer.html)       |
-|android implementation | [SymbolLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/SymbolLayer.html)|[annotation.Symbol](https://docs.mapbox.com/android/api/plugins/annotation/0.8.0/com/mapbox/mapboxsdk/plugins/annotation/Symbol.html)|[annotation.Marker](https://docs.mapbox.com/android/api/plugins/markerview/0.4.0/com/mapbox/mapboxsdk/plugins/markerview/MarkerView.html) |[CircleLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/CircleLayer.html)|
+Comparsion of various annotations available in React native mapbox:
 
+| *Feature*              | *SymbolLayer*      | *PointAnnotation*                                                                                                                     |*MarkerView*             |*CircleLayer*        |
+|------------------------|--------------------|---------------------------------------------------------------------------------------------------------------------------------------|-------------------------|---------------------|
+| Can use images         | &check;            |                                                                                                                                       |                         |                     |
+| RN Views as children   | iOS: static        | iOS: interactive <br/> Android: static                                                                                                |interactive              |                     |
+| Interactions           | click              | iOS: full <br/> Android: click & drag & callout                                                                                       | supports full interactivity in the sense that inside MarkerViews one can place any RN View, which can be interacted with. Not to be misunderstood with drag n drop interactivity.                     | click          |
+| Control Z-index        | &check;            | iOS: always on top, Android: n/a                                                                                                      |always on top            | &check;             |
+| Clustering             | &check;            |                                                                                                                                       |                         | &check;             |
+| Style with expressions | &check;            |                                                                                                                                       |                         | &check;             |
+| iOS implementation     | [MGLStyleSymbolLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLSymbolStyleLayer.html)     | [MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)                                        |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)       |[MGLCircleStyleLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLCircleStyleLayer.html)       |
+| Android implementation | [SymbolLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/SymbolLayer.html)| [annotation.Symbol](https://docs.mapbox.com/android/api/plugins/annotation/0.8.0/com/mapbox/mapboxsdk/plugins/annotation/Symbol.html) |[annotation.Marker](https://docs.mapbox.com/android/api/plugins/markerview/0.4.0/com/mapbox/mapboxsdk/plugins/markerview/MarkerView.html) |[CircleLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/CircleLayer.html)|
 
 Related links:
+
 * iOS [markers and annotations](https://docs.mapbox.com/ios/maps/overview/markers-and-annotations/)
-* android [annotation plugin](https://docs.mapbox.com/android/plugins/overview/annotation/)
+* Android [annotation plugin](https://docs.mapbox.com/android/plugins/overview/annotation/)