@rnmapbox/maps 10.0.0-beta.54 → 10.0.0-beta.57

package/android/rctmgl/build.gradle

@@ -132,6 +132,7 @@ dependencies {
         else if (safeExtGet("RNMapboxMapsImpl", defaultMapboxMapsImpl) == "mapbox") {
             implementation 'com.mapbox.maps:android:10.9.0'
             implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:6.8.0'
+            implementation 'androidx.asynclayoutinflater:asynclayoutinflater:1.0.0'
         }
     }
 

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

@@ -5,6 +5,7 @@ import android.os.Handler
 import android.os.Looper
 import android.util.Log
 import android.view.View
+import android.view.ViewGroup
 import android.widget.FrameLayout
 import com.mapbox.geojson.Point
 import com.mapbox.maps.ViewAnnotationAnchor
@@ -142,7 +143,10 @@ class RCTMGLMarkerView(context: Context?, private val mManager: RCTMGLMarkerView
         this.removeOnLayoutChangeListener(this)
 
         mView?.let { view ->
-            mapView.endViewTransition(view) // https://github.com/mapbox/mapbox-maps-android/issues/1723
+            val parent = view.parent
+            if (parent is ViewGroup) {
+                parent.endViewTransition(view) // https://github.com/mapbox/mapbox-maps-android/issues/1723
+            }
             val removed = mapView.viewAnnotationManager?.removeViewAnnotation(view)
             if (removed == false) {
                 Logger.w("RCTMGLMarkerView", "Unable to remove view")

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

@@ -1,6 +1,7 @@
 package com.mapbox.rctmgl.components.annotation
 
 import android.view.View
+import android.widget.FrameLayout
 import com.mapbox.rctmgl.utils.GeoJSONUtils.toPointGeometry
 import com.facebook.react.bridge.ReactApplicationContext
 import com.mapbox.rctmgl.components.AbstractEventEmitter
@@ -8,6 +9,10 @@ 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
+import com.mapbox.maps.ScreenCoordinate
+import com.mapbox.maps.viewannotation.OnViewAnnotationUpdatedListener
+import com.mapbox.maps.viewannotation.ViewAnnotationManager
+import com.mapbox.rctmgl.components.mapview.RCTMGLMapView
 
 class RCTMGLMarkerViewManager(reactApplicationContext: ReactApplicationContext?) :
     AbstractEventEmitter<RCTMGLMarkerView?>(reactApplicationContext) {
@@ -46,5 +51,28 @@ class RCTMGLMarkerViewManager(reactApplicationContext: ReactApplicationContext?)
 
     companion object {
         const val REACT_CLASS = "RCTMGLMarkerView"
+
+        fun markerViewContainerSizeFixer(mapView: RCTMGLMapView, viewAnnotationManager: ViewAnnotationManager) {
+            // see https://github.com/rnmapbox/maps/issues/2376
+            viewAnnotationManager.addOnViewAnnotationUpdatedListener(object :
+                OnViewAnnotationUpdatedListener {
+                override fun onViewAnnotationVisibilityUpdated(view: View, visible: Boolean) {
+                    val parent = view.parent
+                    if (parent is FrameLayout) {
+                        if ((parent.width == 0 && parent.height == 0) && (mapView.width != 0 || mapView.height != 0)) {
+                            parent.layout(0,0,mapView.width, mapView.height)
+                        }
+                    }
+                }
+
+                override fun onViewAnnotationPositionUpdated(
+                    view: View,
+                    leftTopCoordinate: ScreenCoordinate,
+                    width: Int,
+                    height: Int
+                ) {
+                }
+            })
+        }
     }
 }

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

@@ -43,6 +43,7 @@ import com.mapbox.maps.plugin.scalebar.scalebar
 import com.mapbox.rctmgl.R
 import com.mapbox.rctmgl.components.AbstractMapFeature
 import com.mapbox.rctmgl.components.annotation.RCTMGLMarkerView
+import com.mapbox.rctmgl.components.annotation.RCTMGLMarkerViewManager
 import com.mapbox.rctmgl.components.annotation.RCTMGLPointAnnotation
 import com.mapbox.rctmgl.components.camera.RCTMGLCamera
 import com.mapbox.rctmgl.components.images.RCTMGLImages
@@ -900,6 +901,8 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
                 images.sendImageMissingEvent(id, mMap)
             }
         })
