@rnmapbox/maps 10.0.0-beta.34 → 10.0.0-beta.37

package/.github/pull_request_template.md

@@ -19,9 +19,8 @@ Added `your feature` that allows ...
 
 - [ ] I have tested this on a device/simulator for each compatible OS
 - [ ] I updated the documentation with running `yarn generate` in the root folder
-- [ ] I mentioned this change in `CHANGELOG.md`
-- [ ] I updated the typings files (`index.d.ts`)
-- [ ] I added/ updated a sample (`/example`)
+- [ ] I updated the typings files - if js interface was changed (`index.d.ts`)
+- [ ] I added/ updated a sample - if a new feature was implemented (`/example`)
 
 ## Screenshot OR Video
 

package/README.md

@@ -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`_
 

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
@@ -61,6 +65,10 @@ import org.json.JSONObject
 import java.util.*
 
 
+interface RCTMGLMapViewLifecycleOwner : LifecycleOwner {
+    fun handleLifecycleEvent(event: Lifecycle.Event)
+}
+
 open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapViewManager /*, MapboxMapOptions options*/) : MapView(mContext), OnMapClickListener, OnMapLongClickListener {
     private val mSources: MutableMap<String, RCTSource<*>>
     private val mImages: MutableList<RCTMGLImages>
@@ -200,6 +208,7 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         mMap.getStyle(onStyleLoaded)
     }
 
+    // region features
     fun addFeature(childView: View?, childPosition: Int) {
         var feature: AbstractMapFeature? = null
         if (childView is RCTSource<*>) {
@@ -277,6 +286,18 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         return features()[i]
     }
 
+    fun removeAllFeatures() {
+        mFeatures.forEach {
+            it.removeFromMap(this)
+        }
+        mFeatures.clear()
+        val queuedFeatures = mQueuedFeatures
+        if (queuedFeatures != null) {
+            queuedFeatures.clear()
+        }
+    }
+    // endregion
+
     fun sendRegionChangeEvent(isAnimated: Boolean) {
         val event: IEvent = MapChangeEvent(this, EventTypes.REGION_DID_CHANGE,
                 makeRegionPayload(isAnimated))
@@ -1072,4 +1093,49 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         }
     }
     // endregion
+
+    // region lifecycle
+    private var lifecycleOwner : RCTMGLMapViewLifecycleOwner? = null
+
+    override fun onDetachedFromWindow() {
+        lifecycleOwner?.handleLifecycleEvent(Lifecycle.Event.ON_PAUSE)
+        super.onDetachedFromWindow();
+    }
+
+    override fun onDestroy() {
+        removeAllFeatures()
+        lifecycleOwner?.handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
+        super.onDestroy()
+    }
+
+    fun onDropViewInstance() {
+        removeAllFeatures()
+        lifecycleOwner?.handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
+    }
+
+    override fun onAttachedToWindow() {
+        if (lifecycleOwner == null) {
+            lifecycleOwner = object : RCTMGLMapViewLifecycleOwner {
+                private lateinit var lifecycleRegistry: LifecycleRegistry
+                init {
+                    lifecycleRegistry = LifecycleRegistry(this)
+                    lifecycleRegistry.currentState = Lifecycle.State.CREATED
+                }
+
+                override fun handleLifecycleEvent(event: Lifecycle.Event) {
+                    lifecycleRegistry.handleLifecycleEvent(event)
+                }
+
+                override fun getLifecycle(): Lifecycle {
+                    return lifecycleRegistry
+                }
+            }
+            ViewTreeLifecycleOwner.set(this, lifecycleOwner);
+        } else {
+            lifecycleOwner?.handleLifecycleEvent(Lifecycle.Event.ON_RESUME)
+        }
+        super.onAttachedToWindow()
+    }
+
+    // endregion
 }

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

@@ -70,6 +70,7 @@ open class RCTMGLMapViewManager(context: ReactApplicationContext?) :
         if (mViews.containsKey(reactTag)) {
             mViews.remove(reactTag)
         }
+        mapView.onDropViewInstance()
         super.onDropViewInstance(mapView)
     }
 

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/ios/install.md

@@ -12,6 +12,7 @@ The following is required for every following setup
 
 Add the following to your `ios/Podfile`:
 
+
 ```ruby
   pre_install do |installer|
     $RNMapboxMaps.pre_install(installer)
@@ -26,7 +27,9 @@ Add the following to your `ios/Podfile`:
   end
 ```
 
-Running `pod install` will add MapLibre SDK via SwiftPackageManager
+We also recommend setting the `$RNMapboxMapsImpl` to `mapbox` aka v10 implementation [see bellow for detailed instructions](#mapbox-maps-sdk-v10)
+
+Running `pod install` download the proper mapbox dependency
 
 ```sh
 # Go to the ios folder