+
+        RCTMGLMarkerViewManager.markerViewContainerSizeFixer(this, viewAnnotationManager)
     }
 
     // region Ornaments
@@ -1184,12 +1187,14 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
 
     override fun onDestroy() {
         removeAllFeatures()
+        viewAnnotationManager.removeAllViewAnnotations()
         lifecycleOwner?.handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
         super.onDestroy()
     }
 
     fun onDropViewInstance() {
         removeAllFeatures()
+        viewAnnotationManager.removeAllViewAnnotations()
         lifecycleOwner?.handleLifecycleEvent(Lifecycle.Event.ON_DESTROY)
     }
 

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

@@ -269,11 +269,12 @@ open class RCTMGLMapViewManager(context: ReactApplicationContext?) :
                 );
             }
             METHOD_QUERY_FEATURES_RECT -> {
+                val layerIds = ConvertUtils.toStringList(args!!.getArray(3))
                 mapView.queryRenderedFeaturesInRect(
                         args!!.getString(0),
                         ConvertUtils.toRectF(args.getArray(1)),
                         ExpressionParser.from(args!!.getArray(2)),
-                        ConvertUtils.toStringList(args!!.getArray(3))
+                        if (layerIds.size == 0) null else layerIds
                 );
             }
             METHOD_VISIBLE_BOUNDS -> {

package/index.d.ts

@@ -568,6 +568,7 @@ export interface MapViewProps extends ViewProps {
   compassPosition?: OrnamentPosition;
   compassViewPosition?: number;
   compassViewMargins?: Point;
+  compassImage?: string;
   scaleBarEnabled?: boolean;
   scaleBarPosition?: OrnamentPosition;
   surfaceView?: boolean;

package/ios/RCTMGL-v10/RCTMGLCamera.swift

@@ -65,10 +65,10 @@ class CameraUpdateQueue {
 }
 
 open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
-  private var _map: RCTMGLMapView! = nil
+  private weak var _map: RCTMGLMapView! = nil
   private var _mapCallbacks: [(RCTMGLMapView) -> Void] = []
   
-  var map : RCTMGLMapView? {
+  weak var map : RCTMGLMapView? {
     return _map;
   }
 

package/ios/RCTMGL-v10/RCTMGLCircleLayer.swift

@@ -6,7 +6,7 @@ class RCTMGLCircleLayer: RCTMGLVectorLayer {
   typealias LayerType = CircleLayer
 
   override func makeLayer(style: Style) throws -> Layer {
-    let vectorSource : VectorSource = try self.layerWithSourceID(in: style)
+    let _ : VectorSource = try self.layerWithSourceID(in: style)
     var layer = LayerType(id: self.id!)
     layer.sourceLayer = self.sourceLayerID
     layer.source = sourceID
@@ -44,23 +44,4 @@ class RCTMGLCircleLayer: RCTMGLVectorLayer {
   func isAddedToMap() -> Bool {
     return true
   }
-/*
-- (MGLCircleStyleLayer*)makeLayer:(MGLStyle*)style
-{
-    MGLSource *source = [self layerWithSourceIDInStyle:style];
-    if (source == nil) { return nil; }
-    MGLCircleStyleLayer *layer = [[MGLCircleStyleLayer alloc] initWithIdentifier:self.id source:source];
-    layer.sourceLayerIdentifier = self.sourceLayerID;
-    return layer;
-}
-
-- (void)addStyles
-{
-    RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style];
-    style.bridge = self.bridge;
-    [style circleLayer:(MGLCircleStyleLayer*)self.styleLayer withReactStyle:self.reactStyle isValid:^{
-        return [self isAddedToMap];
-    }];
-}*/
-
 }

package/ios/RCTMGL-v10/RCTMGLImages.swift

@@ -2,7 +2,7 @@ import MapboxMaps
 
 class RCTMGLImages : UIView, RCTMGLMapComponent {
   
-  var bridge : RCTBridge! = nil
+  weak var bridge : RCTBridge! = nil
   var remoteImages : [String:String] = [:]
   
   @objc

package/ios/RCTMGL-v10/RCTMGLInteractiveElement.swift

@@ -1,12 +1,10 @@
-@_spi(Experimental) import MapboxMaps
+import MapboxMaps
 
 @objc
 class RCTMGLInteractiveElement : UIView, RCTMGLMapComponent {
 
-  var map : RCTMGLMapView? = nil
-  
-  var layers: [RCTMGLSourceConsumer] = []
-  
+  weak var map : RCTMGLMapView? = nil
+
   static let hitboxDefault = 44.0
 
   @objc var draggable: Bool = false
@@ -25,13 +23,7 @@ class RCTMGLInteractiveElement : UIView, RCTMGLMapComponent {
   @objc var onPress: RCTBubblingEventBlock? = nil
   
   func getLayerIDs() -> [String] {
-    layers.compactMap {
-      if let layer = $0 as? RCTMGLLayer {
-        return layer.id
-      } else {
-        return nil
-      }
-    }
+    return []
   }
 
   func isDraggable() -> Bool {

package/ios/RCTMGL-v10/RCTMGLLayer.swift

@@ -7,11 +7,12 @@ protocol RCTMGLSourceConsumer {
 
 @objc(RCTMGLLayer)
 class RCTMGLLayer : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
-  var bridge : RCTBridge? = nil
+  weak var bridge : RCTBridge? = nil
 
   @objc var sourceLayerID : String? = nil {
     didSet { self.optionsChanged() }
   }
+
   @objc var reactStyle : Dictionary<String, Any>? = nil {
     didSet {
       DispatchQueue.main.async {

package/ios/RCTMGL-v10/RCTMGLLocationModule.swift

@@ -27,8 +27,16 @@ typealias RCTMGLLocationBlock = (RCTMGLLocation?) -> Void
 
 let RCT_MAPBOX_USER_LOCATION_UPDATE = "MapboxUserLocationUpdate";
 
+/// This implementation of LocationProviderDelegate is used by `LocationManager` to work around
+/// the fact that the `LocationProvider` API does not allow the delegate to be set to `nil`.
+internal class EmptyLocationProviderDelegate: LocationProviderDelegate {
+    func locationProvider(_ provider: LocationProvider, didFailWithError error: Error) {}
+    func locationProvider(_ provider: LocationProvider, didUpdateHeading newHeading: CLHeading) {}
+    func locationProvider(_ provider: LocationProvider, didUpdateLocations locations: [CLLocation]) {}
+    func locationProviderDidChangeAuthorization(_ provider: LocationProvider) {}
+}
 
-protocol RCTMGLLocationManagerDelegate {
+protocol RCTMGLLocationManagerDelegate : AnyObject {
   func locationManager(_ locationManager: RCTMGLLocationManager, didUpdateLocation: RCTMGLLocation)
 }
 
@@ -38,8 +46,8 @@ class RCTMGLLocationManager : LocationProviderDelegate {
   var lastKnownLocation : CLLocation?
   var lastKnownHeading : CLHeading?
   
-  var delegate: RCTMGLLocationManagerDelegate?
-  var locationProviderDelage: LocationProviderDelegate?
+  weak var delegate: RCTMGLLocationManagerDelegate?
+  weak var locationProviderDelage: LocationProviderDelegate?
   
   var listeners: [RCTMGLLocationBlock] = []
   
@@ -60,6 +68,12 @@ class RCTMGLLocationManager : LocationProviderDelegate {
     provider.startUpdatingLocation()
   }
   
+  func stop() {
+    provider.stopUpdatingHeading()
+    provider.stopUpdatingLocation()
+    provider.setDelegate(EmptyLocationProviderDelegate())
+  }
+  
   func _convertToMapboxLocation(_ location: CLLocation?) -> RCTMGLLocation {
     guard let location = location else {
       return RCTMGLLocation()
@@ -192,7 +206,7 @@ extension RCTMGLLocationManager: LocationProvider {
 @objc(RCTMGLLocationModule)
 class RCTMGLLocationModule: RCTEventEmitter, RCTMGLLocationManagerDelegate {
 
-  static var shared : RCTMGLLocationModule? = nil
+  static weak var shared : RCTMGLLocationModule? = nil
   
   var locationManager : RCTMGLLocationManager
   var hasListener = false
@@ -233,7 +247,7 @@ class RCTMGLLocationModule: RCTEventEmitter, RCTMGLLocationManagerDelegate {
   }
   
   @objc func stop() {
-    print("TODO implement RCTMGLLocationModule.stop!")
+    locationManager.stop()
   }
   
   @objc func getLastKnownLocation() -> RCTMGLLocation? {

package/ios/RCTMGL-v10/RCTMGLMapView.swift

@@ -8,21 +8,22 @@ open class RCTMGLMapView : MapView {
 
   var compassEnabled: Bool = false
   var compassFadeWhenNorth: Bool = false
+  var compassImage: String?
+  
   var reactOnPress : RCTBubblingEventBlock?
   var reactOnLongPress : RCTBubblingEventBlock?
   var reactOnMapChange : RCTBubblingEventBlock?
 
   var styleLoaded: Bool = false
   var styleLoadWaiters : [(MapboxMap)->Void] = []
+  var onStyleLoadedComponents: [RCTMGLMapComponent] = []
 
-  var reactCamera : RCTMGLCamera?
+  weak var reactCamera : RCTMGLCamera?
   var images : [RCTMGLImages] = []
   var sources : [RCTMGLInteractiveElement] = []
   
   var handleMapChangedEvents = Set<RCTMGLEvent.EventType>()
-  
-  var onStyleLoadedComponents: [RCTMGLMapComponent] = []
-  
+
   private var isPendingInitialLayout = true
   private var wasGestureActive = false
   private var isGestureActive = false
@@ -80,7 +81,7 @@ open class RCTMGLMapView : MapView {
     super.insertReactSubview(subview, at: atIndex)
   }
   
-  @objc open override func removeReactSubview(_ subview:UIView!) {
+  @objc open override func removeReactSubview(_ subview: UIView!) {
     removeFromMap(subview)
     super.removeReactSubview(subview)
   }
@@ -138,7 +139,7 @@ open class RCTMGLMapView : MapView {
 
   @objc func setReactProjection(_ value: String?) {
     if let value = value {
-      var projection = StyleProjection(name: value == "globe" ? .globe : .mercator)
+      let projection = StyleProjection(name: value == "globe" ? .globe : .mercator)
       try! self.mapboxMap.style.setProjection(projection)
     }
   }
@@ -148,7 +149,7 @@ open class RCTMGLMapView : MapView {
     mapView.ornaments.options.attributionButton.visibility = value ? .visible : .hidden
   }
   
-  @objc func setReactAttributionPosition(_ position: [String: Int]!) {
+  @objc func setReactAttributionPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.attributionButton.position = ornamentOptions.position
       mapView.ornaments.options.attributionButton.margins = ornamentOptions.margins
@@ -159,7 +160,7 @@ open class RCTMGLMapView : MapView {
     mapView.ornaments.options.logo.visibility = value ? .visible : .hidden
   }
   
-  @objc func setReactLogoPosition(_ position: [String: Int]!) {
+  @objc func setReactLogoPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.logo.position = ornamentOptions.position
       mapView.ornaments.options.logo.margins = ornamentOptions.margins
@@ -168,17 +169,25 @@ open class RCTMGLMapView : MapView {
   
   @objc func setReactCompassEnabled(_ value: Bool) {
     compassEnabled = value
-    mapView.ornaments.options.compass.visibility = value ? compassFadeWhenNorth ? .adaptive : .visible : .hidden
+    refreshCompassVisibility()
   }
   
   @objc func setReactCompassFadeWhenNorth(_ value: Bool) {
     compassFadeWhenNorth = value
-    if (compassEnabled) {
-      mapView.ornaments.options.compass.visibility = value ? .adaptive : .visible
+    refreshCompassVisibility()
+  }
+  
+  private func refreshCompassVisibility() {
+    var visibility: OrnamentVisibility = .hidden
+    if compassEnabled {
+      visibility = compassFadeWhenNorth ? .adaptive : .visible
     }
+    mapView.ornaments.options.compass.visibility = visibility
+    
+    refreshCompassImage()
   }
   
-  @objc func setReactCompassPosition(_ position: [String: Int]!) {
+  @objc func setReactCompassPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.compass.position = ornamentOptions.position
       mapView.ornaments.options.compass.margins = ornamentOptions.margins
@@ -208,19 +217,37 @@ open class RCTMGLMapView : MapView {
     }
   }
   
-  @objc func setReactCompassViewPosition(_ position: Int) {
-    mapView.ornaments.options.compass.position = toOrnamentPositon(position)
+  @objc func setReactCompassViewPosition(_ position: NSNumber) {
+    mapView.ornaments.options.compass.position = toOrnamentPositon(Int(truncating: position))
   }
   
   @objc func setReactCompassViewMargins(_ margins: CGPoint) {
     mapView.ornaments.options.compass.margins = margins;
   }
 
+  @objc func setReactCompassImage(_ image: String) {
+    compassImage = image.isEmpty ? nil : image
+    refreshCompassImage()
+  }
+  
+  private func refreshCompassImage() {
+    if let compassImage = compassImage {
+      onMapStyleLoaded { map in
+        let img = map.style.image(withId: compassImage)
+        self.mapView.ornaments.options.compass.image = img
+      }
+    } else {
+      // Does not currently reset the image to the default.
+      // See https://github.com/mapbox/mapbox-maps-ios/issues/1673.
+      self.mapView.ornaments.options.compass.image = nil
+    }
+  }
+
   @objc func setReactScaleBarEnabled(_ value: Bool) {
     self.mapView.ornaments.options.scaleBar.visibility = value ? .visible : .hidden
   }
   
-  @objc func setReactScaleBarPosition(_ position: [String: Int]!) {
+  @objc func setReactScaleBarPosition(_ position: [String: NSNumber]) {
     if let ornamentOptions = self.getOrnamentOptionsFromPosition(position) {
       mapView.ornaments.options.scaleBar.position = ornamentOptions.position
       mapView.ornaments.options.scaleBar.margins = ornamentOptions.margins
@@ -259,20 +286,20 @@ open class RCTMGLMapView : MapView {
     }
   }
 
-  private func getOrnamentOptionsFromPosition(_ position: [String: Int]) -> (position: OrnamentPosition, margins: CGPoint)? {
+  private func getOrnamentOptionsFromPosition(_ position: [String: NSNumber]) -> (position: OrnamentPosition, margins: CGPoint)? {
     let left = position["left"]
     let right = position["right"]
     let top = position["top"]
     let bottom = position["bottom"]
     
     if let left = left, let top = top {
-      return (OrnamentPosition.topLeading, CGPoint(x: left, y: top))
+      return (OrnamentPosition.topLeading, CGPoint(x: Int(truncating: left), y: Int(truncating: top)))
     } else if let right = right, let top = top {
-      return (OrnamentPosition.topTrailing, CGPoint(x: right, y: top))
+      return (OrnamentPosition.topTrailing, CGPoint(x: Int(truncating: right), y: Int(truncating: top)))
     } else if let bottom = bottom, let right = right {
-      return (OrnamentPosition.bottomTrailing, CGPoint(x: right, y: bottom))
+      return (OrnamentPosition.bottomTrailing, CGPoint(x: Int(truncating: right), y: Int(truncating: bottom)))
     } else if let bottom = bottom, let left = left {
-      return (OrnamentPosition.bottomLeading, CGPoint(x: left, y: bottom))
+      return (OrnamentPosition.bottomLeading, CGPoint(x: Int(truncating: left), y: Int(truncating: bottom)))
     }
     
     return nil
@@ -282,10 +309,26 @@ open class RCTMGLMapView : MapView {
 // MARK: - event handlers
 
 extension RCTMGLMapView {
+  private func onEvery<Payload>(event: MapEvents.Event<Payload>, handler: @escaping  (RCTMGLMapView, MapEvent<Payload>) -> Void) {
+    self.mapView.mapboxMap.onEvery(event: event) { [weak self](mapEvent) in
+      guard let self = self else { return }
+
+      handler(self, mapEvent)
+    }
+  }
+
+  private func onNext<Payload>(event: MapEvents.Event<Payload>, handler: @escaping  (RCTMGLMapView, MapEvent<Payload>) -> Void) {
+    self.mapView.mapboxMap.onNext(event: event) { [weak self](mapEvent) in
+      guard let self = self else { return }
+
+      handler(self, mapEvent)
+    }
+  }
+
   @objc func setReactOnMapChange(_ value: @escaping RCTBubblingEventBlock) {
     self.reactOnMapChange = value
 
-    self.mapView.mapboxMap.onEvery(event: .cameraChanged, handler: { cameraEvent in
+    self.onEvery(event: .cameraChanged, handler: { (self, cameraEvent) in
       self.wasGestureActive = self.isGestureActive
       if self.handleMapChangedEvents.contains(.regionIsChanging) {
         let event = RCTMGLEvent(type:.regionIsChanging, payload: self.buildRegionObject());
@@ -296,7 +339,7 @@ extension RCTMGLMapView {
       }
     })
 
-    self.mapView.mapboxMap.onEvery(event: .mapIdle, handler: { cameraEvent in
+    self.onEvery(event: .mapIdle, handler: { (self, cameraEvent) in
       if self.handleMapChangedEvents.contains(.regionDidChange) {
         let event = RCTMGLEvent(type:.regionDidChange, payload: self.buildRegionObject());
         self.fireEvent(event: event, callback: self.reactOnMapChange)
@@ -367,7 +410,7 @@ extension RCTMGLMapView {
   }
   
   public func setupEvents() {
-    self.mapboxMap.onEvery(event: .mapLoadingError, handler: {(event) in
+    self.onEvery(event: .mapLoadingError, handler: {(self, event) in
       if let message = event.payload.error.errorDescription {
         Logger.log(level: .error, message: "MapLoad error \(message)")
       } else {
@@ -375,7 +418,7 @@ extension RCTMGLMapView {
       }
     })
     
-    self.mapboxMap.onEvery(event: .styleImageMissing) { (event) in
+    self.onEvery(event: .styleImageMissing) { (self, event) in
       let imageName = event.payload.id
       
       self.images.forEach {
@@ -389,7 +432,7 @@ extension RCTMGLMapView {
       }
     }
 
-    self.mapboxMap.onEvery(event: .renderFrameFinished, handler: { (event) in
+    self.onEvery(event: .renderFrameFinished, handler: { (self, event) in
       var type = RCTMGLEvent.EventType.didFinishRendering
       if event.payload.renderMode == .full {
         type = .didFinishRenderingFully
@@ -403,16 +446,16 @@ extension RCTMGLMapView {
       self.fireEvent(event: event, callback: self.reactOnMapChange)
     })
 
-    self.mapboxMap.onNext(event: .mapLoaded, handler: { (event) in
+    self.onNext(event: .mapLoaded, handler: { (self, event) in
       let event = RCTMGLEvent(type:.didFinishLoadingMap, payload: nil);
       self.fireEvent(event: event, callback: self.reactOnMapChange)
     })
     
-    self.mapboxMap.onEvery(event: .styleLoaded, handler: { (event) in
+    self.onEvery(event: .styleLoaded, handler: { (self, event) in
       self.onStyleLoadedComponents.forEach { (component) in
         component.addToMap(self, style: self.mapboxMap.style)
       }
-
+      
       if !self.styleLoaded {
         self.styleLoaded = true
         if let mapboxMap = self.mapboxMap {

package/ios/RCTMGL-v10/RCTMGLMapViewManager.m

@@ -5,13 +5,16 @@
 
 RCT_REMAP_VIEW_PROPERTY(attributionEnabled, reactAttributionEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(attributionPosition, reactAttributionPosition, NSDictionary)
+
 RCT_REMAP_VIEW_PROPERTY(logoEnabled, reactLogoEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(logoPosition, reactLogoPosition, NSDictionary)
+
 RCT_REMAP_VIEW_PROPERTY(compassEnabled, reactCompassEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(compassFadeWhenNorth, reactCompassFadeWhenNorth, BOOL)
 RCT_REMAP_VIEW_PROPERTY(compassPosition, reactCompassPosition, NSDictionary)
 RCT_REMAP_VIEW_PROPERTY(compassViewPosition, reactCompassViewPosition, NSInteger)
 RCT_REMAP_VIEW_PROPERTY(compassViewMargins, reactCompassViewMargins, CGPoint)
+RCT_REMAP_VIEW_PROPERTY(compassImage, reactCompassImage, NSString)
 
 RCT_REMAP_VIEW_PROPERTY(scaleBarEnabled, reactScaleBarEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(scaleBarPosition, reactScaleBarPosition, NSDictionary)

package/ios/RCTMGL-v10/RCTMGLMapViewManager.swift

@@ -215,13 +215,13 @@ extension RCTMGLMapViewManager {
     resolver: @escaping RCTPromiseResolveBlock,
     rejecter: @escaping RCTPromiseRejectBlock) -> Void {
       withMapView(reactTag, name:"queryRenderedFeaturesInRect", rejecter: rejecter) { mapView in
-        let left = bbox.isEmpty ? 0.0 : CGFloat(bbox[0].floatValue)
-        let bottom = bbox.isEmpty ? 0.0 : CGFloat(bbox[1].floatValue)
-        let right = bbox.isEmpty ? 0.0 : CGFloat(bbox[2].floatValue)
-        let top = bbox.isEmpty ? 0.0 : CGFloat(bbox[3].floatValue)
+        let top = bbox.isEmpty ? 0.0 : CGFloat(bbox[0].floatValue)
+        let right = bbox.isEmpty ? 0.0 : CGFloat(bbox[1].floatValue)
+        let bottom = bbox.isEmpty ? 0.0 : CGFloat(bbox[2].floatValue)
+        let left = bbox.isEmpty ? 0.0 : CGFloat(bbox[3].floatValue)
         let rect = bbox.isEmpty ? CGRect(x: 0.0, y: 0.0, width: mapView.bounds.size.width, height: mapView.bounds.size.height) : CGRect(x: [left,right].min()!, y: [top,bottom].min()!, width: abs(right-left), height: abs(bottom-top))
         logged("queryRenderedFeaturesInRect.option", rejecter: rejecter) {
-          let options = try RenderedQueryOptions(layerIds: layerIDs, filter: filter?.asExpression())
+          let options = try RenderedQueryOptions(layerIds: layerIDs?.isEmpty ?? true ? nil : layerIDs, filter: filter?.asExpression())
           mapView.mapboxMap.queryRenderedFeatures(with: rect, options: options) { result in
             switch result {
             case .success(let features):

package/ios/RCTMGL-v10/RCTMGLMarkerView.swift

@@ -7,7 +7,7 @@ class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
   static let key = "RCTMGLMarkerView"
   let id: String = "marker-\(UUID().uuidString)"
   
-  var map: RCTMGLMapView?
+  weak var map: RCTMGLMapView?
   
   var didAddToMap = false
   

package/ios/RCTMGL-v10/RCTMGLPointAnnotation.swift

@@ -14,7 +14,7 @@ class RCTMGLPointAnnotation : RCTMGLInteractiveElement {
   static var gid = 0;
   
   var annotation : PointAnnotation! = nil
-  var callout: RCTMGLCallout? = nil
+  weak var callout: RCTMGLCallout? = nil
   var calloutId : String?
   var image : UIImage? = nil
   var reactSubviews : [UIView] = []

package/ios/RCTMGL-v10/RCTMGLSingletonLayer.swift

@@ -3,8 +3,8 @@ import MapboxMaps
 /// RCTMGLSingletonLayer is absract superclass for Light, Atmosphere, Terrain
 @objc
 class RCTMGLSingletonLayer : UIView {
-  var bridge : RCTBridge? = nil
-  var map : RCTMGLMapView? = nil
+  weak var bridge : RCTBridge? = nil
+  weak var map : RCTMGLMapView? = nil
   var style: Style? = nil
   
   @objc var reactStyle : Dictionary<String, Any>? = nil {

package/ios/RCTMGL-v10/RCTMGLSource.swift

@@ -2,11 +2,22 @@
 
 @objc
 class RCTMGLSource : RCTMGLInteractiveElement {
-  
+  var layers: [RCTMGLSourceConsumer] = []
+
   var source : Source? = nil
 
   var ownsSource : Bool = false
   
+  override func getLayerIDs() -> [String] {
+    layers.compactMap {
+      if let layer = $0 as? RCTMGLLayer {
+        return layer.id
+      } else {
+        return nil
+      }
+    }
+  }
+
   func makeSource() -> Source {
     fatalError("Subclasses should override makeSource")
   }
@@ -15,6 +26,8 @@ class RCTMGLSource : RCTMGLInteractiveElement {
     fatalError("Subclasses should override makeSource")
   }
   
+  // MARK: - UIView+React
+
   @objc override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
     if let layer : RCTMGLSourceConsumer = subview as? RCTMGLSourceConsumer {
       if let map = map {
@@ -22,6 +35,15 @@ class RCTMGLSource : RCTMGLInteractiveElement {
       }
       layers.append(layer)
     }
+    super.insertReactSubview(subview, at: atIndex)
+  }
+  
+  @objc override func removeReactSubview(_ subview: UIView!) {
+    super.removeReactSubview(subview)
+  }
+  
+  @objc override func didUpdateReactSubviews() {
+    // do nothing to prevent inserting layers to UIView hierarchy
   }
   
   // MARK: - RCTMGLInteractiveElement

package/ios/RCTMGL-v10/RCTMGLStyleValue.swift

@@ -225,7 +225,7 @@ class RCTMGLStyleValue {
           red: CGFloat((Float((rgbValue & 0xff0000) >> 16)) / 255.0),
           green: CGFloat((Float((rgbValue & 0x00ff00) >> 8)) / 255.0),
           blue: CGFloat((Float((rgbValue & 0x0000ff) >> 0)) / 255.0),
-          alpha: 1.0)
+          alpha: CGFloat((rgbValue & 0xFF000000) >> 24) / 0xFF)
   }
 
   func mglStyleValueColor() -> Value<StyleColor> {