@@ -42,6 +45,27 @@ Read on if you want to edit your Mapbox version or flavor.
 
 <br>
 
+## Mapbox Maps SDK (v10)
+
+This is the version we recommend, while other implementations should work, we don't plan to support them in next version.
+
+Check the current version of the SDK [here](https://docs.mapbox.com/ios/maps/overview/).
+
+Add the following to the beginning of your podfile
+```ruby
+$RNMapboxMapsImpl = 'mapbox'
+```
+
+You can also specify the version to use. *Warning:* if you set a version, then later update, the `rnamapbox/maps` library it's possible that you'll end up using Mapbox older version than supported. Make sure you revise this value with `rnmapbox/maps` updates.
+
+```ruby
+$RNMapboxMapsVersion = '~> 10.9.0'
+```
+
+You will need to authorize your download of the Maps SDK with a secret access token with the `DOWNLOADS:READ` scope. This [guide](https://docs.mapbox.com/ios/maps/guides/install/#configure-credentials) explains how to configure the secret token under section `Configure your secret token`.
+
+<br/>
+
 ## Maplibre
 
 [MapLibre](https://github.com/maplibre/maplibre-gl-native) is an OSS fork of MapboxGL
@@ -72,19 +96,6 @@ $RNMapboxMapsSwiftPackageManager = {
 
 <br/>
 
-## Mapbox Maps SDK (v10)
-
-Check the current version of the SDK [here](https://docs.mapbox.com/ios/maps/overview/).
-
-```ruby
-$RNMapboxMapsImpl = 'mapbox'
-$RNMapboxMapsVersion = '~> 10.6.0'
-```
-
-You will need to authorize your download of the Maps SDK with a secret access token with the `DOWNLOADS:READ` scope. This [guide](https://docs.mapbox.com/ios/maps/guides/install/#configure-credentials) explains how to configure the secret token under section `Configure your secret token`.
-
-<br/>
-
 ## Mapbox Maps GL SDK (9.0 or earlier)
 
 This is the old version of mapbox gl (deprecated)

package/javascript/utils/StyleValue.ts

@@ -4,7 +4,6 @@ import {
   processColor,
   ProcessedColorValue,
 } from 'react-native';
-import { UsesNonExemptEncryption } from '@expo/config-plugins/build/ios';
 
 import { getStyleType } from './styleMap';
 import BridgeValue, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.34",
+  "version": "10.0.0-beta.37",
   "publishConfig": {
     "access": "public"
   },

package/rnmapbox-maps.podspec

@@ -20,7 +20,7 @@ require 'json'
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 ## Warning: these lines are scanned by autogenerate.js
-rnMapboxMapsDefaultMapboxVersion = '~> 10.7.0'
+rnMapboxMapsDefaultMapboxVersion = '~> 10.8.1'
 rnMapboxMapsDefaultMapboxGLVersion = '~> 5.9.0'
 rnMapboxMapsDefaultMapLibreVersion = 'exactVersion 5.12.1'
 

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

@@ -1,45 +0,0 @@
-package com.mapbox.rctmgl.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 com.mapbox.rctmgl.components.AbstractEventEmitter;
-import com.mapbox.rctmgl.utils.GeoJSONUtils;
-
-import java.util.Map;
-
-public class RCTMGLMarkerViewManager extends AbstractEventEmitter<RCTMGLMarkerView> {
-    public static final String REACT_CLASS = "RCTMGLMarkerView";
-
-    public RCTMGLMarkerViewManager(ReactApplicationContext reactApplicationContext) {
-        super(reactApplicationContext);
-    }
-
-    @Override
-    public String getName() {
-        return REACT_CLASS;
-    }
-
-    @ReactProp(name="coordinate")
-    public void setCoordinate(RCTMGLMarkerView markerView, String geoJSONStr) {
-        markerView.setCoordinate(GeoJSONUtils.toPointGeometry(geoJSONStr));
-    }
-
-    @ReactProp(name="anchor")
-    public void setAnchor(RCTMGLMarkerView markerView, ReadableMap map) {
-        markerView.setAnchor((float) map.getDouble("x"), (float) map.getDouble("y"));
-    }
-
-    @Override
-    protected RCTMGLMarkerView createViewInstance(ThemedReactContext reactContext) {
-        return new RCTMGLMarkerView(reactContext, this);
-    }
-
-    @Override
-    public Map<String, String> customEvents() {
-        return MapBuilder.<String, String>builder()
-                .build();
-    }
-}